Listenpunkte nebeneinander anzeigen lassen

Schüler · 25. Februar 2015

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

CSS

@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 { 
}

Alles anzeigen

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>

Alles anzeigen

Nitamud · 25. Februar 2015

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;}

Live-Example: http://codepen.io/Nitamud/pen/qEYepo

Zudem, sind dein divs ziemlich sinnlos, am Besten direkt das nav selbst stylen,
dazu gibt es dieses elemnt ja

Schüler · 26. Februar 2015

Zitat von Nitamud
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;}
Alles anzeigen

Zitat von Nitamud

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

Nitamud · 26. Februar 2015

So mal grob eine Ansatz dazu:

Die Elemente des Dropdowns musst du aus dem Textfluss nehmen und nicht nur unsichtbar machen:

CSS

nav ul ul {
 /* Remove element from document flow */
 position:absolute;
 /* Position relative to its parent &lt;li&gt; */
  /*Set the parents width here*/
 left:160px;
 top:0;
 display:none;




}

Alles anzeigen

Zudem die Elternlistelemente relativ positionieren, damit sich die Dropdownliste daran ausrichtet:

CSS

nav ul li {
  position: relative;
}

Und beim Hover dann eben wieder sichtbar machen:

CSS

nav ul li:hover ul {
 /* When list item is hovered, display UL nested within. */
 display:block;
}

Live-Beispiel: http://codepen.io/Nitamud/pen/qEYepo

Hoffe, jetzt hab ich dich verstanden

Listenpunkte nebeneinander anzeigen lassen

Jetzt mitmachen!

Teilen