Brauche hilfe beim positionieren

schramme

Hallo ich bin ein absoluter neuling in der Sache und brauch mal eure Hilfe.

zur Zeit hab ich oben ein Bild dadrunter ein Senkrechtesmenü und Rechts ein Wagerechtesmenü welches ich mit <div style="float:right"> dorthin bekommen habe ( was bestimmt falsche ist )

http://numlook.funpic.de/ <<< die Testseite

ich würde gern das Wagerechtemenü in dort haben wo es jetzt ist aber in der Mitte.

Vielleicht kann mir einer ein Tip geben oder mir den verbesserten Code

DAnke schonmal im Vorraus

Code

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding:0 3px 3px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:absolute;
    display:block;
    float:left;
    padding:5px 5px;
}
ul#css3menu1>li{
    margin:3px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:14px Trebuchet MS;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
ul#css3menu1 ul li{
    float:none;margin:3px 0 0;}
ul#css3menu1 ul a{
    text-align:left;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;color:#FFF;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#0c0d0c;border-color:#424542;border-style:solid;color:#FFF;background-image:url("mainbk.png");text-decoration:none;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 span{
    display:block;overflow:visible;background-image:url("arrowsub.png");background-position:right center;background-repeat:no-repeat;padding-right:14px;}
ul#css3menu1 ul span{
    background-image:url("arrowsub.png");padding-right:14px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    color:#FFF;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-width:0;}
ul#css3menu1 li.subfirst>a{
    border-width:0;}


    


    
ul#css3menu2{
    margin:0;list-style:none;padding:0;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
    *display:inline;}
ul#css3menu2 li{
    display:block;white-space:nowrap;font-size:0;float:left;}
* html ul#css3menu2 li a{
    display:inline-block;}
ul#css3menu2>li{
    margin:0;}
ul#css3menu2 a:active, ul#css3menu2 a:focus{
    outline-style:none;}
ul#css3menu2 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:14px Trebuchet MS;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
ul#css3menu1 ul li{
    float:none;margin:3px 0 0;}
ul#css3menu1 ul a{
    text-align:left;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;color:#FFF;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#0c0d0c;border-color:#424542;border-style:solid;color:#FFF;background-image:url("mainbk.png");text-decoration:none;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 span{
    display:block;overflow:visible;background-image:url("arrowsub.png");background-position:right center;background-repeat:no-repeat;padding-right:14px;}
ul#css3menu1 ul span{
    background-image:url("arrowsub.png");padding-right:14px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    color:#FFF;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-width:0;}
ul#css3menu1 li.subfirst>a{
    border-width:0;}

Alles anzeigen

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Info-Seite</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
<link rel="shortcut icon" href="favicon.ico">












<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="index_files/style.css" type="text/css" />
<!-- End css3menu.com HEAD section -->


</head>
<body style="background-color:#999;">
<div align="center"><img src="img1.jpg" width="100%" height="293"></div>


<div style="float:right">
<!-- Start css3menu.com BODY section id=2 -->
<ul id="css3menu2" class="topmenu">
    <li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 1</a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
    <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
</ul>
</div>
<!-- End css3menu.com BODY section -->
<!-- Start css3menu.com BODY section id=1 -->
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="index.html" style="width:243px;">1</a></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>2</span></a>
    <ul>
        <li class="subfirst"><a href="felix.html"><span>0</span></a>
        <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
        </ul></li>
        <li><a href="#"><span>0</span></a>
        <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul></li>
        <li><a href="#"><span>0</span></a>
        <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul></li>
        <li><a href="#"><span>0 </span></a>
        <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>3</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>4</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>5</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>6</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>7</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>8</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="width:243px;"><span>9</span></a>
    <ul>
        <li class="subfirst"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul></li>
</ul>
<!-- End css3menu.com BODY section -->
</body>
</html>

Alles anzeigen

MyXoToD

Ein Vorschlag von mir: Das horizontale Menü rechts neben das vertikale Menü. Hierfür müsstest du beiden Containern float:left geben.

