Ich bin jetzt erstmal 10 Tage ausser Land ich meld mich nochmal wenn ich da bin .
SChreib das dann noch mal neu 
Beiträge von 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
Alles anzeigen#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; }HTML
Alles anzeigen<!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> -
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 wegHTML
Alles anzeigen<!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üuecken" /> </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>Code
Alles anzeigenbody { 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; } -
Danke für die Hilfe.
Das mit den Div Container hat mir sehr geholfen.
Ich hab das so gelöst
Code
Alles anzeigenbody { 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; }Con1 ist das Bild drin , con 2 das senkrechtemenü und in con3 das wagerechtemenü
danke nochmal
-
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
Alles anzeigenul#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;}HTML
Alles anzeigen<!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>