Auf Thema antworten 2026

Beitrag

<blockquote data-quote="JoLe05" data-source="post: 1981707" data-attributes="member: 362230">AW: Probetag vorbereitungHey Leute! das ist der html und css code für das menü... leider habe ich bei den beiden dropdown listen schwierigkeiten... der abstand links passt überhaupt nicht und ich weiss nicht wie ich den hinbekomme, und wenn ich auf die links klicken verschieben dich sich in die nächste zeileirgendwelche ideen?HTML-Code[HTML]&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;title&gt;Dropdown&lt;/title&gt;&lt;link href=&quot;css/dropdown_selber2.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &nbsp; &lt;div id=&quot;mainnavi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul id=&quot;menu&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;dropdown_about&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Partners&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About the road&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Specials&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contacts&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;dropdown_contacts&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;one and only&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About us&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact us&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;!--mainnavi end--&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]CSS:[CODE]@charset &quot;utf-8&quot;;/* CSS Document */a {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; }#mainnavi {&nbsp; &nbsp; width: 960px;&nbsp; &nbsp; margin: 30px auto 0px auto;}#menu{&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; height: 40px;&nbsp; &nbsp; width: 960px;&nbsp; &nbsp; &nbsp; &nbsp; /*rounded corners*/&nbsp; &nbsp; &nbsp; &nbsp; -moz-border-radius: 10px;&nbsp; &nbsp; -webkit-border-radius: 10px;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; /*gradients*/&nbsp; &nbsp; &nbsp; &nbsp; background: #d88462;&nbsp; &nbsp; background: -moz-linear-gradient(top, #e2a48b, #db8f70;) &nbsp; &nbsp; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2a48b), to(#db8f70)); &nbsp; &nbsp; &nbsp; &nbsp; /*border and shadow*/&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #e6af98;&nbsp; &nbsp; &nbsp; &nbsp; -moz-box-shadow: inset 0px 0px 1px #e9b9a6;&nbsp; &nbsp; -webkit-box-shadow: inset 0px 0px 1px #e9b9a6;&nbsp; &nbsp; box-shadow: inset 0px 0px 1px #e9b9a6;}&nbsp; &nbsp; #menu li {&nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; color: #CCC;&nbsp; &nbsp; float: left;&nbsp; &nbsp; display: block;&nbsp; &nbsp; border: none;&nbsp; &nbsp; padding: 4px 10px 4px 10px;&nbsp; &nbsp; margin-left: 30px;&nbsp; &nbsp; margin-top: 7px;&nbsp; &nbsp; position: relative;}#menu li:hover {&nbsp; &nbsp; &nbsp; &nbsp; /*background and rounded corners*/&nbsp; &nbsp; &nbsp; &nbsp; background: #f6e4dc;&nbsp; &nbsp; -moz-border-radius: 5px 5px 0px 0px;&nbsp; &nbsp; -webkit-border-radius: 5px 5px 0px 0px;&nbsp; &nbsp; border-radius: 5px 5px 0px 0px;&nbsp; &nbsp; &nbsp; &nbsp; /*shadow*/&nbsp; &nbsp; &nbsp; &nbsp; -moz-box-shadow: inset 0px 0px 1px #e9b9a6;&nbsp; &nbsp; -webkit-box-shadow: inset 0px 0px 1px #e9b9a6;&nbsp; &nbsp; box-shadow: inset 0px 0px 1px #e9b9a6;}.dropdown_contacts, .dropdown_about {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: -999em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*background and rounded corners*/&nbsp; &nbsp; &nbsp; &nbsp; background: #f6e4dc;&nbsp; &nbsp; -moz-border-radius: 5px 5px 5px 5px;&nbsp; &nbsp; -webkit-border-radius: 5px 5px 5px 5px;&nbsp; &nbsp; border-radius: 5px 5px 5px 5px;&nbsp; &nbsp; }#menu li:hover .dropdown_contacts,&nbsp;#menu li:hover .dropdown_about{&nbsp; &nbsp; left:0px;top:auto;}[/CODE]</blockquote>

[QUOTE="JoLe05, post: 1981707, member: 362230"] [b]AW: Probetag vorbereitung[/b] Hey Leute! das ist der html und css code für das menü... leider habe ich bei den beiden dropdown listen schwierigkeiten... der abstand links passt überhaupt nicht und ich weiss nicht wie ich den hinbekomme, und wenn ich auf die links klicken verschieben dich sich in die nächste zeile irgendwelche ideen? HTML-Code [HTML] <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Dropdown</title> <link href="css/dropdown_selber2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="mainnavi"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul class="dropdown_about"> <li><a href="#">Partners</a></li> <li><a href="#">About the road</a></li> <li><a href="#">Specials</a></li> </ul> </li> <li><a href="#">Contacts</a> <ul class="dropdown_contacts"> <li><a href="#">one and only</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> </li> </ul> </div> </body> </html> [/HTML] CSS: [CODE] @charset "utf-8"; /* CSS Document */ a { text-decoration: none; } #mainnavi { width: 960px; margin: 30px auto 0px auto; } #menu{ list-style: none; height: 40px; width: 960px; /*rounded corners*/ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /*gradients*/ background: #d88462; background: -moz-linear-gradient(top, #e2a48b, #db8f70;) background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2a48b), to(#db8f70)); /*border and shadow*/ border: 1px solid #e6af98; -moz-box-shadow: inset 0px 0px 1px #e9b9a6; -webkit-box-shadow: inset 0px 0px 1px #e9b9a6; box-shadow: inset 0px 0px 1px #e9b9a6; } #menu li { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #CCC; float: left; display: block; border: none; padding: 4px 10px 4px 10px; margin-left: 30px; margin-top: 7px; position: relative; } #menu li:hover { /*background and rounded corners*/ background: #f6e4dc; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; /*shadow*/ -moz-box-shadow: inset 0px 0px 1px #e9b9a6; -webkit-box-shadow: inset 0px 0px 1px #e9b9a6; box-shadow: inset 0px 0px 1px #e9b9a6; } .dropdown_contacts, .dropdown_about { position: absolute; left: -999em; /*background and rounded corners*/ background: #f6e4dc; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } #menu li:hover .dropdown_contacts, #menu li:hover .dropdown_about{ left:0px;top:auto; } [/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?