Hallo und erstmal wilkommen im Forum
Du musst im Grunde die Listenelemente floaten , nicht die Navigation selbst
statt
CSS#navi {float: left;}so:
CSS#navi ul li{float: left;}
Aber dann wird die Liste nicht mehr senkrecht angezeigt und die Listenelemte werden trotzdem nicht nebeneinander dargestellt
Und danke für das nav, bin noch ein kompletter Neuling und wusste das noch nicht xD
Hallo [Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/smile.png]
Ich habe folgendes Problem. Meine Navigationsleiste hat 2 Dropdownmenüs, die ich beide horizontal haben will.
Leider funktioniert der befehl Display="Inline" und float="left/right" nicht. Ich glaube es liegt daran, dass beide Tags schon benutzt werden.
Kann mir bitte jmd helfen? [Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/biggrin.png]
Ich weis, dass die Dropdown-Menüs zurzeit nicht anklickbar sind, aber das müsste ich mit Padding ja regeln können.
Ps: Ich habe diese Frage schon in einem anderen Forum gestellt, allerdings konnte mir niemand helfen
CSS-Code
@charset "utf-8";
/* Allgemeines*/
* { padding:0px; margin:0px; }
body {
background-color:#000000;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
color:#FFFFFF;
}
#wrapper {
max-width: 90%;
margin: 0px auto;
}
a { text-decoration:none; }
::selection { background-color: #D5D5D5; }
/* Navigation */
#navi { float:left; }
nav ul li ul {
visibility:hidden;
padding:5px 0 30px 170px;
}
nav ul li:hover > ul { visibility:visible;}
#navi li {
display:block;
list-style-type: none;
width:160px;
height:30px;
color:#fff;
background-color:#8F8F8F;
text-align:center;
font: 1em/30px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
margin:2px;
border-radius:10px;
text-shadow:0 1px 0 #434343;
box-shadow: 0 1px 0 #313131;
margin:10px 5px; 10px 0;
}
#navi a { color:#FFFFFF; }
#navi li:hover {
display:block;
list-style-type: none;
width:160px;
height:30px;
color:#fff;
background-color:#767676;
text-align:center;
font: 1em/30px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
margin:2px;
border-radius:10px;
text-shadow:1px 1px 1px #434343;
box-shadow: 0 1px 0 #313131;
margin:10px 5px; 10px 0;
}
.drop {
}
/* Kopf */
#head {
color: #FFFFFF;
padding: 2% 0 0 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-size:1.2em;
text-align:center;
text-shadow:0 1px 0 #434343;
margin-bottom:5px;
}
/* Inhalt */
#content {
float:center;
margin:5px 0 0 10px;
padding:5px;
color:#F5F5F5;
}
/* Fuss */
#end {
}HTML
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Chris Koeth´s Website</title>
<link rel="stylesheet" type="text/css" href="websiten/format.css"/>
</head>
<body>
<div id="wrapper">
<div id="head">
<h1>Willkommen auf meiner Website</h1>
<h3>Photographie, Fotomontagen</h3>
</div>
<hr/>
<div id="navi">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Persöhnliches</a>
<ul>
<li>Steckbrief</li>
<li>Über mich</li>
</ul>
</li>
<li><a href="">Familie</a></li>
<li>
<a href="">Hobbys</a>
<ul class="drop">
<li><a href="">Fotografie</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Zeichnen</a></li>
</ul>
</li>
<ul>
</nav>
</div>
<div id="content">
<p>text.</p>
</div>
</div>
</body>
</html>