djingeringe
New member
Hallo,
auch ich möchte zukünftig Tabellenlose Seiten erstellen können. Hierzu gibt es ja die tollen Stylesheets von denen alle ganz begeistert sprechen. Toll, dachte ich und hab im Netz nach Infos zum Thema gesucht. Man wird ja relativ schnell fündig, ja geradezu bombadiert wird man in Google(Begriff: CSS = 79.900.000 Treffer) von diversen Seiten, die einem alles verraten, nur schnallen es die allerwenigsten. Leider bin ich auch einer derjenigen, die es nicht so ganz kapieren, besser gesagt wie man ein Seitenlayout anhand von Containern positioniert.
Ich habe dafür ein fiktives Projekt erstellt und mein Glück versucht. Erst habe ich in der externen CSS-Datei die ganzen Container erstellt. Schön, echt schön. Alle Container haben sich untereinander positioniert. Also habe ich es mit "FLOAT" versucht und irgendwie habe ich es einigermaßen hinbekommen. Zwar nicht so wie es eigentlich aussehen soll, aber ich war schon weiter.
Das alles sieht im maximierten Browserfenster wie schon erwähnt einigermaßen so aus, wie es aussehen soll. Ein paar Kleinigkeiten wie der Abstand zum vorherigen Container (soll eigentlich kein Abstand dazwischen sein) bekomme ich bestimmt noch hin. Leider habe ich es nicht hinbekommen und was noch viel schlimmer ist, dass sich bei ändern der Größe des Browserfensters alles in sich zusammenfällt und sich verschiebt. Das liegt wohl an dem "FLOAT". Aber ohne das "FLOAT" sind ja die einzelnen Container untereinander gestapelt.
Hmmmm...
da ich selber nicht mehr weiter komme, hoffe ich ihr könnt mir weiterhelfen, damit endlich mal Das sog. Aha-Erlebnis eintritt. Wichtig, dabei, dass das Layout nicht mit absoluten sondern relativen Positionsangaben funktioniert.
Wäre natürlich auch super wenn mir jemand erklären könnte, warum es so wie ich es gemacht habe nicht funktionieren kann. Aber dann bitte nicht so wie es auf den Seiten im Netz erklärt wird, also so, damit es jeder verstehen kann.
Ich habe die Navigation in 3 Teile geteilt. Kann man das auch irgendwie hinbekommen ohne sie teieln zu müssen?
Und bitte keine Links zu: www.selfhtml.net www.css4you.de u.s.w. Das sind bestimmt ganz tolle Seiten, nur ich verstehe dort fast nur Bahnhof.
Im Anhang ein Bild vom Layout, also wie es aussehen soll und die HTML und CSS-Datei.
Trotzdem füge ich nochmal die Quelltexte ein:
Danke
auch ich möchte zukünftig Tabellenlose Seiten erstellen können. Hierzu gibt es ja die tollen Stylesheets von denen alle ganz begeistert sprechen. Toll, dachte ich und hab im Netz nach Infos zum Thema gesucht. Man wird ja relativ schnell fündig, ja geradezu bombadiert wird man in Google(Begriff: CSS = 79.900.000 Treffer) von diversen Seiten, die einem alles verraten, nur schnallen es die allerwenigsten. Leider bin ich auch einer derjenigen, die es nicht so ganz kapieren, besser gesagt wie man ein Seitenlayout anhand von Containern positioniert.
Ich habe dafür ein fiktives Projekt erstellt und mein Glück versucht. Erst habe ich in der externen CSS-Datei die ganzen Container erstellt. Schön, echt schön. Alle Container haben sich untereinander positioniert. Also habe ich es mit "FLOAT" versucht und irgendwie habe ich es einigermaßen hinbekommen. Zwar nicht so wie es eigentlich aussehen soll, aber ich war schon weiter.
Das alles sieht im maximierten Browserfenster wie schon erwähnt einigermaßen so aus, wie es aussehen soll. Ein paar Kleinigkeiten wie der Abstand zum vorherigen Container (soll eigentlich kein Abstand dazwischen sein) bekomme ich bestimmt noch hin. Leider habe ich es nicht hinbekommen und was noch viel schlimmer ist, dass sich bei ändern der Größe des Browserfensters alles in sich zusammenfällt und sich verschiebt. Das liegt wohl an dem "FLOAT". Aber ohne das "FLOAT" sind ja die einzelnen Container untereinander gestapelt.
Hmmmm...
da ich selber nicht mehr weiter komme, hoffe ich ihr könnt mir weiterhelfen, damit endlich mal Das sog. Aha-Erlebnis eintritt. Wichtig, dabei, dass das Layout nicht mit absoluten sondern relativen Positionsangaben funktioniert.Wäre natürlich auch super wenn mir jemand erklären könnte, warum es so wie ich es gemacht habe nicht funktionieren kann. Aber dann bitte nicht so wie es auf den Seiten im Netz erklärt wird, also so, damit es jeder verstehen kann.
Ich habe die Navigation in 3 Teile geteilt. Kann man das auch irgendwie hinbekommen ohne sie teieln zu müssen?
Und bitte keine Links zu: www.selfhtml.net www.css4you.de u.s.w. Das sind bestimmt ganz tolle Seiten, nur ich verstehe dort fast nur Bahnhof.
Im Anhang ein Bild vom Layout, also wie es aussehen soll und die HTML und CSS-Datei.
Trotzdem füge ich nochmal die Quelltexte ein:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UEBUNG_CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0">
<div class="logo"></div>
<div class="navigation-eins"></div>
<div class="top"></div>
<div class="balken-links"></div>
<div class="navigation-zwei"></div>
<div class="balken-rechts"></div>
<div class="bildsprache"></div>
<div class="navigation-drei"></div>
<div class="inhalt"></div>
<div class="balken-bottom"></div>
</body>
</html>
HTML:
div.logo {
width: 230px;
height: 100px;
float: left;
position: relative;
background-color: Aqua;
}
div.balken-links {
background-color: #CFE7C6;
width: 230px;
height: 40px;
float: left;
position: relative;
}
div.bildsprache {
width: 230px;
height: 560px;
margin: 0px;
float: left;
position: relative;
background-color: Fuchsia;
}
div.navigation-eins {
background-color: #58B347;
width: 200px;
height: 100px;
margin: 0px;
float: left;
position: relative;
}
div.navigation-zwei {
background-color: #58B347;
width: 200px;
height: 40px;
margin: 0px;
border-bottom-width: 1px;
float: left;
position: relative;
}
div.navigation-drei {
background-color: #58B347;
width: 200px;
height: 560px;
margin: 0px;
float: left;
position: relative;
}
div.top {
background-color: #8FC67A;
width: 570px;
height: 100px;
margin: 0px;
position: relative;
}
div.balken-rechts {
background-color: #CFE7C6;
width: 570px;
height: 40px;
margin: 0px;
position: relative;
}
div.inhalt {
position: relative;
height: 560px;
width: 570px;
background-color: Red;
}
div.balken-bottom {
position: relative;
height: 27px;
width: 570px;
background-color: #CFE7C6;
}
