margin-top wird unterschiedlich interpretiert vom IE und FF

[Worrel]

<div id="Linie"></div>
<div id="Rubrik">Lernen Sie mich kennen!</div>
<div id="Linie2"></div>

Das würde ich so machen:

<hr class="linie">
<h1>Lernen Sie mich kennen!</h1>
<hr class="linie">

btw: ich find das "Lernen Sie mich kennen!" viel zu groß.

 

[Leertaste]

a) Was ist daran schlecht?
b) Wie soll man das mit <div>s und CSS hinkriegen?

Meine Links auch gelesen? Der 2. zeigt dir auch, wie man Layouts mit CSS macht.


@<hr>
Wenn es überhaupt eine inhaltliche Trennlinie sein muss, vielleicht hilft auch einfach ein "border".
HTML

<h2>Lernen Sie mich kennen!</h2>

CSS:

h2 {
padding: 2em 0;
border-top: 1px solid  #137b82;
border-bottom: 1px solid  #137b82;
}

@Rayne koch dir keine Div-Suppe: http://webstandard.kulando.de/post/2005/11/04/div_wahnsinn_div_suppe_oder_div_chaos_-_wie_kann_man_es_vermeiden

 

[skicu]

Zum anderen hätte ich da direkt eine Frage:
Ich habe eine andere Seite gemacht, auf der ich einen Rahmen um den Inhaltsblock in der Mitte gemacht habe.

Mit einer Tabelle; also:
Rahmenstück links oben; horizontaler Balken; Rahmenstück rechts oben;
vertikaler Balken; Menü; Inhalt; vertikaler Balken;
Rahmenstück links unten; horizontaler Balken; Rahmenstück rechts unten;

und bei verschieden breitem Browserfenster wird nun der Inhalt immer anders dageboten - immer auf die Breite des Browserfensters angepaßt.

a) Was ist daran schlecht?
b) Wie soll man das mit <div>s und CSS hinkriegen?

Meinst du sowas?
http://skicu.net/dev/webdesign/Worrel/

Sorry für die Qualität, eben in Eile hingeschmiert.

edit: ieks, ich hab das bottom absolut ausgerichtet.. das is natürlich schmarrn. aber sonst is das so die grundintention.

 

[Worrel]

Meinst du sowas?
http://skicu.net/dev/webdesign/Worrel/

Sorry für die Qualität, eben in Eile hingeschmiert.

Np

Generell ja, aber:
Der Rahmen besteht aus Bildern, nicht aus einer Linie.

Also oben, unten, rechts und links müssen noch Rahmenelement-Bilder an das <div> gepappt werden - das wäre dann des Pudels Kern.

edit: ieks, ich hab das bottom absolut ausgerichtet.. das is natürlich schmarrn. aber sonst is das so die grundintention.

Mit "relative" hängt das dann als nächster Absatz genauso breit unten drunter .. ?

PS: komisch, als ich das vor einiger Zeit ausprobiert hab, war der Hintergrund nie richtig gefüllt ...

 

[skicu]

Np

Generell ja, aber:
Der Rahmen besteht aus Bildern, nicht aus einer Linie.

Also oben, unten, rechts und links müssen noch Rahmenelement-Bilder an das <div> gepappt werden - das wäre dann des Pudels Kern.

Dann würde ich mit background-image arbeiten, sollte schon machbar sein.

edit: ieks, ich hab das bottom absolut ausgerichtet.. das is natürlich schmarrn. aber sonst is das so die grundintention.

Mit "relative" hängt das dann als nächster Absatz genauso breit unten drunter .. ?

PS: komisch, als ich das vor einiger Zeit ausprobiert hab, war der Hintergrund nie richtig gefüllt ...

Sollte man schon hinbekommen, ist mitunter etwas frickelig, aber mit ein wenig Ausprobieren schon machbar.
Mir fehlt da auch eindeutig die Übung, als dass ich das jetzt fehlerfrei in 2 Minuten hinbekäme.^^

 

[Leertaste]

Ich würde so ein Design mit "position:static" + "float" & "clear" erstellen. Da ist wesentlich widerstandsfähiger, wenn die Schrift vergrößert wird oder ähnliches.
Eine simple Version davon geht z.B. so: http://www.css4you.de/wslayout1/ex0010.html

 

[Worrel]

Generell ja, aber:
Der Rahmen besteht aus Bildern, nicht aus einer Linie.

Also oben, unten, rechts und links müssen noch Rahmenelement-Bilder an das <div> gepappt werden - das wäre dann des Pudels Kern.

Dann würde ich mit background-image arbeiten, sollte schon machbar sein.

Eben nicht - oder kann man 4 Hintergrundbilder für ein DIV definieren, die sich jeweils am rechten, oberen ,... Rand befinden und bei Größenänderung nicht verzerren?

Oh, und noch was: nach außen hin soll der HIntergrund durchsichtig werden, weil der Rand vom Design her "ausfranst" - in der Mitte soll eine einheitliche Hintergrundfarbe sein.

Viel Spaß beim Verwirklichen ohne Tabelle

 

[Leertaste]

