nicht angemeldet
CSS-Layout - Wirklich das Wahre?
0 0 Ja, natuerlich!
0 0 0 0
CSS-Layout - Wirklich das Wahre?
Hi Leute,
ich will jetzt nicht schon wieder eine ellenlange Diskusion auslösen, aber ich finde, dass sich noch viels nicht mit CSS lösen lässt.
Beispiel:
Ich will 3 Spalten haben. 2 Aussen mit einer festen Größe und die Spalte in der Mitte mit einer variablen Größe. Möglich? Ich denke nicht.
Allerdings lass ich mich gerne vom Gegenteil überzeugen.
Anderes Beispiel. Ich habe oben eine Navigation und zwei Spalten darunter. Rechts soll allerdings die Spalte fest sein und links eine Spalte, die eine variable Größe hat. Hmm, ich habs hinbekommen, allerdings nur im IE 5, als ich das im IE6 ausprobiert habe und noch den Doctype angegeben habe, war es vorbei. Es funktionierte nicht mehr. Ich hab das mit float gemacht und sah auch recht gut aus.
Tja, wenn das ganze etwas einfacher wäre, dann würde ich CSS benutzen, bzw. möglich... aber wie gesagt ich lasse mit gerne vom Gegenteil überzeugen.
Bis denne
Daniel
-
Ehrlich? Ich mache alles mit Tabellen und CSS nutze ich hauptsächlich zum Formatieren von Text und Links und Grafiken und so... Und da geht nichts über CSS.
-
Hi.
Also da hab ich mich vielleicht etwas umständlich ausgedrückt. Also ich meinte kein Tabellenlayout, das mit CSS-Formatiert ist, sondern ein Layout, welches sich auf div zusammensetzt. Also verschiedene Ebenen/Layer, die du genau positionieren musst.
Bis denne
Daniel-
Hi,
da möchte ich auch noch eine gaaanz doofe Frage drauflegen, die mich schon eine Weile wurmt:
Wir kann ich mit CSS eine Schriftgröße vorgeben für die "Initialisierung" der Seite, aber trotzdem zulassen, dass jemand die Schrift am Platz verkleinert oder vergrößert?
Tom
-
Moin!
Wir kann ich mit CSS eine Schriftgröße vorgeben für die "Initialisierung" der Seite, aber trotzdem zulassen, dass jemand die Schrift am Platz verkleinert oder vergrößert?
Indem du eine relative Schriftgröße vorgibst (%, em, ex), und keine absolute wie px oder pt.
- Sven Rautenberg
-
-
-
-
Tach auch,
http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Noch Fragen?
Gruss,
Armin-
Moin!
Noch Fragen?
Und in der Praxis sieht das dann aus wie auf http://www.ivg.de (sorry, dass ich da schon zum dritten mal hinlinke, aber für wesentlich mehr Seiten, die CSS ausgiebig anwenden, bin ich nunmal noch nicht verantwortlich).
- Sven Rautenberg
-
Und in der Praxis sieht das dann aus wie auf http://www.ivg.de (sorry, dass ich da schon zum dritten mal hinlinke, aber für wesentlich mehr Seiten, die CSS ausgiebig anwenden, bin ich nunmal noch nicht verantwortlich).
Hmm. Also ich bin jetzt wirklich sehr überrascht, dass das funktioniert. Ich werde mal die Quelltexte druchforsten.
Wirklich noch mal danke!!!
Bis denne
Daniel -
[CSS-Layout]
Und in der Praxis sieht das dann aus wie auf http://www.ivg.de (sorry, dass ich da schon zum dritten mal hinlinke, aber für wesentlich mehr Seiten, die CSS ausgiebig anwenden, bin ich nunmal noch nicht verantwortlich).
Netter Versuch; sieht allerdings im Netscape 4.8 etwas merkwürdig aus und verwendet ein ziemlich ... eigenwilliges HTML (Semantikwert geht gegen Null).
H.
-
Moin!
Und in der Praxis sieht das dann aus wie auf http://www.ivg.de (sorry, dass ich da schon zum dritten mal hinlinke, aber für wesentlich mehr Seiten, die CSS ausgiebig anwenden, bin ich nunmal noch nicht verantwortlich).
Netter Versuch; sieht allerdings im Netscape 4.8 etwas merkwürdig aus und verwendet ein ziemlich ... eigenwilliges HTML (Semantikwert geht gegen Null).
Ja, sieht in der Tat in diesem alten Schrottbrowser nur "so ähnlich" aus wie das Original, aber da Netscape 4 folgende CSS-Eigenschaften nicht hinreichend unterstützt:
- background-position
- background-repeat
- background-image (layer-background-image ist zwar ein schöner Ersatz, hilft aber wegen der ersten beiden Mängel nicht)
- float
- right
- position:relative
- border-left/right/top/bottom
- Formatierungen von Formularfeldern
- und dynamische Breiten
diese aber zwingend notwendig sind, mußte das Netscape4-Layout eben ein wenig abgespeckt werden.
Und der reine Content sollte eigentlich in relativ semantischem HTML eingebettet sein (zumindest werden die Überschriften H2 und H4 sowie p-Blöcke verwendet).
Ansonsten bin ich da leider Gefangener des CMS: Reddot kommt mit CSS noch nicht wirklich klar, und die große Flexibilität des Texteditors erkaufe ich mir eben mit eher mangelhaften Auszeichnungsmöglichkeiten. Wenn ich z.B. dem Benutzer die Möglichkeit geben will, selbst H1-H6-Überschriften zu definieren, erhält er damit gleichzeitig die Möglichkeit, die Schriftgröße mittels <font size=...> festzulegen. Lasse ich z.B. die Definition einer Hintergrundfarbe (Textmarkereffekt) zu, fügt der Editor <font style="background-color:#Farbwert">dertext</font> ein. Also lasse ich lediglich zu, dass der Benutzer Text fett machen kann (was immerhin in <strong> umgesetzt wird), und formatiere das wie eine H4-Überschrift. Hervorhebung (auch semantisch) ist dadurch immer noch gegeben - aber eben nicht so, wie ich selbst mir das wünschen würde. Nur: <FONT> kommt mir garantier nicht mehr auf die Site. <würg> Und leider produziert eben dieser Editor leider invaliden Code um Tabellen herum (die werden innerhalb von <p> </p> platziert), was Netscape 4 auf entsprechenden Seiten ziemlich aus dem Konzept bringt.
Und nein, ich hab mir das CMS nicht ausgesucht, das wurde so befohlen (könnte man jedenfalls sagen). Abgesehen von den sehr deutlichen Schwächen im Bereich CSS ist es aber ganz nett.
- Sven Rautenberg
-
-
-
Tach auch,
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Noch Fragen?
Hmm, das ist schon ziemlich gut. Ich muss sagen, wirklich nicht schlecht.
Das habe ich gesucht: http://bluerobot.com/web/layouts/layout2.html ---> Wirklich gut. Allerdings versteh ich das Style Sheet nicht ganz. Muss ich zugeben. Ich hab mal die Teile kopiert. Vielleicht kann ja jemand einen Gedankenanstoß geben.
...
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}...
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the ""}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */voice-family: ""}"";
voice-family:inherit;
height:14px; /* the correct height */}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */body>#Header {height:14px;}
#Content {
margin:0px 210px 50px 10px;
padding:10px;
}#Menu {
position:absolute;
...
line-height:17px;
/* Again, the ugly brilliant hack. */voice-family: ""}"";
voice-family:inherit;width:150px;
}
/* Again, "be nice to Opera 5". */body>#Menu {width:150px;}
-
Moin!
Das habe ich gesucht: http://bluerobot.com/web/layouts/layout2.html ---> Wirklich gut. Allerdings versteh ich das Style Sheet nicht ganz. Muss ich zugeben. Ich hab mal die Teile kopiert. Vielleicht kann ja jemand einen Gedankenanstoß geben.
...
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}#Content>p {margin:0px;}
Innerhalb des Elements mit der ID #Content jedes p-Tag, was eine Ebene drunter angesiedelt ist.
<div id="Content">
<p>Das ist gemeint</p>
<p>Das auch</p>
<div class="irgendwas><p>das aber nicht!</p>
...#Content>p+p {text-indent:30px;}
Innerhalb des Elements mit der ID="Content" jedes p-Tag, welches direkter Nachfolger eines p-Tags ist, welches direkt eine Ebene unterhalb von dem ID-Element angesiedelt ist.
<div id="Content">
<p>Das ist nicht gemeint!</p>
<p>Das hier ist gemeint.</p>
<p>Das hier ist auch gemeint.</p>
......
#Header {
Selektor für das Element mit der ID="Header".
margin:50px 0px 10px 0px;
Die vier Zahlenangaben stehen für margin oben, rechts, unten, links (oder leicht zu merken: Nord, Ost, Süd, West).
padding:17px 0px 0px 20px;
Dito.
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */Der IE rechnet die width und height falsch zusammen. Die width/height _beinhaltet_ fälschlich die Breiten von padding und border. Damit das Element nicht zu klein wird, muss man die width/height größer setzen, damit die gleiche Darstellung erreicht wird.
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the ""}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */voice-family: ""}"";
Das ist Bestandteil eines "Hacks". Der IE bricht bei der ersten schließenden }-Klammer die CSS-Definitionsregel ab. Alles nachfolgende wird ignoriert. Damit aber echte CSS-Browser nicht auch abbrechen, wird diese Klammer gut verpackt und der voice-family zugewiesen, einer Angabe, die heutige Bildschirmbrowser eher nicht beachten.
voice-family:inherit;
Damit aber kein Schaden angerichtet wird, wird die voice-family gleich noch einmal definiert: Sie soll dann doch lieber die Eigenschaften des übergeordneten Elements erben.
height:14px; /* the correct height */
Das ist jetzt die Definition der eigentlichen Höhe.
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */body>#Header {height:14px;}
Ein Selektor, der das Element mit der ID="Header" formatiert, welches sich direkt unterhalb des body-Tags befinden muss. Wird vom IE5 nicht verstanden, aber von Opera 5 (der leider auch bei der ersten }-Klammer die CSS-Regel abbricht, aber die height korrekt berechnet).
#Content {
margin:0px 210px 50px 10px;
padding:10px;
}#Menu {
position:absolute;
...
line-height:17px;
/* Again, the ugly brilliant hack. */voice-family: ""}"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}Dasselbe wie oben, nur weniger ausführlich kommentiert.
Meine Meinung zu diesem Hack: Ultraböse! Würde ich nie verwenden. Da werden Browserverhaltensweisen ausgenutzt, die in der nächsten Browserversion schon wieder ganz anders aussehen können. Stell dir nur vor, dass der IE irgendwann beigebracht kriegt, nicht an der ersten }-Klammer abzubrechen, aber die width/height immer noch falsch zu berechnen. Dann ist Asche, weil er die nachträgliche, für CSS-Verhältnisse korrekte Breite/Höhe auch mitkriegt. Oder die neue Version kann plötzlich richtig rechnen, bricht aber bei der ersten }-Klammer immer noch ab - dann ist auch Asche, weil dann die Breite/Höhe nicht mehr stimmt.
Und genau das ist passiert! Der IE6 schafft es plötzlich, nicht mehr die erste }-Klammer zu verstehen, sondern erkennt, dass diese in Anführungsstrichen escaped ist, und liest die CSS-Regel weiter. Zum Glück kann man ihn zwingen, die Breite/Höhe korrekt zu berechnen, indem man ihn in den Standards-Mode zwingt. Denn leider versteht er den nachfolgenden Selektor body>#ID immer noch nicht.
Kleiner Test gefällig:
<html>
<head>
<title>CSS-Hack-Test</title>
<style>
#test {
background-color:#F00;
voice-family:""}"";
voice-family:inherit;
background-color:#00F;
}body>#test {
background-color:#0f0;
}
</style>
</head>
<body>
<div id="test">IE 5+ zeigt dies rot, IE6 blau, und echte Browser grün!</div>
</body>
</html>Man muß damit leben, dass der IE die Breite teilweise falsch berechnet. Mit geschachtelten DIVs kann man sich aber ganz vernünftig aus der Affäre ziehen, indem man das äußere DIV auf die gewünschte Breite definiert, und erst dem inneren DIV border und padding-Werte verpaßt (die Breite bleibt undefiniert und wird dadurch so breit, wie durch das äußere Element Platz vorhanden ist).
- Sven Rautenberg
-
Hallo Sven,
Wow, CSS fasziniert mich immer mehr !!
vor allem das mit diesen verschachtelten Elementen z.B. #Content>p+p {text-indent:30px;} hab ich bisher nicht kapiert.
Aber mit Deiner Erklärung war es plötzlich ganz klar *ehrlichgemeint*.
Hmmmmm, da könnte man alles mögliche mit vereinfachen *grübelundnachdenk*Aber ne klitztkleine Frage hab ich dann doch noch: wie ist das mit der Angabe
font:11px/20px verdana, arial, helvetica,...
^ ne Fontangabe mit 2 Größenangaben ??? wie Funktioniert das? wofür ist das gut? Bin schon auf ne Antwort von Dir gespannt.
Grüße aus Nürnberg, HarryS
-
Moin!
Aber ne klitztkleine Frage hab ich dann doch noch: wie ist das mit der Angabe
font:11px/20px verdana, arial, helvetica,...
^ ne Fontangabe mit 2 Größenangaben ??? wie Funktioniert das? wofür ist das gut? Bin schon auf ne Antwort von Dir gespannt.Auch das gibts. Wobei natürlich nicht zwei Größen gemeint sein können, und auch 11 geteilt durch 20 falsch ist. ;)
Auf diese Weise gibt man innerhalb einer font-Definition Schriftgröße/Zeilenhöhe an.
- Sven Rautenberg
-
Moin Sven!
font:11px/20px verdana, arial, helvetica,...
^ ne Fontangabe mit 2 Größenangaben ???Auch das gibts. Wobei natürlich nicht zwei Größen gemeint sein können, und auch 11 geteilt durch 20 falsch ist. ;)
Auf diese Weise gibt man innerhalb einer font-Definition Schriftgröße/Zeilenhöhe an.
Auerhauerhauer wie Werner sagen würde (der von Brösel :-) was es nicht alles gibt. Und schon wieder was gelernt. Vielen Dank.
Grüße aus Nürnberg, HarryS
-
-
-
-
Halloele,
ein _sehr_ interresantes post, nun verstehe ich auch erst wirklich wie das mit den "box-lessons" gemaht wurde.
ich fände es schön wenn jemand man nen toturial macht.
genau diese sachen die du grade angesprochen hast sollten da rein.
es ist möglich ein gutes cs layout unter fast allen browsern zu gestalte ( ausgenommen NN 4.x ) oder ?Mfg AnalphaBestie
-
Hallo,
ein _sehr_ interresantes post, nun verstehe ich auch erst wirklich wie das mit den "box-lessons" gemaht wurde.
ich fände es schön wenn jemand man nen toturial macht.
genau diese sachen die du grade angesprochen hast sollten da rein.
es ist möglich ein gutes cs layout unter fast allen browsern zu gestalte ( ausgenommen NN 4.x ) oder ?Leider nicht, zumindest nicht ohne weiteres. Opera unterstützt nicht alles (kann aber auch Sachen, die andere Browser nicht können) und auch der MSIE hat seine Probleme, z. B. bei den Pseudoformaten. http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm
Da muss man sich immer was einfallen lassen. Am weitesten entwickelt ist Mozilla/Nestcape. Wie es mit reinen Linux-Browsern steht, weiss ich (noch) nicht.Mfg AnalphaBestie
Mit freundlichen Grüßen
Dmitri Rettig
-
-
Hi Daniel,
[...] Allerdings versteh ich das Style Sheet nicht ganz. Muss ich zugeben. Ich hab mal die Teile kopiert. Vielleicht kann ja jemand einen Gedankenanstoß geben.
zusätzlich zu Sven ;) ist speziell, wenn es um so ausgefeilte Selektoren geht,
http://gallery.theopalgroup.com/selectoracle/
eine gute Hilfe. Dort kannst du sie in verständliches Englisch übersetzen lassen, was beim Einstieg in fortgeschrittenes CSS eine große Hilfe sein kann. Bookmarken!
LG Orlando
-
-
-
Hallo Daniel,
Beispiel:
Ich will 3 Spalten haben. 2 Aussen mit einer festen Größe und die Spalte in der Mitte mit einer variablen Größe. Möglich? Ich denke nicht.
Allerdings lass ich mich gerne vom Gegenteil überzeugen.das ist doch kein problem, die zwei absolut positionieren und den anderen mit margin oder padding auf die richtige breite bringen.
zb so: http://www.fractatulum.de/fraccss/sample/layout5.htmAnderes Beispiel. Ich habe oben eine Navigation und zwei Spalten darunter. Rechts soll allerdings die Spalte fest sein und links eine Spalte, die eine variable Größe hat. Hmm, ich habs hinbekommen, allerdings nur im IE 5, als ich das im IE6 ausprobiert habe und noch den Doctype angegeben habe, war es vorbei. Es funktionierte nicht mehr. Ich hab das mit float gemacht und sah auch recht gut aus.
das lässt sich mit der selben methode machen und das ist sicher wie so oft in css nicht die einzige möglichkeit.
Tja, wenn das ganze etwas einfacher wäre, dann würde ich CSS benutzen, bzw. möglich... aber wie gesagt ich lasse mit gerne vom Gegenteil überzeugen.
ich bin überzeugt, meine seite hat mich überzeugt, dass css-layout eine feine sache ist.
mfg, jan aus dresden
-
Hi!!!
das ist doch kein problem, die zwei absolut positionieren und den anderen mit margin oder padding auf die richtige breite bringen.
zb so: http://www.fractatulum.de/fraccss/sample/layout5.htmAuch ne interessante Seite.
das lässt sich mit der selben methode machen und das ist sicher wie so oft in css nicht die einzige möglichkeit.
ich bin überzeugt, meine seite hat mich überzeugt, dass css-layout eine feine sache ist.
Also das sieht schon alles sehr gut aus. Das werde ich mir alles mal genau anschauen. Und wenn das wirklich so gut funktionieren sollte, dann werde ich das auch machen.
Allerdings müsst ich sicherlich auch zugeben, dass es mit CSS etwas schwerer ist, als mit nem Tabellenlayout. Aber das würde ich in Kauf nehmen. Nun ja auch dir danke.
Bis denne aus Wermelskirchen
Daniel
-
-
Hi Daniel,
Ich will 3 Spalten haben. 2 Aussen mit einer festen Größe und die Spalte in der Mitte mit einer variablen Größe. Möglich? Ich denke nicht. Allerdings lass ich mich gerne vom Gegenteil überzeugen.
um ein weiteres Beispiel zu nennen:
http://skop.net/self/3spalten.html
Anderes Beispiel. Ich habe oben eine Navigation und zwei Spalten darunter. Rechts soll allerdings die Spalte fest sein und links eine Spalte, die eine variable Größe hat.
Das kannst du nach dem gleichen Schema lösen: Die Spalte mit der fixen Breite kannst du absolut positionieren, dem eigentlichen Inhalt einen Außenabstand auf der richtigen Seite verpassen. Eine Kombination von float/left ist manchmal auch sinnvoll.
Tja, wenn das ganze etwas einfacher wäre, dann würde ich CSS benutzen, bzw. möglich... aber wie gesagt ich lasse mit gerne vom Gegenteil überzeugen.
Übung macht den Meister, wenn man das System verstanden hat und alle Möglichkeiten kennt, kann man sich eigentlich immer helfen. Der Einstieg ist aber geprägt von Überraschungen, was denn alles mit CSS möglich ist ;)
LG Orlando
-
Hi,
Mit CSS kann man sicherlich mehr machen als mit poorem HTML, da kann man nichts gegen sagen. Oft muss man überlegen, wie darstellungsprobleme zu lösen sind, nur, wenn es nicht in jedem Browser andersausehen würde wäre es natürlich noch besser;)
Aleksej
-
Hallo Daniel,
es gibt zwar schon ein paar Möglichkeiten, trotzdem ist CSS als Layoutmittel
oft enttäuschend, und eigentlich hier ungeeignet. Für deine Vorgaben ist die
klassische Tabelle oft die einfachere und stabilere Lösung.Ein Grund warum ich aber trotzdem versuche CSS einzustezen liegt bei
Vorteilen in der Darstellung ähnlicher Seiten ohne Frames. Der Seitenwechsel
kann, wenn die Browser keine Elemente nachjustieren, sehr ruhig und angenehm
ablaufen.Ärgerlich aber die aufwändigen Anpassungen an verschiedene Browser (da meine
ich nicht den NC4), margin/padding und Grössenangaben müssen dauernd mehrfach
bestimmt werden mit CSS-weiche, aufgeblähter Code, Unklarheiten bzgl. IE5 usw.
usw., und die unstimmigen Beziehungen zum <body> als Elternelement.
Bei horizontalem Scrollbalken scheint es keinen Weg zu geben, ein div
mittels right:0px wirklich an den Rand zu kriegen, am Window ist Schluss,
aber vielleicht weiss ja doch jemand eine saubere Lösung?Grüsse
Cyx23