Tabellen mit CSS

[Tankred]

Hallo zusammen,

momentan murkse ich unheimlich mit CSS-Tabellen rum und bräuchte mal euren Rat:

Ich möchte erstmal eine Kopfzeile erstellen, die aus zwei Ebenen besteht. Die erste Ebene soll 100x100 Pixel breit bzw. hoch sein, ein Bild beherbergen und in der linken oberen Ecke sein. Direkt daneben soll eine weitere Ebene nahtlos anschließen, die je nach Größe des Browserfensters so eine width haben soll, dass die Breite ausgefüllt wird. Die Höhe soll mit 100px an die der ersten Ebene angepasst werden.

Geht das überhaupt? Ich meine, da mische ich px und %, was bei mir immer dazu führt, dass entweder die width nicht vollständig ausgefüllt wird oder die zweite Box "gebreakt" wird (also unter die erste Ebene gesetzt wird).

Und wenn ich schon mal dabei bin:

Wie füge ich am besten Bilder in eine Ebene ein bzw. positioniere diese und lasse Text drumherum fließen?

Vielen Dank,

Tankred

 

[Keita]

Kaskadiere die beiden Ebenen der Kopfzeile:

<div id='header'>
<img id='headerLogo' ... />
</div>

Das erspart die zweierlei Ärger: #header hat per Default eine Breite von 100%, d.h. du mußt dich nicht um eine explizite Angabe der Breite kümmern, und du hast keinen Ärger mit floated elements.

#headerLogo wird innerhalb von #header absolut positioniert, der Inhalt von #header wird mit padding-left: 100px rechts vom Bild ausgerichtet.

Absolut positionierte Elemente lassen sich nicht ohne weiteres umfließen, du müßtest Platzhalter an den Stellen platzieren, wo das absolut positionierte Element stehen würde und diesen umfließen.

greetings, Keita

 

[Tankred]

Vielen Dank für die Hilfe!

Kaskadiere die beiden Ebenen der Kopfzeile:

...

#headerLogo wird innerhalb von #header absolut positioniert,

Das hat prima geklappt! Nun sind meine floats darunter auch endlich wieder "stabil".

Absolut positionierte Elemente lassen sich nicht ohne weiteres umfließen, du müßtest Platzhalter an den Stellen platzieren, wo das absolut positionierte Element stehen würde und diesen umfließen.

"Platzhalter" sagt mir jetzt nichts, könntest Du mir das erklären?

Um mein Ziel besser zu verdeutlichen, habe ich eine Beispielseite in Word erstellt, wie der Inhalt auf der Webseite aussehen soll:



Wie mache ich sowas mit CSS?

Vielen Dank,

Tankred

 

[Keita]

In deinem Fall müssen die Bilder innerhalb des Fließtextes platziert und mittels float "positioniert" werden, damit z.B. das erste Bild von einer Zeile umflossen wird, reicht es aus das Bild hinter das erste Zeichen zu platzieren, was kein whitespace im Sinne von HTML ist. Damit das ganze aber auch semantisch einen Sinn ergibt (kein Wort enthält mittendrin ein Bild...) sollte das Bild zumindest hinter einem Wort stehen, wenn der erste Satz nicht allzu lang ist, kann man das Bild natürlich auch hinter diesen einbinden.

Die beiden anderen Bilder müssen in etwa so in den Fließtext eingebunden werden, daß deren gerenderte Positionen etwa dem entspricht, was du gerne hättest, hier hilft nur ein bißchen zu experimentieren.


Die Geschichte mit Platzhaltern macht in diesem Fall natürlich keinen Sinn, da sie genau so wenig wie die Bilder selbst frei platziert und dennoch umflossen werden können.

Sinnvoll ist der Ansatz bspw. bei einem zweispaltigen (Zeitungs-)layout, bei dem ein Bild mittig "über" den zwei Spalten platziert werden soll, dabei soll das Bild von der rechten Spalte linksseitig und die linke Spalte rechtsseitig umflossen werden. Dazu nimmt man einen "unsichtbaren" Platzhalter (z.B. ein DIV-Element mit entsprechenden Maßen) und läßt diesen von den Texten umfließen und platziert genau über die beiden Platzhalter das Bild, auf diese Weise entsteht der Eindruck das Bild würde von den beiden Spalten umflossen werden.

greetings, Keita

 

[Tankred]

Vielen Dank, aber ich habe es jetzt so gelöst:

<img src="images/1.gif" alt="bildmitlogo" width="224" height="224" style="float:left; margin: 0px 10px 10px 0px;" />
Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id
<img src="images/bildmitlogo.jpg" style="float:right; margin: 10px 0px 10px 10px;" alt="bildmitlogo" />
&quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot; Raum f&uuml;r den Inhalt von id &quot;inhalt&quot;

Das funktioniert wunderbar. Die Bilder erscheinen dann an der Position, in der ich sie eingefügt habe. Die Schrift wabert einfach drum herum.

Ist das okay so?

 

[Keita]

Wenn man sich den Blindtext länger anschaut, wird man ja ramdösig... Ansonsten spricht natürlich nichts dagegen.

greetings, Keita

 

[Tankred]

Hehe, das ist der Dreamweaver-Blindtext für neue Ebenen.

Vielen Dank für Deine Hilfe!

Code und CSS habe ich auch validieren lassen, das W3C ist auch einverstanden.

 

[Tankred]

Ein Problem bekomme ich leider noch nicht in den Griff und zwar "margin-top" im Internet Explorer:

Ich habe einen Body mit margin="0". Darin befindet sich der oben besprochene Header und darunter der Content-Bereich. Dieser soll per margin-top="13px" den selbigen Abstand von dem darüber liegenden header haben. Im Firefox sieht das auch exakt so aus, im Internet Explorer wird diese Angabe aber komplett ignoriert und der Content-Bereich "klebt" quasi direkt am Header.

Hat jemand einen Plan, woran das liegen könnte?

Das ist Body:

body {
	margin: 0px;
	background-image: url(../images/bild.jpg);
	background-repeat: no-repeat;
	background-color: #E8F5FD;
	font-family: Arial, Helvetica, sans-serif;
}

das der Header:

#header {
	border-bottom:solid 1px #000000;
}

und das ist der Content-Bereich:

#inhalt {
	padding: 0px 0px 0px 0px;
	margin-left:155px;
	margin-top:13px;
	width: 80%;
}