Eben nicht - oder kann man 4 Hintergrundbilder für ein DIV definieren, die sich jeweils am rechten, oberen ,... Rand befinden und bei Größenänderung nicht verzerren?

Mehrere Hintergrundbilder pro Element geht erst ab CSS3.

Oh, und noch was: nach außen hin soll der HIntergrund durchsichtig werden, weil der Rand vom Design her "ausfranst" - in der Mitte soll eine einheitliche Hintergrundfarbe sein.

Viel Spaß beim Verwirklichen ohne Tabelle

Geht alles, sprengt nur hier den Rahmen.

Rayne zuckt das wohl ziemlich wenig.

 

[Worrel]

Oh, und noch was: nach außen hin soll der HIntergrund durchsichtig werden, weil der Rand vom Design her "ausfranst" - in der Mitte soll eine einheitliche Hintergrundfarbe sein.

Viel Spaß beim Verwirklichen ohne Tabelle

Anschauungsmaterial, damit ihr nicht meint, ich ziehe mir ständig neue Argumente an was-weiß-ich-was hervor :
http://mitglied.lycos.de/tonymnyphot/temp/t_080901.jpg

- geht so was auch ohne Tabelle, wenn sich die Größe nach dem Inhalt richten soll?

 

[skicu]

- geht so was auch ohne Tabelle, wenn sich die Größe nach dem Inhalt richten soll?

Definitiv, auch wenn es wohl ein wenig Aufwand verursachen würde.

 

[klausbyte]

Aber sowas von Problemlos!
die obere hälfte alles absolut positionieren, den Layer der den Inhalt hat, bekommt zum Abschluss noch die untere grafik.

Man muss nur noch etwas finden, dass sich der seitliche Rand wiederholen kann oder ihn Groß genug machen- aber das Problem haste ja bei Tabellen auch.

 

[Leertaste]

Wieso wollt ihr Dinge immer per "position:absolute" lösen?
Dabei verlieren die Elemente jeden Kontakt zu einander und können sich nicht mehr aufeinander einstellen. Was ist wenn ein oberes Element wächst und dann einfach unter das untere rutscht anstatt es nach unten zu drücken, um noch alles sehen zu können. :-o

 

[skicu]

Wieso wollt ihr Dinge immer per "position:absolute" lösen?

Weil das für unkomplizierte Sachen ungemein einfach ist. *g*

 

[klausbyte]

Wieso wollt ihr Dinge immer per "position:absolute" lösen?
Dabei verlieren die Elemente jeden Kontakt zu einander und können sich nicht mehr aufeinander einstellen. Was ist wenn ein oberes Element wächst und dann einfach unter das untere rutscht anstatt es nach unten zu drücken, um noch alles sehen zu können. :-o

Dann muss man es anders lösen. Bzw. mit nem Workaround. (ließt hier eigentlich jemand auch die Postings bevor er antwortet?)

 

[Worrel]

Man muss nur noch etwas finden, dass sich der seitliche Rand wiederholen kann oder ihn Groß genug machen- aber das Problem haste ja bei Tabellen auch.

... zum Beispiel ne Tabelle mit einem Hintergrundbild auf repeat-y

 

[klausbyte]

Man muss nur noch etwas finden, dass sich der seitliche Rand wiederholen kann oder ihn Groß genug machen- aber das Problem haste ja bei Tabellen auch.

... zum Beispiel ne Tabelle mit einem Hintergrundbild auf repeat-y

Ich meinte die Grafik an sich, nicht die Umsetzung mit repeat-y. Das kannste ja bei Divs genauso machen..

 

[Worrel]

Man muss nur noch etwas finden, dass sich der seitliche Rand wiederholen kann oder ihn Groß genug machen- aber das Problem haste ja bei Tabellen auch.

... zum Beispiel ne Tabelle mit einem Hintergrundbild auf repeat-y

Ich meinte die Grafik an sich, nicht die Umsetzung mit repeat-y. Das kannste ja bei Divs genauso machen..

Und wie krieg ich das DIV mit dem Bild genauso lang wie den variabel großen DIV Container?

Weil die CSS3 Multihintergründe für DIVs scheinen ja noch nicht zu funktionieren, außer in Nischen-Browsern: CSS3 Multihintergrundtest

 

[Leertaste]

Und wie krieg ich das DIV mit dem Bild genauso lang wie den variabel großen DIV Container?

Gar nicht. Du kannst keine Abhänhigkeit von zwei Elementen erzeugen, schließlich verwendest du keine Tabelle.

Du kannst nur den Effekt erzielen, dass man denkt, das beide "Div" gleich groß sind. Die Technik nennt man "Faux Columns"(Punkt 1)

 

[klausbyte]

Weil die CSS3 Multihintergründe für DIVs scheinen ja noch nicht zu funktionieren, außer in Nischen-Browsern: CSS3 Multihintergrundtest

Du machst den einen in den anderen rein. Achso - ich vergas. Du schachtelst divs ja nicht

 

[Rayne]

So, danke für eure Antworten, die Seite ist fertig und alle (mir aufgefallenen) Fehler beseitigt