[CSS] ul li etc.?

Dieses Thema im Forum "Webdesign" wurde erstellt von .x-tra, 16. Februar 2009 .

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 16. Februar 2009
    ul li etc.?

    trotz css4you hab ich ul und li noch net richtig verstanden, also es wurde aus den beispielen nicht ersichtlich, oder ich hab die richtige erklärung dazu übersehen.

    class und id ist klar, das ist aber auch das einzige....
    könnte mir das jemand erklären?
     

  2. Anzeige
  3. #2 16. Februar 2009
    AW: ul li etc.?

    Verdammt, falscher button xD
    okay... <ul> ist dein Elternelement, <li> ist dagegen sozusagen das 'Kind'.
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>

    Willst du nun per CSS ul bzw. li beinflussen, dann vergibst du am besten <ul> eine Klasse oder ID. IDs darfst du maximal ein mal verwenden, also für einzigartige elemente (wie z.B. header). Klassen hingegen können so oft vergeben werden wie du lustig bist.

    Angenommen du vergibst dem <ul>-Element nun die Klasse 'liste', dann schaut das ganze so aus:
    <ul class="liste">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>

    und der CSS-Teil z.B: so:
    ul.liste { angabe: xyz; }

    Um nun auf die einzelnen Listen-Elemente zugreifen zu können, kannst du die verschachtelte Anordnung nutzen:

    ul.liste li { angabe2: xyz; }

    das macht es um einiges einfacher, als ständig <li class="elementA"> oder ähnliches zu schreiben.

    Ich hoffe ich hab damit deine Frage beantwortet^^
     
  4. #3 17. Februar 2009
    AW: ul li etc.?

    Was haben ul und li mit CSS zutun? Du kannst diese Elemente mit CSS gestalten, wie alle anderen HTML Elemente auch.

    ul ist eine Aufzählung, eine Liste und li sind die Listenelemente.
    Du kannst statt ul auch ol verwenden, dann hast du eine numerische Liste / Aufzählung, also statt einem Kreis davor die entsprechende Zahl. So wie in Word eben ^^
     
  5. #4 23. Februar 2009
    AW: ul li etc.?

    um das nochma kurz klarzustellen:
    ul -> unordered list
    ol -> ordered list (Aufzählungstypen: type = 1 | A | a | I | i)

    mfg
     
  6. #5 1. März 2009
    AW: ul li etc.?

    aha soweit schein ich das jetzt kapiert zu haben.
    man kann also mittels ul alle listenelemente gleich vorweg definieren, aber ul auch noch extra was mitgeben, man spart sich im großen ganzen nur jeweils für jeden menüpunkt extra nen tag zu schreiben, bzw. zuzuweisen.
    aber ul und ol setzen ja nun vorweg jeweils nen punkt, oder zahl, ist das richtig?
    hab das irgendwo mal gesehen, daß dann jedesmal nen punkt davor war.
    das brauch ich ja nun garnicht.
     
  7. #6 1. März 2009
    AW: ul li etc.?

    Hiermit entfernst du den Listenpunkt und den die Abstände!

    Code:
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
  8. #7 1. März 2009
    AW: ul li etc.?

    Du kannst vor die Listenpunkte auch eigene Bilder anstatt einfache Punkte verwenden. So gehts:

    ul, li { list-style-image: url('www.urloderrelativerpfad.de') }
     
  9. #8 1. März 2009
    AW: ul li etc.?

    du bist ein genie.
    genau das habe ich gesucht.
    weil bei dem menü was ich haben wollte, war ja sowas.
    ich denke jetzt bekomm ich sowas auch selber hin.
    einfach hamma.
    und bw´s sind gleich raus.
     
  10. #9 3. März 2009
    AW: ul li etc.?

    ich muss nochmal posten, weil ein editieren sieht man ja in der übersicht hier nicht, glaube ich, also bitte nicht gleich wieder verwarnen.

    Ich hab das jetzt so gemacht:
    Code:
    <div class="menugrey">
    <!--[if IE ]>
    <link href="{T_THEME_PATH}/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <div id="menubar">
     <ul id="menu">
     <li><a href="/">Home</a></li>
     <li><a href="/board/">News</a></li>
     <li><a href="/board/">Forum</a></li>
     <li><a href="/board/viewforum.php?f=6">Showcase</a></li>
     <li><a href="/board/viewforum.php?f=7">Worklogs</a></li>
     <li><a href="/board/">Hilfe</a></li>
    
     </ul>
    </div>
    </div>
    und das zugehörige css:

    Code:
    #menubar a {
    border:medium none;
    font-size:0.9em;
    text-decoration:none;
    }
    #menu {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    #menu li {
    
    float:left;
    font-family:Verdana,sans-serif;
    font-size:20px;
    font-variant:small-caps;
    height:30px;
    letter-spacing:2px;
    line-height:30px;
    padding-left:2px;
    position:relative;
    }
    #menu li a {
    
    background-image: url("{T_THEME_PATH}/images/menugrey.png") repeat-x scroll 0 0;
    color:#28313f;
    display:block;
    height:30px;
    line-height:30px;
    padding:0 15px;
    padding-top:3px;
    }
    nich wundern das eine nicht hier definierte div tag ist nur die horizontale leiste.

    Es funktioniert, bis auf eines.
    Habe als listenpunkt versucht ein image zu nehmen.
    Tu ich dies aber, rutscht wieder alles nach unten.

    also es soll als listenpunkt vorweg ein 1px breiter streifen als trennung sozusagen angezeigt werden.

    wie müsste das aussehen, ich habs ja nicht hinbekommen.
     

  11. Videos zum Thema
Die Seite wird geladen...