CSS Problem mit <li>

zoom · 09.03.09

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?

schwaiger · 09.03.09

stell ma die src online....

zoom · 09.03.09

Hallo schwaiger

Hier die img src:
http://img222.imageshack.us/img222/7284/bildq.jpg
(imageshack hat an den Namen ein 'q' angehängt, muss also im Code geändert werden)

highberg · 09.03.09

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 ?

schwaiger · 09.03.09

ne meinte alles also zu ansehen in html

und n li brauch immer n ul oder ol als parent

bezierkurve · 09.03.09

Hier stand Unsinn. Sorry.

highberg · 09.03.09

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>

highberg · 09.03.09

Mit dem CSS wirst du auch probleme bekommen,
der InternetExplorer wird dir das ganz anders darstellen wie der Firefox

zoom · 09.03.09

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

highberg · 09.03.09

Wenn das Skript mal online läuft würde ich mich über einen Link freuen.

schwaiger · 09.03.09

http://www.purpled.de/test.html

testen kannste hier:
http://ipinfo.info/netrenderer/index.php

ziehs dir schnell ich lösche es morgen.

lg flo

ps warum müssen die divs sein ist volkommener tennef

highberg · 09.03.09

Okay,
die <div> Tags sind wirklich unnötig - dafür sind die Tags eigentlich nicht gedacht

zoom · 09.03.09

schwaiger schrieb:
ziehs dir schnell ich lösche es morgen.

Was soll ich mir ziehen? Die Seite http://www.purpled.de/test.html zeigt nichts an.

highberg schrieb:
Mit dem CSS wirst du auch probleme bekommen,
der InternetExplorer wird dir das ganz anders darstellen wie der Firefox

IE (5.5 bis 7) habe ich getestet. Der zeigt alles wie gewollt an.

highberg schrieb:
Wenn das Skript mal online läuft würde ich mich über einen Link freuen.

Ich weiß noch nicht, ob das mal online gehen wird.

schwaiger schrieb:
ps warum müssen die divs sein ist volkommener tennef

highberg schrieb:
Okay,
die <div> Tags sind wirklich unnötig - dafür sind die Tags eigentlich nicht gedacht

Stimmt. Mit den divs habe ich mich vertan.

Gruß zoom

schwaiger · 09.03.09

mein fehler sorry

hier nochmal
http://www.purpled.de/test.html

zoom · 09.03.09

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.

schwaiger · 09.03.09

siehst du und daher wusste ich nicht was du möchtest möchtest du eine horizontale navigation ?

zoom · 09.03.09

zoom schrieb:
In den CSS fehlt für li eine Anweisung, dass die inline angezeigt werden sollen. Im Moment wird alles untereinander dargestellt.

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

CSS Problem mit <li>

Antonowka

Weigelts Zinszahler (Rotfranch)

Antonowka

Empire

Weigelts Zinszahler (Rotfranch)

Halberstädter Jungfernapfel

Empire

Empire

Antonowka

Empire

Weigelts Zinszahler (Rotfranch)

Empire

Antonowka

Weigelts Zinszahler (Rotfranch)

Antonowka

Weigelts Zinszahler (Rotfranch)

Antonowka

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)