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:

[IMG]#[/IMG]

Und mein Ansatz-Code:

HTML

HTML-Code:

<!--  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

HTML-Code:

/* 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;

}

Und was erhoffst du dir nun von uns

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.

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

Code :

1 2 3

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

So funktioniert es auch im IE:

Code :

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

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?

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/20...ml#post1274347.

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

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

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

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?

Um die Frage eindeutig beantworten zu können, müsste ich erstmal sehen, wie du das empfohlene Beispiel für deine Zwecke verwendest und ggfs. "umgeschrieben" hast. Denn in meinem Beispiel besitzt das Wrapper-DIV ja schon eine Hintergrundgrafik.

OK, ich poste es ungefähr in 20 Minuten..

Irgendwie will das nicht! Die Wrapper-DIV macht die Seite auf 100%.

Aber die 3 Spalten dehnen sich nicht mit aus. Und ich benötige das aber, da ja in den ersten beiden Spalten 2 senkrechte Linien bis zum Footer immer gehn sollen.

http://www.josdesign.at/kunden/vbvk/

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Volleylions.at CSS-Design</title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-image:url(fileadmin/img/linksrechts.gif);
}

div.wrapper {
width: 750px;
min-height: 100%;
margin: 0 auto;
border-left: 0px solid #000;
border-right: 0px solid #000;
background-color:#FFFFFF;
padding:5px 5px 0px 5px;
}

* html div.wrapper { /* Für IE */
height: 100%;
}

div.header {
width: 750px;
height: 66px;
background: white;
margin: 0px 0px 5px 0px;
}

div.leftCol {
width: 25px;
float: left;
padding: 0px 2px 0px 0px;
background-color:white;
background-image:url(fileadmin/img/verticallinedown.gif);
background-position:right;
background-repeat:repeat-y;
}

div.rightCol {
width: 571px;
float: right;
padding: 0;
background-color:white;
}

div.centerCol {
margin: 0px 571px 0px 21px;
padding: 0;
background-image:url(fileadmin/img/verticallinedown.gif);
background-position:right;
background-repeat:repeat-y;
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 1;
line-height: 0;
font-size: 0;

}

div.footer {
width: 750px;
margin: -26px auto 0 auto;
padding: 0;
height: 24px;
background: #fff;
background-image:url(fileadmin/img/bottomline.gif);
background-position:top;
background-repeat:no-repeat;
text-align:center;
color:#666666;
}

-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="header">
          <img src="fileadmin/img/vbv_header1.gif" alt="Volleylions.at" width="750" height="66" />	     </div>
     <div class="leftCol">
          leftCol
     </div>
     <div class="rightCol">
          rightCol
     </div>
     <div class="centerCol">
          centerCol
     </div>
     <div class="clear">&nbsp;</div>
</div>
<div class="footer">USC Raiffeisen Krumbach Sektion Volleyball | Tel. +43 (0)664/380 292 0 | e-mail: volleylions@gmx.at | by josDesign.at</div>

</body>
</html>

Der Trick liegt darin, daß die drei Spalten durch eine Hintergrundgrafik "generiert" werden, die im Wrapper-DIV senkrecht wiederholt wird.

Schau dir einfach nochmal das empfohlene Beispiel und die dazugehörige Grafik (3cols.png) an

OK, das ist dann aber nicht das was ich brauchen kann.
Ich habe nämlich versch. "hintergründe"
gibt es eine Möglichkeit diese trotzdem auszuweiten?

2 Beispiele: (laufenden NON-CSS Version)
http://www.josdesign.at/kunden/vbvk/58.0.html
http://www.josdesign.at/kunden/vbvk/56.0.html

Dabei tauscht mir eine Extension von Typo3 automatisch den Bereich rechts unten.

Das heißt ich würde im neuem DIV.rightCol weiteres Divs haben. (rightCol1, rightCol2) Im rightCol2 würde ich dann je nach Seitentyp einen anders aussehenden Container platzieren.

Hmmmmm...

EDIT: Gut, ich könnte es als Kompromiss mit blauen Hintergrund machen. Denn dann ist halt bei Inhalten die mit ganzer Breite als keinen Blauen Rahmen haben links zum Schluss nachher immer blau...