Tabellenlayout mit CSS umsetzen.

[David_aus_Berlin]

Moin,

fast sechs Jahre ist es jetzt, glaub ich, her, dass ich das letzte mal hier im Forum was gepostet habe. Seit ein paar Tagen lese ich wieder mit und der eine oder andere Name kommt mir tatsächlich noch bekannt vor. ;-)

Ein Thema, das hier ja inzwischen heiß diskutiert wird, scheint ja das der strikten Aufgabenteilung zwischen HTML und CSS zu sein. Ich empfinde die vorherrschende Meinung (HTML ist lediglich für die Struktur zuständig, CSS für die Darstellung und Tabellen nur für entsprechende Daten) als einleuchtend. Und ich versuche, mich bei meinem aktuellen Projekt (dem ersten seit 2000 ;-)) daran zu halten.

Aber ich bekomme, verdammt nochmal, diesen Hintergrund (die Tapete und die Schlagschatten) nicht ohne Tabellen gelöst: http://www.heldografie.de

Oder?

Schöne Grüße,
David

[Ulrich]

Hallo,

Aber ich bekomme, verdammt nochmal, diesen Hintergrund (die Tapete und die Schlagschatten) nicht ohne Tabellen gelöst: http://www.heldografie.de

Oder?

Aber mit Sicherheit, sofern Du ja eh eine feste Breite für den Inhalt vorgibst noch einfacher als bei flexibler Breite des Inhalts. Was wäre also einfacher, als ein entsprechend breites div mit dem entsprechend breitem Hintergrundbild inclusive Schlagschatten vertical wiederholt (background:url(xxx.gif) repeat-y;) zu versehen und selbiges horizontal im Fenster zu zentrieren (Für $browser != IE {margin:o auto;})?
Da hinein die Inhalte und fertig wär's auch ohne Tabelle/n, welche - wie oft bemerkt - tabellarischen Daten vorbehalten werden soll/en.

Versuch es einfach, das ist nicht so schwer. Bei Schwierigkeiten wird Dir sicher gerne weitergeholfen.

Viel Erfolg
Ulrich

[David_aus_Berlin]

Hallo Ulrich,

Aber mit Sicherheit, sofern Du ja eh eine feste Breite für den Inhalt vorgibst noch einfacher als bei flexibler Breite des Inhalts. Was wäre also einfacher, als ein entsprechend breites div mit dem entsprechend breitem Hintergrundbild inclusive Schlagschatten vertical wiederholt (background:url(xxx.gif) repeat-y;) zu versehen und selbiges horizontal im Fenster zu zentrieren (Für $browser != IE {margin:o auto;})?

Ok. Stimmt, scheint zu funktionieren... hab wahrscheinlich den Wald mal wieder vor lauter Bäumen nicht gesehn... ;-) Aber jetzt hab ich das nächste Problem:

Das hier ist der neue Hintergrund (als DIV, nicht mehr als Tabelle):

#test {
margin-left:auto;
margin-right:auto;
top:0px;
width:590px;
background-color:#eeeeee;
background-image:url(../bilder/site/bg_wallpaper.jpg);
background-repeat:repeat;
padding:155px 75px 75px 75px;
}

Das hier ist die Tabelle, die Inhalt darstellt (wie gehabt).

#content {
width:590px;
border-collapse:separate;
border-spacing:2px;
}

Vorher, als ich den Hintergrund noch mit einer Tabelle dargestellt habe, hat er sich automatisch der in der Breite der Content-Tabelle angepasst. Jetzt muss ich die width-Angabe mit angeben, da sich sonst (seltsamerweise) der div über die gesamte Fensterbreite zieht.

Da ich auch padding-Angaben in der #test-Definition stehen habe, benötige ich wohl eine zweite Definition für den IE, oder? (->Box-Modell). Und das finde ich persönlich noch uneleganter als eine Table-Lösung für den Hintergrund.

Oder habe ich #test irgendwie falsch definiert?

Schöne Grüße,
David

[Ulrich]

Hallo,

Meine Idee war noch etwas anders. Gehe mal von einem Inhaltsbereich von  600px aus. Der bekommt eine background Grafik ungefähr so:

dlXXXXXXXXXXXXXXXXXXXdr
dlXXXXXXXXXXXXXXXXXXXdr
dlXXXXXXXXXXXXXXXXXXXdr

dl=dropshodow links
XXX...=normaler Hintergrund
dr=dropshadow rechts
das ganze eben auch 600px breit, vertikal gekachelt.

dl und dr nehme ich mal 20px breit an. Verbleiben also 600-2*20=560px eigentlicher Hintergrund. Den weiteren Inhalt müßtest Du dann über margin:0 20px+gewünschter"padding";
plazieren.
Wenn Du die enthaltenen Elemente selbst über margin plazierst, benötigst Du kein padding im Inhaltscontainer und mußt Dich also auch nicht mit boxmodel IE vs FF,Opera&Co. herumschlagen.
Der Rest dann wie gehabt.

Viel Erfolg
Ulrich

[david_aus_Berlin]

Moin,

Wenn Du die enthaltenen Elemente selbst über margin plazierst, benötigst Du kein padding im Inhaltscontainer

Stimmt, so müsste es funktionieren!
Vielen Dank!

David

[Patrick Andrieu]

Hallo David!

Ein Thema, das hier ja inzwischen heiß diskutiert wird, scheint ja das der strikten Aufgabenteilung zwischen HTML und CSS zu sein. Ich empfinde die vorherrschende Meinung (HTML ist lediglich für die Struktur zuständig, CSS für die Darstellung und Tabellen nur für entsprechende Daten) als einleuchtend. Und ich versuche, mich bei meinem aktuellen Projekt (dem ersten seit 2000 ;-)) daran zu halten.

Guter Vorsatz. Weiter unten wurde schon mal darüber diskutiert.

Zentriertes Layout ist auch ohne Tabelle möglich, ich sehe bei Deinen Seiten kein Problem.

Viele Grüße aus Frankfurt/Main,
Patrick