nicht angemeldet
DIVs mit display:inline
Hej!
Vorweg: Ich gehörte bisher zu den altmodischen Typen, die ihre Webseiten mit Layout-Tabellen bauen. Jetzt versuche ich zum ersten mal ernsthaft, das mit positionierten CIVs zu machen, und stoße dabei auf ein Problem. Ich habe mal einen Testfall zusammengebaut:
<div style="width:150px; height:50px; background-color:#FF0000; overflow:auto; white-space:nowrap;">
<div style="width:100px; background-color:#00FF00; display:inline"><img src="x.gif" width="100" height="1"><br>1</div>
<div style="width:100px; background-color:#0000FF; display:inline"><img src="x.gif" width="100" height="1"><br>2</div>
<div style="width:100px; background-color:#00FFFF; display:inline"><img src="x.gif" width="100" height="1"><br>3</div>
</div>
In IE und Opera sehe ich, wie beabsichtigt, ein rotes, 150px breites DIV, in dem drei bunte, je 100 Pixel breite DIVs NEBENeinander stehen, weshalb das äußere DIV einen HORIZONTALEN Scrollbar einblendet.
Im Mozilla aber sehe ich in diesem äußeren DIV ein buntes Durcheinander und einen VERTIKALEN Scrollbar.
Was mache ich falsch?
-
hi,
Vorweg: Ich gehörte bisher zu den altmodischen Typen, die ihre Webseiten mit Layout-Tabellen bauen. Jetzt versuche ich zum ersten mal ernsthaft, das mit positionierten CIVs zu machen, und stoße dabei auf ein Problem.
zum x-ten male: (absolute) positionierung ist _nicht_ der heilige gral des layoutens mit CSS!
Was mache ich falsch?
- (non-replaced) inline-elemente können keine breite und höhe zugewiesen bekommen.
- du nutzt aussagefreie divs, anstatt deine inhalte logisch auszuzeichen (absätze, überschriften, etc.)
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hej wahsaga!
OK, was der heilige Gral des CSS-Layouts ist, weiss ich ganz bestimmt nicht, bisher habe ich CSS nur zum optischen Formatieren von Seitenelementen hergenommen. Wenn Du den Weg zu diesem Gral kennst, habe ich aber sicher nichts dagegen, erleuchtet zu werden! :-)
Das mit den aussagefreien Elementen ist sicher richtig, aber mein Beispiel ist ja nur ein Testfall. In meinem konkreten Fall habe ich oben auf der Seite eine horizontale Leiste von Thumbnail-Bildern, darunter das jeweils ausgewählte Bild in Großansicht. Die Thumbnail-Leiste kann recht lang werden, und ich möchte nicht, dass der Browser erst die ganze Tabelle laden muss, um mit dem Darstellen anfangen zu können. Deshalb, so dachte ich mir, mache ich das mit nebeneinander liegenden DIVs. War das ein Fehler?
(Anmerkung: Ich habe es auch mit SPANs versucht, was aber aus anderen Gründen im Mozilla scheiterte.)
-- snorri
-
Hi,
Wenn Du den Weg zu diesem Gral kennst, habe ich aber sicher nichts dagegen, erleuchtet zu werden! :-)
Schritt 1: Erstelle den HTML-Code, *ohne auch nur im Ansatz an irgend eine Form der Darstellung zu denken*. Gehe dabei äußerst sparsam mit bedeutungsfreien Elementen wie <div> und <span> um, ohne auf sie zu verzichten.
Das mit den aussagefreien Elementen ist sicher richtig, aber mein Beispiel ist ja nur ein Testfall.
Dann nimm doch gleich <ul> und <li>, schließlich ist es eine Liste von Testelementen.
In meinem konkreten Fall habe ich oben auf der Seite eine horizontale Leiste von Thumbnail-Bildern,
Falsch. Erst mal hast Du nur strukturierte (bzw. zu strukturierende) Daten. Das kann per definitionem keine Leiste sein, geschweige denn horizontal.
darunter
Dito. Vielleicht danach, aber auf keinen Fall darunter.
Deshalb, so dachte ich mir, mache ich das mit nebeneinander liegenden DIVs. War das ein Fehler?
Ja. <div> ist kein Ersatz für irgendwas, das Du vorher gemacht hast, sondern ein Element, das der Gruppierung logisch zusammenhängender Elemente dient.
(Anmerkung: Ich habe es auch mit SPANs versucht, was aber aus anderen Gründen im Mozilla scheiterte.)
Zwischen <div>, <span>, <ul>, <a>, <del>, <blockquote>, <p>, <tbody> und allen anderen HTML-Elementen existiert für CSS nicht der geringste Unterschied. Wenn es Dir zum Verständnis hilft, verschlüssele zunächst alle Elementnamen per ROT-13 oder so, und wende darauf Dein CSS an.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
Hej wahsaga,
Deinem Tipp folgend habe ich die width-Angabe herausgenommen. Immerhin sieht es jetzt im IE genauso geschreddert aus wie im Netscape. Aber wie kriege ich es hin, dass es so aussieht, wie ich es mir vorstelle?
-- snorri
-
Hi,
Aber wie kriege ich es hin, dass es so aussieht, wie ich es mir vorstelle?
beschäftige Dich mit Floating.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hej Cheatah,
"float:left" habe ich bereits probiert. Hier ist das Problem, dass ich am Seitenrand gnadenlos einen Zeilenumbruch und einen VERTIKALEN Scrollbar bekomme, ich möchte aber eine einzige lange Zeile und einen HORIZONTALEN Scrollbar. Auch mit "white-space:nowrap", denn der Übergang zwischen dem Ende des einen DIVs und dem Anfang des nächsten ist kein Whitespace.
(Ja, ich habe es sogar mit <nobr> versucht, was erwartungsgemäß nicht funktionierte.)
Das einzige, was geht, ist zusätzlich eine dritte DIV-Ebene dazwischen zu schieben und der eine feste Breite zu geben. Diese Breite muss ich jedesmal anpassen, wenn ich ein neues Bild hinzufüge, sonst wird der Scrollbar zu lang oder zu kurz. Da die Seite manuell erstellt wird und nicht aus einem Script, ist mir das auf die Dauer zu lästig und fehleranfällig.
-- snorri
-
-