Ergebnis 1 bis 4 von 4

Thema: Listen in CSS horizontal & vertikal anordnen

  1. #1
    Teeny
    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Listen in CSS horizontal & vertikal anordnen

    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>
    MfG
    mephisto2k
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Listen in CSS horizontal & vertikal anordnen

    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; }
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    20.06.2010
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Listen in CSS horizontal & vertikal anordnen

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

  4. #4
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Listen in CSS horizontal & vertikal anordnen

    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-Code:
    <ul> <li>foo</li></ul><div style="clear:both;"></div>
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

Ähnliche Themen

  1. vertikal Fixed, horizontal scrollbar
    Von thilda im Forum HTML & CSS Forum
    Antworten: 29
    Letzter Beitrag: 23.07.2009, 17:45
  2. CSS Zentration vertikal und horizontal
    Von 1234d1 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 27.05.2009, 10:37
  3. Mutterdiv vertikal und horizontal ausrichten
    Von Nemesis im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.09.2007, 19:50
  4. Objektasurichtung (Vertikal & Horizontal)
    Von OGT24 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 02.08.2007, 03:45
  5. Tabelle horizontal und vertikal in die Mitte?
    Von im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 15.10.2005, 21:54

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •