nicht angemeldet
Wie erstelle ich so ein Layout mit CSS
Wie erstelle ich so ein Layout mit CSS:
+----------------------------+
| |
| |
+-------------------+--------+
| | |
| | |
| | |
+-------------------+--------+
Das Problem sind irgendwie die zwei Spalten, wie bekomme ich die nebeneinander?
Das soll auch noch mit Netscape 4.x funktionieren, oder ist es dann besser wieder auf Tabellen zurückzugreigen.
Mozz
-
hi
+----------------------------+
| |
| |
+-------------------+--------+
| | |
| | |
| | |
+-------------------+--------+Das Problem sind irgendwie die zwei Spalten, wie bekomme ich die nebeneinander?
<div id="one">.....</div>
<div id="two">...</div>
<div id="three">...</div>#one{position:absolute;height:200px;width:100%;top:0;left:0;}
#two{position:absolute;width:60%;top:200px;left:0;}
#two{position:absolute;width:40%;top:200px;left:60%;}(Feintuning an den Zahlen kann nicht schaden ;)
Grüße aus Bleckede
Kai
-
Hallo!
Auch ein Danke an Dich für Dein code-Beispiel! Andere Frage: Kann das sein, daß ich größere Probleme hab, auf Deine Seite zu kommen? Ich mein, ich hab die probs, ja, aber liegt das wirklich an mir??
Grüße,
Andreas-
hi
Auch ein Danke an Dich für Dein code-Beispiel! Andere Frage: Kann das sein, daß ich größere Probleme hab, auf Deine Seite zu kommen? Ich mein, ich hab die probs, ja, aber liegt das wirklich an mir??
Der Server ist schon seit einigen Wochen off und wird hoffentlich bald wieder auftauchen...
Grüße aus Bleckede
kai
-
-
Hallo!
Danke für den Code! Ich habe nun folgendes Problem, der Code wird von einem CMS weiterverarbeitet, der das restliche Layout aus Tabellen zusammenbastelt.
Von Vorteil ist schon mal, dass das CMS mit absoluten Angaben arbeitet, d.h. ich kann die relativen Angaben durch absolute ersetzen, da das Mischen Netscape 4 ja auch Probleme macht. Allerdings wird der footer des CMS nun unmittelbar nach dem header angeschlossen, und über dem footer wird dann meine #one gelegt :( was kann ich da machen? Mir fällt nur ein nach den <div>s irgendwelche Leerzeilen einzufügen aber das kann es ja auch nicht sein, da sich das mit jeder Textänderung ja ebenfalls ändern würde.
Mozz
-
Hi,
Von Vorteil ist schon mal, dass das CMS mit absoluten Angaben arbeitet, d.h. ich kann die relativen Angaben durch absolute ersetzen, da das Mischen Netscape 4 ja auch Probleme macht. Allerdings wird der footer des CMS nun unmittelbar nach dem header angeschlossen, und über dem footer wird dann meine #one gelegt :( was kann ich da machen?
verwende keine absolute Positionierung.
Mir fällt nur ein nach den <div>s irgendwelche Leerzeilen einzufügen aber das kann es ja auch nicht sein, da sich das mit jeder Textänderung ja ebenfalls ändern würde.
Korrekt. Besser, du setzt hier nur auf width: in Kombination mit float/clear. Wenn du ein Beispiel nennst, wie die Seite aussehen soll, kann man mehr dazu sagen.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi,
Von Vorteil ist schon mal, dass das CMS mit absoluten Angaben arbeitet, d.h. ich kann die relativen Angaben durch absolute ersetzen, da das Mischen Netscape 4 ja auch Probleme macht. Allerdings wird der footer des CMS nun unmittelbar nach dem header angeschlossen, und über dem footer wird dann meine #one gelegt :( was kann ich da machen?
verwende keine absolute Positionierung.
Mmmmmmhhh, schaut schon viel besser aus mit position:relative; sogar die relativen Angaben gehen jetzt halbwegs mit Netscape 4 :) nur die zwei Spalten unten sind nun nicht nebeneinander?!
#links {
position:relative;
width:60%;
top:0px;
left:0px;
}#rechts {
position:relative;
width:40%;
top:0px;
left:60%;
}ausschauen tut es so
+------+
| |
| |
+------+
+------+
| |
| |
+------+Mir fällt nur ein nach den <div>s irgendwelche Leerzeilen einzufügen aber das kann es ja auch nicht sein, da sich das mit jeder Textänderung ja ebenfalls ändern würde.
Korrekt. Besser, du setzt hier nur auf width: in Kombination mit float/clear. Wenn du ein Beispiel nennst, wie die Seite aussehen soll, kann man mehr dazu sagen.
Habe mir gerade den entsprechenden Abschnitt in SelfHTML angesehen. Mit position:relative; brauche ich das aber anscheinend nicht mehr oder ist das auch die Lösung für meine zwei divs, die jetzt schräg untereinander an Stelle von nebeneinander sind?
Die Beispiele im anderne Posting sind übrigens ganz prima, nur zeigt Netscape 4.7 gar nichts an, weiß aber nicht ob da eine Browserabfrage drinnen ist - da kommt nämlich ein Hinweis - oder ob der Code einfach nicht mit Netscape 4.x geht.
Mozz
-
Hi,
Mmmmmmhhh, schaut schon viel besser aus mit position:relative; sogar die relativen Angaben gehen jetzt halbwegs mit Netscape 4 :) nur die zwei Spalten unten sind nun nicht nebeneinander?!
warum in die ferne Schweifen? -> http://thenoodleincident.com/tutorials/box_lesson/basic2_fluid.html ;)
Habe mir gerade den entsprechenden Abschnitt in SelfHTML angesehen. Mit position:relative; brauche ich das aber anscheinend nicht mehr oder ist das auch die Lösung für meine zwei divs, die jetzt schräg untereinander an Stelle von nebeneinander sind?
Nein, das macht hier Probleme, weil du ja nicht weißt, wie hoch ein DIV wird, beispielsweise bei Veränderungen der Schriftgröße. Relative Positionierung verschiebt Bereiche um den angegebenen Wert.
Die Beispiele im anderne Posting sind übrigens ganz prima, nur zeigt Netscape 4.7 gar nichts an, weiß aber nicht ob da eine Browserabfrage drinnen ist - da kommt nämlich ein Hinweis - oder ob der Code einfach nicht mit Netscape 4.x geht.
Es ist eine CSS-Weiche, N4 hat man mit @import bzw. media-Angabe ausgeschlossen - eine konsequente Möglichkeit, Probleme zu vermeiden ;)
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hallo!
warum in die ferne Schweifen? -> http://thenoodleincident.com/tutorials/box_lesson/basic2_fluid.html ;)
Irgendwie kenne ich mich gerade nicht mehr aus :(
Muss ich bei float position:relative; angeben?
Muss ich bei float top/left angeben?Mit float:left; _und_ float:right; - wie im Beispiel auf thenoodleincident.com geht es im Mozilla, Netscape macht aber einen dicken Abstand zwischen die beiden Spalten. Mit nur einem float geht es mit Netscape, Mozilla legt die Dinger dann aber übereinander. Ist das normal oder habe ich noch einen Fehler?
Brauch' ich da jetzt die @import?
Phuu, gar nicht einfach die CSS-Geschichte.
Mozz
Es ist eine CSS-Weiche, N4 hat man mit @import bzw. media-Angabe ausgeschlossen - eine konsequente Möglichkeit, Probleme zu vermeiden ;)
-
Hi,
Muss ich bei float position:relative; angeben?
Muss ich bei float top/left angeben?2 x nein: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
Mit float:left; _und_ float:right; - wie im Beispiel auf thenoodleincident.com geht es im Mozilla, Netscape macht aber einen dicken Abstand zwischen die beiden Spalten.
Meinst du jetzt Netscape 4.x? Dem ist das garantiert zu viel. Deshalb wurde er ja auch vom Sylesheet ausgeschlossen.
Mit nur einem float geht es mit Netscape, Mozilla legt die Dinger dann aber übereinander. Ist das normal oder habe ich noch einen Fehler?
Das kommt auf die Kombination an, so generell kann man das nicht behaupten.
Brauch' ich da jetzt die @import?
Eigentlich ja. Bei anspruchsvollem CSS-Layout ist es in irgendeinem Bereich immer nötig, da kommt das Urgestein einfach nicht mehr mit.
Phuu, gar nicht einfach die CSS-Geschichte.
Aber sehr interessant ;)
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hallo!
Muss ich bei float position:relative; angeben?
Muss ich bei float top/left angeben?2 x nein: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
Prima, schon mal ein Problem weniger, ich habe übrigens jetzt bei allen divs position entfernt.
Mit float:left; _und_ float:right; - wie im Beispiel auf thenoodleincident.com geht es im Mozilla, Netscape macht aber einen dicken Abstand zwischen die beiden Spalten.
Meinst du jetzt Netscape 4.x? Dem ist das garantiert zu viel. Deshalb wurde er ja auch vom Sylesheet ausgeschlossen.
Ja N4, aber das Problem war ein anderes, ich dachte, wenn ich das eine rechts und das andere links (direkt daneben) haben will muss ich right und left schreiben, das ist aber nicht so - ich will es ja direkt nebeneinander haben - und nun geht es wenn ich beide divs mit float:left; versehe!
Nun habe ich aber wieder ein Problem (oh Mann, das hört nicht auf *heul*):
Ich habe in die divs eine überschrift h1 und einen Absatz p gepackt, jetzt schaut die Seite im IE 5 und N4 recht ordentlich aus, aber im Mozilla sind über und unter den divs viel höhere Abstände. Zwischen der linken und rechten Spalte ist in allen drei Browsern komischerweise der Abstand aber gleich. Nur oben bzw. unten gibt es unterschiedliche Darstellungen. Ich habe es schon mit
div {
margin:0px;
padding:0px;
}versucht, aber das hilft nicht, noch eine Idee (Danke übrigens für die vielen anderen!)? Ich weiß wirklich nicht mehr woran es liegen kann.
Phuu, gar nicht einfach die CSS-Geschichte.
Aber sehr interessant ;)
... und zeitaufwendig, wenn man für eine popelige Seite eine halbe Nacht brauch, die nächste geht aber schneller dank euch ;)
-
Hallo!
Nun habe ich aber wieder ein Problem (oh Mann, das hört nicht auf *heul*):
Ich habe in die divs eine überschrift h1 und einen Absatz p gepackt, jetzt schaut die Seite im IE 5 und N4 recht ordentlich aus, aber im Mozilla sind über und unter den divs viel höhere Abstände. Zwischen der linken und rechten Spalte ist in allen drei Browsern komischerweise der Abstand aber gleich. Nur oben bzw. unten gibt es unterschiedliche Darstellungen. Ich habe es schon mit
div {
margin:0px;
padding:0px;
}versucht, aber das hilft nicht, noch eine Idee (Danke übrigens für die vielen anderen!)? Ich weiß wirklich nicht mehr woran es liegen kann.
Ach je, war wieder mal das alte Oben-Abstand/Unten-Abstand-Problem, hätte ich auch früher drauf kommen könne, dachte einfach nicht, dass die bei einem CMS für 'ne ganze Uni solche Mist-CSS-Vorlagen verwenden...
Danke nochmal und 'ne gute Nacht!
Mozz
-
-
-
-
-
-
-
-
-
Gruß!
Wie erstelle ich so ein Layout mit CSS:
+----------------------------+
| |
| |
+-------------------+--------+
| | |
| | |
| | |
+-------------------+--------+indem du drei DIVs entsprechend formatierst.
Das Problem sind irgendwie die zwei Spalten, wie bekomme ich die nebeneinander?
float: wäre eine Möglichkeit, oder links width:80%, rechts left:80%, oder oder oder. Es gibt mit CSS viele Möglichkeiten. Vielleicht siehst du dir mal http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html an, um dich inspirieren zu lassen.
Das soll auch noch mit Netscape 4.x funktionieren, oder ist es dann besser wieder auf Tabellen zurückzugreigen.
Mit absoluter Positionierung hat N4 kein Problem.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi!
Danke für den tollen Tip!
Gruß,
Andreas
-