kostenloser Webspace werbefrei: lima-city


Listenformatierung CSS

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kreutner-winkler

    kreutner-winkler hat kostenlosen Webspace.

    Hallo

    Habe folgendes Problem:
    Ich bearbeite gerade das Design eines Menüs. Dabei habe ich ein Menü, das aus einer äußeren und einer inneren Liste besteht.
    Wenn ich in der CSS-Datei Formatierung an der äußeren Liste vornehme, übernimmt es diese Formatierung auch für die innere Liste, was ich aber nicht will.

    Aufbau:

    <ul class="level_1">
    <li>Menüpunkt1
    <ul class="level_2>
    <li>Unterpunkt1</li>
    <li>Unterpunkt2</li>
    <li>Unterpunkt3</li>
    <li>Unterpunkt4</li>
    </ul>
    <li>Menüpunkt2
    <ul class="level_2>
    <li>Unterpunkt1</li>
    <li>Unterpunkt2</li>
    <li>Unterpunkt3</li>
    <li>Unterpunkt4</li>
    </ul>
    ......

    Im CSS bearbeite ich die Liste folgendermaßen:

    #mainmenu .level_1 ul {}
    #mainmenu .level_1 li {}
    #mainmenu .level_2 ul {}
    #mainmenu .level_2 li {}

    wenn ich eine Formatierung bei #mainmenu .level_1 ul vornehme übernimmt es sie auch bei level_2!

    Hätte jemand eine Idee, wie ich die beiden Formatierung getrennt machen könnte?

    greets Gerhard
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. m****r

    Sorge für valides HTML, dann geht es auch:

    <ul class="level_1">
    	<li>
    		<ul class="level_2">
    			<li>Unterpunkt1</li>
    			<li>Unterpunkt2</li>
    			<li>Unterpunkt3</li>
    			<li>Unterpunkt4</li>
    		</ul>
    	</li>
    
    	<li>
    		<ul class="level_2">
    			<li>Unterpunkt1</li>
    			<li>Unterpunkt2</li>
    			<li>Unterpunkt3</li>
    			<li>Unterpunkt4</li>
    		</ul>
    	</li>
    </ul>
    
    <style type="text/css">
    
    .level_1 {
    border:thin solid red;
    }
    .level_1 li {
    border:thin solid black;
    }
    .level_2 {
    border:thin solid yellow;
    }
    .level_2 li {
    border:thin solid green;
    }
    
    </style>
  4. Ansonsten mal mit !important probieren.
  5. Für Aufzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>list-style-type</title>
    </head><body>
    
    <h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disc</i></h4>
    <ul style="list-style-type:disc">
    <li>Probieren geht &uuml;ber Studieren</li>
    <!--usw.-->
    </ul>
    <h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>circle</i></h4>
    <ul style="list-style-type:circle">
    <li>Probieren geht &uuml;ber Studieren</li>
    <!--usw.-->
    </ul>
    <!--usw.-->
    
    <h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>decimal</i></h4>
    <ol style="list-style-type:decimal">
    <li>Tagesordnung</li>
    <!--usw.-->
    </ol>
    <h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>lower-roman</i></h4>
    <ol style="list-style-type:lower-roman">
    <li>Tagesordnung</li>
    <!--usw.-->
    </ol>
    
    <!--usw.-->
    </body></html>
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!