Warum wirkt display:inline hier nicht? Wo ist der Fehler?
0 
Manuel B.
0 0 0 Problem gelöst - Danke
Warum wirkt display:inline hier nicht? Wo ist der Fehler?
Gernot BackHallo!
Ich habe gerade ziemliche Probleme beim Erstellen von einer einfachen Seite. Hier mal der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div.img_container {
display: inline;
}
img {
border: 0;
}
</style>
</head>
<body>
<div class='img_container'>
<a href='#'>
<img src='test.jpg' width='160' height='120'>
</a>
<div>
<a href='#comments'>0 Kommentare</a>
</div>
</div>
<div class='img_container'>
<a href='#'>
<img src='test.jpg' width='160' height='120'>
</a>
<div>
<a href='#comments'>0 Kommentare</a>
</div>
</div>
<div>
<a href='#' style='float:left'>
die letzten 6 Bilder
</a>
<a href='#' style='float:right'>
die nächsten 6 Bilder
</a>
</div>
</body>
</html>
Jetzt sollen die <div>s mit der Klasse img_container alle nebeneinander angezeigt werden. Aber warum passiert das nicht? Irgendwie komme ich nicht drauf. Könntet ihr mir mal bitte auf die Sprünge helfen? Vielen Dank.
ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."
Schäuble:
"Wir können alles. Außer Rechtsstaat."
-
Ich grüsse den Cosmos,
Jetzt sollen die <div>s mit der Klasse img_container alle nebeneinander angezeigt werden.
Ich denke, dafür wirst du floaten müssen.
Möge das "Self" mit euch sein
--
Neulich dachte ich mir, einmal S/M ausprobieren wäre eine tolle Erfahrung. Also hab ich Windows gebootet ...
ie:{ br:> fl:| va:| ls:& fo:{ rl:( n4:{ de:] ss:) ch:? js:| mo:) sh:( zu:)-
Hallo!
Jetzt sollen die <div>s mit der Klasse img_container alle nebeneinander angezeigt werden.
Ich denke, dafür wirst du floaten müssen.
Danke! Nach dem Essen probiere ich es damit :)
ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."
-
-
Hallo!
Ich habe mir gerade mit Firebug das ganze nochmal angesehen. Das zweite <div> [1] zu groß ist. Der Denkfehler von mir war, dass ich ja schlecht ein block-Element in ein inline-Element packen kann. Aber wie kriege ich es dann hin, dass der Text "X Kommentare" unterhalb des Bildes kommt? Jetzt mache ich erstmal Pause und ess etwas, in der Hoffnung, dass mein Hirn danach freigepustet ist :-)
<div class='img_container'> <a href='#'> <img src='test.jpg' width='160' height='120'> </a> [1]<div> <a href='#comments'>0 Kommentare</a> </div> </div>ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."-
Hallo ww,
Der Denkfehler von mir war, dass ich ja schlecht ein block-Element in ein inline-Element packen kann. Aber wie kriege ich es dann hin, dass der Text "X Kommentare" unterhalb des Bildes kommt? Jetzt mache ich erstmal Pause und ess etwas, in der Hoffnung, dass mein Hirn danach freigepustet ist :-)
Du könntest zu Layout-Missbrauchszwecken mit Tabellen arbeiten: Bild jeweils in oberer Zeile, Bildunterschrift jeweils in unterer Zeile, den Tabellen je nach Auffassungsgabe des Browsers display:inline bzw. display:inline-table verpassen.
Dann lassen sich deine Inline-Tabellen bündig auf einer Zeile und sogar auch über ein Text-Align im Elternelement zentriert oder im Blocksatz ausrichten. Wenn du so etwas gar nicht beabsichtigst, nimm einfach Float.
Gruß Gernot
--
super me
-
-
Hallo,
<div class='img_container'> <!-- display:inline -->
<a href='#'>
<img src='test.jpg' width='160' height='120'>
</a>
<div> <!-- display:block -->
<a href='#comments'>0 Kommentare</a>
</div> <!-- display:block -->
</div> <!-- display:inline --><div class='img_container'> <!-- display:inline -->
<a href='#'>
<img src='test.jpg' width='160' height='120'>
</a>
<div> <!-- display:block -->
<a href='#comments'>0 Kommentare</a>
</div> <!-- display:block -->
</div> <!-- display:inline --><div> <!-- display:block -->
<a href='#' style='float:left'>
die letzten 6 Bilder
</a>
<a href='#' style='float:right'>
die nächsten 6 Bilder
</a>
</div> <!-- display:block -->Wie du siehst ist dein Problem, dass du CSS-block-Elemente innerhalb von CSS-inline-Elementen hast. Die Folge davon ist, dass der unerwünschte Zeilenumbruch erhalten bleibt. Entweder du gibst dem div im div auch display:inline oder du lässt die divs einfach floaten. Nebenbei würde ich dir noch raten die Struktur deines HTML-Codes noch einmal zu überdenken. Meiner Meinung nach hast du da ein paar divs zuviel. Gruss, OhneName -
Hallo!
Danke an euch! Problem ist gelöst :)
ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."