✔ Umstellung von TABLE-Design auf CSS-Design - Einige Denkfehler?

[josDesign]

Template ist fertiggstellt. Aber es gibt Probleme mit dem Einbinden in Typo3
Hallo liebe Community!

Ich habe für einem Verein bei dem ich dabei bin foglende Seite erstellt:

Volleylions Krumbach (Seite noch im Aufbau / Typo3 Anfänger)

Und nun bin ich dran und drauf diese Seite mittels DIVs zu designen.

Mein Ansatz sieht so aus:

Und mein Ansatz-Code:

HTML

<!--  Gesamter Inhalt  -->
<div id="geruest">
<div id="geruest1">
<!-- Obere Header Grafik -->
<div id="geruestObereHeader1"><img src="fileadmin/img/vbv_header1.gif" alt="Volleylions.at - Zurück zur Startseite" width="750" height="66" /></div>
<div id="geruestStyled">
<div id="geruestStyled1">geruestStyled1</div>
<div id="geruestStyled2">geruestStyled2</div>
<div id="geruestStyled3">geruestStyled3</div>
</div>
<div id="geruestFooter">FOOTER</div>
</div>
</div>

CSS

/* CSS Document */
/* Marginwerte: oben, rechts, unten, links ;-) */

/* Fangen wir mal an: Standardelemente */

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333;
	background-color:#FFF;
	margin: 0px 0px;
	text-align: center;
	background-image: url(img/linksrechts.gif);
	background-repeat:repeat;

	
}


/* Gerüst der Seite */

#geruest {
	width: 850px;
	margin: 0px auto;
	text-align: center;
	background-image:url(img/shadowLiRe.gif);
	background-repeat:repeat-y;


}


#geruest1 {
	width:750px;
	margin:0px auto;
	text-align:center;
	padding:5px 5px 0px 5px;
	background-color: white;

}

#geruestObereHeader1 {
	height: 66px;
	width: 750px;
	margin: 0px 0px 5px 0px;

}

#geruestFooter {
	height: 18px;
	width: 750px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	vertical-align:middle;

}

#geruestStyled {
	width: 750px;
	margin: 0px 0px 0px 0px;
	text-align: center;

}

#geruestStyled1{
	float: left;
	position:relative;

}
#geruestStyled2{
	float: left;

}
#geruestStyled3{
	float: left;
	width: 571px;

}

 

[Maik]

Und was erhoffst du dir nun von uns

 

[josDesign]

Sorry! Ich hab nicht dazugeschrieben das ich das ganze noch mache!

ich möchte jetzt natürlich keinen fertigen Code Ich werde in kürze nochmal meinen Code updaten...

Wie gesagt, ich möchte nicht das jetzt irgendeiner auf die Idee kommt das für mich zu machen. Ich bin auch schon ein Stück weiter und würde bloß gern wissen ob das korrekt ist was ich gerade "produziere"....


//edit

SOO! Hier die aktuelle Version. Anscheinend vertragt der IE das nicht, denn der zeigt mir eine ungestylte Seite

http://www.josdesign.at/kunden/vbvk/
(Der Ordner "kunden" stellt lediglich eine Firma da, die ich vielleicht irgendwann mal aufmache ) Also es handelt sich um eine rein private Aufgabe.

 

[Maik]

Es liegt hieran, daß der IE das CSS nicht in das Dokument lädt:

<style type="text/css">
	@import url(fileadmin/volleylions.css) screen;
</style>

So funktioniert es auch im IE:

<link rel="stylesheet" type="text/css" href="fileadmin/volleylions.css" media="screen">

 

[josDesign]

Ah, OK! Ähmm das war schon mal der Fehler.

Aber jetzt habe ich das Problem das ganze mit dem zweiten Thread in Zusammenhang zu bringen mit dem 100% Höhe wenn weniger Inhalt.

So sieht sie momentan aus: http://www.josdesign.at/kunden/vbvk/

Ich weis nämlich nicht, wie sich die "3-Spaltigen" Divs in der Höhe ausrichten. Könnte ich die einfach auf 100% geben? Oder sind Höhenangaben in Prozent sowieso nicht so das wahre für das Layouten?

 

[Maik]

Den Code für das Grundkonzept habe ich dir ja schon vorhin in deinem Thread Automatisch 100% Höhe bei DIVs? gepostet.

Wenn die drei Spalten, unabhängig von ihrem Inhalt, immer die gleiche Höhe besitzen sollen, empfehle ich dir die "Faux-Columns-Technik".

Ein Lösungsbeispiel von mir kannst du in dem Thread div height=100% nur im IE? herunterladen -> http://www.tutorials.de/forum/css/203021-div-height-100-nur-im-ie.html#post1274347.

 

[josDesign]

OK, ich werde mir das jetzt zu Gemüte führen!

Das heißt also ich schau nun mal das ich die eigentlich jetzt 5 "Spalten" auf gleiche Höhe bringen muss. (2 neue die mir vertikale Linien zeigen, von oben bis unten wie auf der Homepage)

und dann soll das ganze auch noch auf 100% Höhe gestellt sein alles...

Gut, Michael ich bedanke mich bereits jetzt schon mal für deine umfangreiche Hilfe!

Ohne dieses Forum wäre ich aufgschmissn....

LieGrü
Jos

 

[josDesign]

In den Einstellungen hast du alle DIVs mit Klassen belegt, kann ich das theoritsch auch mit IDs machen? Damit ich Klassen extra anwenden kann?

 

[Maik]

Wenn die DIVs in dem Dokument jeweils nur einmal vorkommen, dann kannst du selbstverständlich eine ID verwenden

 

[josDesign]

aha, ok Danke!

Ich war jetzt in der Sauna und mach gleich damit wieder weiter. Ich hoffe ich bekomme das hin.. weil ich hab ein Problem mit:

Den seitlichen Grafiken. Kann ich dem div .wrapper dann später noch links und rechts eine backgroundgrafik einrichten so wie in der Datei im ersten Post?