Listen in CSS horizontal & vertikal anordnen

mephisto2k

Hallo,

ich stehe vor einem kleinen Problem, ich möchte meine Website ohne Tabellenlayouts gestalten, weiß aber jetzt nicht mehr weiter.

Ich möchte eine unsortierte Liste so anordnen das Listeneinträge <li></li> untereinander jedoch Listen selbst <ul></ul> nebeneinander angeordnet werden.

Wie müsste also für folgende Liste der CSS Teil aussehen?

Code

<ul>
        <li>1 oben</li>
        <li>1 unten</li>
    </ul>
    <ul>
        <li>2 oben</li>
        <li>2 unten</li>
    </ul>
    <ul>
        <li>3 oben</li>
        <li>3.1 oben</li>
        <li>3.2 mitte</li>
        <li>3.3 unten</li>
    </ul>

Alles anzeigen

MfG
mephisto2k

Tobse

Dazu brauchst du CSS. Du musst alle <ul>´s nach links floaten und alle <u> <li>´s display:block;'en. Um dann dein Layout nicht zu zerschiessen musst du dann noch hinter jede Liste einen <div class="clear"></div> setzten.
P.S:

Code

.clear { clear: both; }

mephisto2k

Wow das ging schnell tausend Dank.

Die Anordnung der Listen ist nun korrekt nur ist jetzt das Layout irgendwie zerschossen...

Zerschossen in so fern das sich die Listen nun unter dem Navi

CSS

Code

/*importiert normalisierung.css*/
@import url("norm.css");


/*Seitenbreite fixieren und Seite zentrieren*/




body {
    position: relative;
    margin: 0 auto;            /*Aussenabstand oben & unten ist null*/
    text-align: center;
    width: 1024px;
    Border: 1px solid white;
    background: black;        /*schwarze Seitenfarbe*/
    font-size: 100.01%;
    font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    color: #e9e9e9;
}


/*-------------------- Layoutgrafiken werden plaziert --------------------*/


/*_+++ Kopf Grafik +++ */
div#oben {
    background:url(../images/layout/oben.gif) no-repeat center;
    width: 1024px;
    height: 129px;
}


/*_+++ Mittel Grafik +++ */
div#wrapper {
    background:url(../images/layout/xmitte.gif) repeat-y center;
    /* position: relative; */
    width: 1024px;
    text-align: left;
}


/*_+++ Inhaltsbereichs Grafik +++ 
div#content {
    padding: 0 50px;
    background:url(../images/layout/xmitte.gif) repeat-y center;
}*/


/*_+++ Fuß Grafik +++ */
div#footer {
    background:url(../images/layout/unten.gif) no-repeat bottom;
    height: 105px;
    width: 1024px;
}


h1.logo {
    background: url(../images/layout/logo.png) no-repeat; /*Hintergrundgrafik mit Logo*/
    text-indent: -9999px;    
    /*Der Text wird weit außerhalb des Browser Fensters angezeigt, 
    dafür wird die Hintergrundsgrafik plaziert*/
    width: 326px;
    height: 89px;
    position: relative;
    left: 700px;
    top: 20px;
    padding: 10px;
}


blockquote.info {
    text-indent: -9999px;
    height: 0;
}


/*-------------------- Navigation wird gestaltet --------------------*/
#navi {
    background: url(../images/layout/navi.png) no-repeat;
    position: relative;
    left: 60px;
    float: left;
    width: 151px;
    min-height: 384px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.2em;
}


#unter_navi {
    width: 450px;
    position: relative;
    left: 230px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    padding: 15px;
    text-align: left;
    background-color: white;
}


#unter_navi ul {
    list-style-type: none;
    display: inline;
}


#unter_navi li {
    display: inline;
}


#navi h2, #unter_navi h2{
    text-indent: -9999px;
    height: 0;
}


#navi ul  {
    padding: 40px 5px 20px 20px;
}


#navi ul ul {
    padding: 0px 10px 0px 20px;
}


