nicht angemeldet
zweispaltiges CSS
Holla Gemeinde!
Ich grübele gerade über einem kleinen Problem.
Ich schaffe es einfach nicht, daß NS6 und IE6 mir ein zweispaltiges Layout innerhalb eines umfassenden DIVs gescheit und vor allem einheitlich anzeigen.
Erläuterung?
1. Ebene: (quasi ein Platzhalter für meinen Content)
<div id="xyz">
mit xyz {background: white;color: #000;float: right;width: 76%; padding-top: 0px;}
2. Ebene - ein einschließendes DIV (ein Kasten in dem Infos dargestellt werden sollen.
#contentbox{background: #D6E9F4;color: #000;margin: 0px 20px 10px 10px;padding: 2px 8px 4px 5px;border: 1px solid #666;}
3. Ebene (hier soll zweispaltig gearbeitet werden, analog einer Tabelle - aber die will ich vermeiden!)
#linkespaltevonzwei {
width:15%;
float:left;
padding: 0px;
margin: 5px 20px 6px 2px;
line-height: 100%;
}
#rechtespaltevonzwei {
width: 75%;
float:right;
margin: 5px 5px 6px 2px;
padding: 0;
text-align : left;
line-height: 100%;
}
Das Ganze soll so ne Art News-Kasten werden - links kommt das Datum und rechts die Newsheadline.
Jetzt kommts:
Der IE stellt den kasten inklusive Inhalt richtig dar - oder zumindest wie er aussehen sollte.
Der NS6 zeichnet den Kasten und paßt aber dessen Höhe nicht dem Inhalt an ... er bleibt statisch.
Warum?
Wer kann mir helfen?
Und bitte keine Tipps a'la - Nimm eine Table und fertich. -> Will ich nicht machen.
Vielen Dank schonmal!
Ciao und Grüße vom Bodensee!
Jörg
-
Moin!
- Ebene (hier soll zweispaltig gearbeitet werden, analog einer Tabelle - aber die will ich vermeiden!)
Das Ganze soll so ne Art News-Kasten werden - links kommt das Datum und rechts die Newsheadline.
Jetzt kommts:
Der IE stellt den kasten inklusive Inhalt richtig dar - oder zumindest wie er aussehen sollte.
Der NS6 zeichnet den Kasten und paßt aber dessen Höhe nicht dem Inhalt an ... er bleibt statisch.Da du mit reichlich Layern arbeiten willst, was löblich ist, solltest du dich, was die Strukturierung der Layer angeht, mehr auf die logischen Zusammenhänge deines Textes konzentrieren:
Ein Datum und eine Headline gehören logisch zusammen.
Zwar gehören eine Sammlung von Daten und eine Sammlung von Headlines auch irgendwie zusammen, aber begucke dir das Resultat, welches dazu in HTML geschrieben werden muß, doch bitte mal ohne CSS an:
Datum
Datum
Datum
Datum
...Headline
Headline
Headline
Headline
...Nicht gerade sehr erbaulich. :)
Deshalb mein Vorschlag: Jeweils ein Datum und eine Headline ergeben zusammen ein Newselement.
Du baust deinen Newskasten also so auf (ich gehe von deiner dritten Ebene aus, die ja einen schönen rechteckigen Bereich definiert):
+-3.Ebene---------------------------------------------------+
|+--Newselement--------------------------------------------+|
||+----Datumselement-----+ +---Headlineelement------------+||
||| Datum | | Headline |||
||+----------------------+ +------------------------------+||
|+---------------------------------------------------------+|
| |
|+--Newselement--------------------------------------------+|
||+----Datumselement-----+ +---Headlineelement------------+||
||| Datum | | Headline |||
||+----------------------+ +------------------------------+||
|+---------------------------------------------------------+|
| |
|+--Newselement--------------------------------------------+|
||+----Datumselement-----+ +---Headlineelement------------+||
||| Datum | | Headline |||
||+----------------------+ +------------------------------+||
|+---------------------------------------------------------+|
+-----------------------------------------------------------+Jawoll, das _ist_ <div>-Terror, wenn man so will, aber nur so (finde zumindest ich) kriegt man das Layout in eine gute Harmonie mit dem Content.
Als HTML sähe das so aus:
<div id="3.Ebene">
<div class="newselement">
<div class="Datumselement">Datum</div>
<div class="Headlineelement">Headline</div>
</div>
<div class="newselement">
<div class="Datumselement">Datum</div>
<div class="Headlineelement">Headline</div>
</div>
<div class="newselement">
<div class="Datumselement">Datum</div>
<div class="Headlineelement">Headline</div>
</div>
</div>Die beiden Elemente kriegst du übrigens mit der CSS-Anweisung display:inline nebeneinander. Eigentlich sollte die Formatierung so funktionieren und die Anordnung ergeben (formatieren überlasse ich dir)
#3.Ebene { /* deine Sache */ }
#newselement { /* nichts besonderes */ }
#Datumselement { display:inline; /* und deine Formatierung fürs Datum */ }
#Headlineelement { display:inline; /* und deine Formatierung für die Headline */ }Der Vorteil bei dieser Schachtelung: Die Headline und das Datum müssen nicht unbedingt nebeneinander stehen. Du kannst sie auch untereinander anordnen, wenn's sein soll, z.B. für die Druckausgabe.
Das generelle Problem mit den mehrspaltigen Layouts (und warum ich davon abrate) ist, daß man irgendwo eine feste Trennung der beiden Spalten einhacken muß. Das ist für frei fließenden Text schon schlecht, aber wenn auch noch die Zeilenzuordnung stimmen muß, dann kriegst du ganz schnell ein Problem. Da muß nur eine Headline statt einer Zeile in zwei Zeilen stehen (warum auch immer - vielleicht ist die Auflösung zu klein oder die Schrift zu groß - irgendwas, was für dich nicht voraussehbar war), und schon stimmt die Zuordnung nicht mehr.
Datum1 Headline Zeile 1
Datum2 fortsetzung Zeile 2
Datum3 Headline2
Datum4 Headline3
Headline4Wenn noch Fragen sind, stell sie. :)
- Sven Rautenberg
-
Hoi Sven!
Thx für die prima Antwort. Ich glaube, ich habe zwischenzeitlich etwas den Überblick verloren gehabt. Du hast mich auf den Pfad der Struktur wieder zurückgebracht. Merci ...
Schönes Ostern!
Jörg
-
Hallo, Jörg,
Anregungen gibt es auch hier:
http://www.bluerobot.com/web/layouts/
http://www.andreas.com/faq-csstwocols.html
http://www.glish.com/css/
http://www.alistapart.com/stories/practicalcss/
http://css.nu/examples/css-columns.html
http://oregonstate.edu/aw/tutorials/stylesheets/csstips.htmloder Du wartest einfach auf CSS3:
http://www.w3.org/TR/css3-multicol/
Grüße,
Sebastian
-
hi
oder Du wartest einfach auf CSS3:
wie so oft, irgendwelchen Schrott oder "ich bin cool und bunt"-Funktionen baut man massenhaft ein, aber sinnvolle Erweiterungen lassen noch ewig auf sich warten. Ähnlich geht's ja auch dem "Schrecken der text-Grafik" text-shadow. Bis heute kann es kein einziger Browser!
gruss Kai
-
Hallo, Kai,
... aber sinnvolle Erweiterungen lassen noch ewig auf sich warten.
Und dann muß man nochmal mindestens 2 Jahre warten, bis man diese sinnvollen Erweiterungen auch einsetzen kann ...
Ähnlich geht's ja auch dem "Schrecken der text-Grafik" text-shadow. Bis heute kann es kein einziger Browser!
Wenn's denn unbedingt sein muß, kann man sich ja mit den proprietären Microsoft-Filtern behelfen:
<div style='font-size:10pt;width:90%;filter:dropshadow(color=#0000ff,offX=10,offY=10,positive=1)'>Schatten</div>
Grüße,
Sebastian
-
hi
Wenn's denn unbedingt sein muß, kann man sich ja mit den proprietären Microsoft-Filtern behelfen:
<div style='font-size:10pt;width:90%;filter:dropshadow(color=#0000ff,offX=10,offY=10,positive=1)'>Schatten</div>
davon hab' ich bloß unter Linux so viel...
-
-
-