Ich würde dir die Strukturierung anders empfehlen.
Wie man unschwer erkennen kann, wird das Layout 2-spaltig. Nach deinem Header sollte also ein Div kommen, welches alle Inhalte umschließt (beide menüs und den späteren Content). In dieses Div machst du 2 weitere Divs: Linke Spalte und rechte Spalte. Diesen Divs gibst du die nötige Breite (links = breite vom vertikalen Menü ; rechts = restliche Breite die noch übrig bleibt). Außerdem beiden Divs float left geben.
Nun hast du schonmal die Spalten. In die rechte Spalte packst du dein vertikales Menü und in die rechte spalte dein horizontales. Um das Horizontale nun in die Mitte zu bekommen, gibst du diesen Menü auch eine feste Breite und zusätzlich margin: 0 auto;
Dann kannst du den Content in die linke Spalte unter das horizontale Menü machen.

Wichtig: Wenn gefloatet wird muss auch gecleart werden. Also mach in dem großen div, welches rechts und links umschließt (aber nach den beiden spalten divs) ein <br style="clear: both;" />

schramme

Danke für die Hilfe.

Das mit den Div Container hat mir sehr geholfen.

Ich hab das so gelöst

Code

body
{
    background-color: #999;
}






#con1
{
margin: 10px auto;
    width: 1107px;
    height: 166px;
    background: #999;
}


#con2
{
    position: absolute; left:20px;
    width: auto;
    height: auto;
    background-color: #999;
}


#con3
{
    margin: 10px auto;
    width: 318px;
    height: 42px;
    background-color: #999;
}

Alles anzeigen

Con1 ist das Bild drin , con 2 das senkrechtemenü und in con3 das wagerechtemenü

danke nochmal

MyXoToD

Auf deiner Testseite hast du das aber so noch nicht übernommen oder? Würde gerne mal sehen wie es jetzt mit deiner Lösung aussieht.

schramme

Ne war nich hochgeladen - Habs jetzt gemacht und hab da doch glatt ne neue Frage

Wenn ich das Fenster verkleinere dann schiebt sich der Text aus dem Container "Content" hinter das Senkrechte menü.

Kann ich das irgendwie so hinbekommen das der Container "Content" denkt das der Container wo der Senkrechtemenu drin ist das ende der Seite ist ?

hier die Cods Die css
Für die beiden menüs lass ich mal weg

HTML

<!DOCTYPE html>
<html>


<head>
    <title>Titel</title>
    <link href="stylesheet.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />
</head>
<body>
    <div id="header">
    <img src="img/img.jpg" alt="Landungsbr&uumluecken" />
    </div>


            <!-- vertikalesmenü  Anfang-->
            <div id="senkmenu">
            <ul id="css3menu1" class="topmenu">
            <li class="topfirst"><a href="index.html" style="width:243px;">1</a></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>2</span></a>
            <ul>
            <li class="subfirst"><a href="felix.html"><span>0</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            </ul></li>
            <li><a href="#"><span>0</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li><a href="#"><span>0</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li><a href="#"><span>0 </span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>3</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>4</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>5</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>6</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>7</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>8</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            <li class="topmenu"><a href="#" style="width:243px;"><span>9</span></a>
            <ul>
            <li class="subfirst"><a href="#">0</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            </ul></li>
            </ul>
            </div>
              <!-- vertikalesmenü Ende -->


                 <!-- horizontalesmenü Anfang-->
                <div id="wagemenu">
                <ul id="css3menu2" class="topmenu">
                <li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
                <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 1</a></li>
                <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
                <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
                <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
                </ul>
                </div>
                <!--  horizontalesmenü Ende -->


                    <div id="con1">
                    <h4>
                       Moinsen,
                    <p>Bla Bla Bla</p>
                    </h4>
                    </div>
</body>
</html>

Alles anzeigen

Code

body
{
    background-color: #999;
}






#header
{
margin: 10px auto;
    width: 1107px;
    height: 166px;
    background: #999;
}


#senkmenu
{
    position: absolute; left:20px;
    width: auto;
    height: auto;
    background-color: #999;
}


