nicht angemeldet
Komplexe Elemente inline darstellen
Servus!
Mein Problem, siehe Link http://www.bnhof.de/~ho1277/links.html!
Ich hab' mir eine Linkseite (zu Eigenzwecken) zusammengebastelt. Ist viel experimentelles dabei, also gleich vorweg, kein Gemoser wegen Validierung (haben noch keinen drüber laufen lassen), der Ausschliessung nicht JS-Nutzer(ist ja vorallem für mich), von Opera, etc! Das Ganze ist halt Intressehalber und wenn ich die Seite später mal voranders verwenden sollte. Und Forum, Internet-Suche brachte nichts, auch nicht die erste Seite meiner Linkliste! ;-)
Das Problem ist eine CSS-Formatierung: Und zwar zeige ich die Links in einer Liste an:
Beispiel:
<LI><A HREF="http://www.delorie.com/web/lynxview.html">Lynx Viewer</A>
<DIV class=screenshot><IMG SRC="screenshots/4fd43d0da8b6a722a44b2799b98fe8fc.jpg" ALT=""></DIV>
</LI>
Wie man sieht mit DIV-Kapselung für ein Bild!
Das Ganze sieht dann wie folgt aus:
link
Bild
in css steht folgendes:
ul {
padding:0px;
margin:0px;
list-style-type:none;
}
li {
padding-bottom:7px;
display:inline;
width:260px;
}
Bitte nicht aufschreien, ich denk mir selber, dass inline und width nicht zusammenpassen, aber nur so geht's!
Im IE passt die Sache, der zeit die Elemente von links nach rechts an und macht einen "Zeilenumbruch" falls mehr Elemente da sind, als in die Zeile passen und fängt wieder von links an!
Genau das was ich wollte! Sieht aus wie folgt:
link1 link2
Bild1 Bild2
Aber im Mozilla zeigt er die Elemente untereinander, ist ja nicht schlecht, der eigentliche Sinn einer Liste. :-) Aber es soll ja auch von links nach rechts und dann in der nächsten "Zeile" weiter.
Ich hab's auch schon mit div Bereichen probiert und mit float:left etc. alles durch! Manches zereisst das Layout komplett, das wenigste geht im Mozilla und das eine dann wieder nur im Mozilla (fragt aber nicht mehr, was das war ;-))
Also wieder viel geschwaffel: Wie bringe ich Mozilla auch dazu die Elemente nebeneinander darzustellen? Auch ohne Liste, halt wirklich komplexe <DIV>-Container als inline-Text behandeln oder so
Wenn ich die <DIV> um die Bilder rausnehme, geht es, weil alles in einer richtigen Zeile steht, ergo der Zeilenumbruch macht es kaputt!
Oh mann, ich hoffe jemand hat 'nen Tipp! Sonst kann ich gleich 'ne feste Breite nehmen! Und Tabellen, und und und
Ciao,
Andy
-
Hallo,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title> Test </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
img {width:300px; height:200px; border:1px solid black; display:block;}
li {float:left; margin:1em;}
</style></head>
<body>
<ul>
<li><a href="#">link 1</a><img src="bild.jpg" alt=""></li>
<li><a href="#">link 2</a><img src="bild.jpg" alt=""></li>
<li><a href="#">link 3</a><img src="bild.jpg" alt=""></li>
<li><a href="#">link 4</a><img src="bild.jpg" alt=""></li>
</ul></body>
</html>getestet mit ie6 opera7 mozilla1.6
btw du brauchst keine bild.jpg datei erstellen, um dir das beispiel anzusehen.mfg NAG
--
signatur-
Servus!
getestet mit ie6 opera7 mozilla1.6
btw du brauchst keine bild.jpg datei erstellen, um dir das beispiel anzusehen.Danke! So was in der Richtung hatte ich auch schon! Ganz am Anfang, da ging die Sache auch, da keine umschliessenden <DIV>-Container vorhanden waren, aber irgendwie sprengt die Ganze Sache das Layout.
Hab' weiter recherchiert und hab' was von Wahsaga in einem anderen Forum (http://www.php-resource.de/forum/showthread/t-32217.html gefunden: http://www.isis.de/~wazgnuks/abr_float.htm!
Das Geheimnis ist das <DIV style="clear:left"></DIV> am Ende!
Juchuu! Ich arbeite das mal bei mir ein.
Danke mal wieder!
Ciao,
Andreas
-