#navi ul li a:link, 
#navi ul li a:visited,
#navi ul li a:active {
    display: block; /*Links sind ueber gesamte breite der Liste anklickbar*/
    color: #5a6267; /*Dunkelgraue Schriftfarbe*/
    text-decoration: none; /*Loescht Unterstreichung der Links*/
    padding-top: 7px; /*Setzt einen Abstand unter den Links*/
    padding-bottom: 7px; /*Setzt einen Abstand unter den Links*/
}


#unter_navi ul li a:link, 
#unter_navi ul li a:visited,
#unter_navi ul li a:active  {
    color: #5a6267; /*Dunkelgraue Schriftfarbe*/
    text-decoration: none; /*Loescht Unterstreichung der Links*/
}


#navi ul li a:hover, 
#navi ul li a:focus,
#unter_navi ul li a:hover, 
#unter_navi ul li a:focus {
    color: #fff; /*Setzt die Textfarbe der Links beim ueberfahren (hover), 
    bzw. Navigation mittes Tastatur (focus), auf einen anderen Farbwert*/
}


#navi ul li a#current {
    font-weight: bold;
    color: #fff;
}


/*-------------------- Inhalt wird gestaltet --------------------*/


.clear { clear: both; }


#content_main {
    margin: 0 20px 0 240px;
}


#content_main p {
    font-size: .9em; /*Schriftart ist bereits im body definiert*/
    line-height: 1.3; /*Zeilenabstand (ohne größenangabe = "Wert" * so hoch wie Schriftgröße*/
    margin-right: 140px; /*Gibt Abstand zum folge Absatz an*/
    margin-bottom: 10px; /*Gibt Abstand zum folge Absatz an*/
}


#content_main p:first-letter {
    font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
    font-size: 1.3em;
    font-weight: 200;
    color: #9f9f9f;
    line-height: 1;
}


#content_main h3 {
    text-indent: -9999px;    
}


#content_main h4 {
    text-align: center;
    margin-right: 140px;
    padding-bottom: 10px;
    font-family: Baskerville, Cambria, "Times New Roman", serif;
    font-weight: 100;
    font-size: 1.2em
}


#content_inline ul li {
    display: block;
}


#content_inline ul {
    float: left;
    padding-left: 80px; 
}




#content img {
    float: left; /*Hat den Effekt das Bild links und wird rechts vom Text umflossen*/
    margin-right: 20px; 
    border: 1px solid #ccc;
    padding: 2px;
    background-color: #fff;
}


/*-------------- Listen des Inhaltes werden gestaltet --------------*/


#content_main ul li {    
    overflow: hidden;
    padding: 10px 0; /*oberer und unterer Innenabstand (10px) und linken und rechte abstand (0)*/




/*-------------------- Fußzeile wird gestaltet --------------------*/


#site_info {
    clear: both;
    /*background: url(../images/navihg.png) repeat;*/
    background-position: center;
    padding-bottom: 15px; 
}


#site_info h4 {
    text-indent: -9999px;
}


div#site_info {
    text-align: center;
    font-size: 0.7em;
    line-height: 1.3em;
}


/*-------------------- Sonstiges --------------------*/


acronym {
    cursor: help;
    border-bottom: 1px dotted maroon;
}

Alles anzeigen

HTML

Code

<div id="content_inline" >
<div class="clear">
    <ul>
        <li>1 oben</li>
        <li>1 mitte</li>
        <li>1 unten</li>
    </ul>
    <ul>
        <li>2 oben</li>
        <li>2 unten</li>
        <li>2 unten</li>
    </ul>
    <ul>
        <li>3 oben</li>
        <li>3 mitte</li>
        <li>3 unten</li>
    </ul>
</div>
</div>

Alles anzeigen

MfG
mephisto2k

Tobse

Des mit dem clear hast du nbißl falsch verstanden, halb so wild. Wenn du ein element floatest, wird es zu einem inline-element. Dadurch rutschen block elemente darunter, z.B. dein content nebenan. Das versaut dein layout. Um das zu vergindern, setzt man nach solchen elementen ein block element, daß diesen effekt aufhebt. das wäre ein <div style="clear:both;"></div> .

HTML

<ul> <li>foo</li></ul><div style="clear:both;"></div>

Tags