#wagemenu
{
    margin: 10px auto;
    width: 400px;
    height: 42px;
    background-color: #999;
}


#con1
{
    margin: 20px auto;
    width: 800px;
    height: auto;
    background: #999;
}

Alles anzeigen

MyXoToD

Das dachte ich mir, deswegen wollte ich sehen was du nun da gemacht hast.
Du hast die linke Spalte und die rechte Spalte nicht via Float nebeneinander gemacht, sondern absolut positioniert.
Hier mal mein Vorschlag ein bisschen klarer:

HTML

<div class="header">
    <!-- Dein Headerbild oder whatever -->
</div>
<div class="content-wrapper">
    <div class="left-col">
        <!-- vertikales Menü -->
    </div>
    <div class="right-col">
        <!-- horizontales Menü -->
        <!-- Content -->
    </div>
    <br style="clear: both;" />
</div>

Alles anzeigen

HTML

.header {
    width: 980px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}


.content-wrapper {
    width: 980px;
}


.left-col {
    width: 277px;
    float: left;
}


.right-col {
    width: 703px;
    float: left;
}


.horizontales-menu {
    width: 500px;
    margin: 0 auto;
}

Alles anzeigen

schramme

Ich noch mal ...

erstmal danke für deine Hilfe.

aber es haut leider immernoch nicht hin hab ich was vergessen ? http://numlook.funpic.de/

*edit ich hab das nochmal geändert mit den /div aber haut trotzdem nicht hin oder bin ich blind.

Code

#body
{
    background-color: #999;
}


.header {
    width: 980px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}


.content-wrapper {
    width: 980px;
}


.left-col {
    width: 277px;
    float: left;
}


.right-col {
    width: 703px;
    float: left;
}


.horizontales-menu {
    width: 500px;
    margin: 0 auto;
}

Alles anzeigen

HTML

<!DOCTYPE html>
<html>


<head>
    <title>Titel</title>
    <link href="stylesheet.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />
</head>
    <body>


        <div class="header">
        <a href=""><img src="img/img.jpg"/></a>
        </div>
                <!-- vertikales Menü -->
                <!-- vertikalesmenü  Anfang-->
  <div class="content-wrapper">
            <div class="left-col">
            <div id="senkmenu">
                <ul id="css3menu1" class="topmenu">
                <li class="topfirst"><a href="index.html" style="width:243px;">1</a></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>2</span></a>
                <ul>
                <li class="subfirst"><a href="felix.html"><span>0</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                </ul></li>
                <li><a href="#"><span>0</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li><a href="#"><span>0</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li><a href="#"><span>0 </span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>3</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>4</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>5</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>6</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>7</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>8</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                <li class="topmenu"><a href="#" style="width:243px;"><span>9</span></a>
                <ul>
                <li class="subfirst"><a href="#">0</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                </ul></li>
                </ul>
            </div>
            </div>
                 <!-- vertikalesmenü Ende -- >


            <!-- horizontalesmenü Anfang-->
          <div class="right-col">
          <div id="wagemenu">
            <ul id="css3menu2" class="topmenu">
            <li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
            <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 1</a></li>
            <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
            <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
            <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
            </ul>
                  <!--  horizontalesmenü Ende -->
                  <!-- Content -->
            <h4>
            Moinen,
            <p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
            Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
            </p>
            </h4>
          </div>
          </div>


    <br style="clear: both;" />
     </div>
</body>
</html>

Alles anzeigen

MyXoToD

Ich glaube du hast ein schließendes Div irgendwo vergessen. Right Col ist bei dir in Left Col drin. Das darf nicht sein. Erst left col, dann right col und beide werden umschlossen von content wrapper, das ist schonmal richtig. Nach right col und vor dem schließenden content wrapper kommt dann das clear both.

schramme

Ich bin jetzt erstmal 10 Tage ausser Land ich meld mich nochmal wenn ich da bin .
SChreib das dann noch mal neu

Brauche hilfe beim positionieren

Tags

Benutzer online in diesem Thema