1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Problem mit <li>

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von zoom, 09.03.09.

  1. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Moin!

    Ich habe eine html-Seite mit dem Aufzählungsattribut li erstellt. Ich brauche allerdings zwei li Klassen, weil ich verschiedene Breiten darstellen möchte:
    Code:
    body {
    	width: 698px;
    }
    
    li {
        width: 220px;
        min-height: 40px;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 4px 6px;
        zoom: 1;
        *display: inline;
        _height: 40px;
        text-align: justify;
    }
    
    li.wide {
        width: 452px;
    }
    Für die Breite von 452px benutze ich also die li-Klasse "wide". Dazu mien html-Code:
    Code:
    <body>
    <li><div>Lorem ipsum dolor hallo Text steht an dieser Stelle.</div></li>
    <li><div>Lorem ipsum dolor hallo Text steht an dieser Stelle.</div></li>
    <li><div>Lorem ipsum dolor hallo Text steht an dieser Stelle.</div></li>
    <li><div><img src="bildq.jpg" /></div></li>
    <li><div><img src="bildq.jpg" /></div></li>
    <li><div><img src="bildq.jpg" /></div></li>
    <li><div>Lorem ipsum dolor hallo Text steht an dieser Stelle.</div></li>
    <!--Kommentar -->
    <li class="wide"><div>Lorem ipsum dolor hallo Text steht an dieser Stelle. Hier steht noch mehr Text.</div></li>
    <li><div><img src="bildq.jpg" /></div></li>
    <li class="wide"><div><img src="bildq.jpg" /></div></li>
    </body>
    Im Safari wird alles korrekt angezeigt. Nun habe ich aber auch schon mit Opera und Firefox (2.0) getestet. Der auftretende Fehler ist folgender. Der Text nach dem Kommentar (s. html-Code) wird eingerückt. Das soll so nicht sein. Er soll an gleicher Stelle beginnen, wie die anderen Elemente. Nun habe ich schon viel probiert und die CSS-Anweisungen verändert - leider ohne Erfolg. Kann mir jemand weiterhelfen?

    Gruß zoom

    Edit: Außerdem wird das Bild in der wide-Klasse zu früh eingefügt. Es ist also mit negativem Wert eingerückt.

    Edit2: Der Text wird auch im Safari eingerückt, allerdings nur minimal. Wie kommt das?
     
    #1 zoom, 09.03.09
    Zuletzt bearbeitet: 09.03.09
  2. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    stell ma die src online....
     
  3. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
  4. highberg

    highberg Empire

    Dabei seit:
    15.12.08
    Beiträge:
    85
    Siehe: http://de.selfhtml.org/html/text/listen.htm

    Dein Problem,
    du startest ein "list item" bevor du eine Aufzählungsliste einleitest.

    Das wäre die richtige Syntax

    Code:
    <ul>
      <li>Probieren geht &uuml;ber Studieren</li>
      <li>Liebe geht &uuml;ber Triebe</li>
      <li>Tante f&auml;llt &uuml;ber Kante</li>
    </ul>
    Wieso benützt du auch überall ein <div> Tag ?
     
  5. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    ne meinte alles also zu ansehen in html

    und n li brauch immer n ul oder ol als parent
     
  6. bezierkurve

    bezierkurve Danziger Kant

    Dabei seit:
    12.06.05
    Beiträge:
    3.861
    Hier stand Unsinn. Sorry.
     
  7. highberg

    highberg Empire

    Dabei seit:
    15.12.08
    Beiträge:
    85
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Beschreibung der Seite</title>
    </head>
    <body>
    
      <ul>
        <li>Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
        <li>Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
        <li>Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
        <li><img src="bildq.jpg" alt="Beschreibung" /></li>
        <li><img src="bildq.jpg" alt="Beschreibung" /></li>
        <li><img src="bildq.jpg" alt="Beschreibung" /></li>
        <li>Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>  
        <li><img src="bildq.jpg" alt="Beschreibung" /></li>
        <li class="wide">Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
        <li><img src="bildq.jpg" alt="Beschreibung" /></li>    
        <li class="wide"><img src="bildq.jpg" alt="Beschreibung" /></li>
      </ul>
    
    </body>
    </html>
    
     
  8. highberg

    highberg Empire

    Dabei seit:
    15.12.08
    Beiträge:
    85
    Mit dem CSS wirst du auch probleme bekommen,
    der InternetExplorer wird dir das ganz anders darstellen wie der Firefox
     
    zoom gefällt das.
  9. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Ich bin davon ausgegangen, dass der veröffentlichte Code ein Minimalbeispiel sei. Dem war nicht so. Der Code hat den erwähnten Fehler überhaupt nicht verursacht. Die divs um den Code herum waren fehlerhaft vermessen. Das heißt, die Abstände und Breitenangaben stimmten im CSS-File nicht. Nun habe ich den kompletten html-Code von Innen nach Außen überprüft und alle Angaben korrigiert.
    Vielen Dank für euer Hilfen. <ul> und </ul> hatte ich in der Tat vergessen. Das wurde aber trotzdem von den Browsern richtig interpretiert. Die divs in den <li> müssen sein, weil sonst einige Browser Schwierigkeiten machen. Den Internet-Explorer habe ich noch! nicht ausgiebig getestet. Das kommt noch. Aber eigentlich war der bei einem kurzen Test recht gewollt alles richtig darzustellen.

    An dieser Stelle noch einmal das korrigierte Minimalbeispiel (ohne meinen äußeren Code):
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
        width: 720px;
    }
    li {
        width: 222px;
        min-height: 40px;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 4px 6px;
        zoom: 1;
        *display: inline;
        _height: 40px;
        text-align: justify;
    }
    ul {
        margin: 0px;
        padding: 0px;
    }
    li.wide {
        width: 460px;
    }
    img {
        border: 3px solid #000;
    }
        </style>
    </head>
    <body>
    <ul>
    <li><hr />Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
    <li><hr />Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
    <li><hr />Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
    <li><img src="bildq.jpg" /></li>
    <li><img src="bildq.jpg" /></li>
    <li><img src="bildq.jpg" /></li>
    <li><<hr />Lorem ipsum dolor hallo Text steht an dieser Stelle.</li>
    <!--Kommentar -->
    <li class="wide"><hr />Lorem ipsum dolor hallo Text steht an dieser Stelle. Hier steht noch mehr Text.</li>
    <li><img src="bildq.jpg" /></li>
    <li class="wide"><img src="bildq.jpg" /></li></ul>
    </body>
    </html>
    Gruß zoom
     
    #9 zoom, 09.03.09
    Zuletzt bearbeitet: 09.03.09
  10. highberg

    highberg Empire

    Dabei seit:
    15.12.08
    Beiträge:
    85
    Wenn das Skript mal online läuft würde ich mich über einen Link freuen.
     
  11. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    zoom gefällt das.
  12. highberg

    highberg Empire

    Dabei seit:
    15.12.08
    Beiträge:
    85
    Okay,
    die <div> Tags sind wirklich unnötig - dafür sind die Tags eigentlich nicht gedacht ;)
     
  13. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Was soll ich mir ziehen? Die Seite http://www.purpled.de/test.html zeigt nichts an.
    IE (5.5 bis 7) habe ich getestet. Der zeigt alles wie gewollt an.
    Ich weiß noch nicht, ob das mal online gehen wird.
    Stimmt. Mit den divs habe ich mich vertan.

    Gruß zoom
     
  14. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
  15. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    schwaiger, ich verstehe ehrlich gesagt nicht, was ich damit jetzt anfangen soll? Sollte ich das jetzt mit dem netrenderer testen? In den CSS fehlt für li eine Anweisung, dass die inline angezeigt werden sollen. Im Moment wird alles untereinander dargestellt.
     
  16. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    19.03.06
    Beiträge:
    249
    siehst du und daher wusste ich nicht was du möchtest möchtest du eine horizontale navigation ?
     
  17. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Damit meinte ich deinen Quellcode von der Testseite. Das inline-Attribut war bei mir von Anfang an drin. Das Problem lag ja auch woanders - nicht am geposteten Code, sondern an anderen CSS-Einstellungen. Das war mein Fehler, dass ich mein erstes Beispiel nicht überprüft hatte. Aber jetzt läuft ja alles wunderbar (s. hier)

    Vielen Dank
    Gruß zoom
     

Diese Seite empfehlen