3 Layer untereinander, geht das

**General Hammond** · 13.08.2003 20:26

Blöde Frage geht schon, aber:

Ein Layer für den Headbereich,
dann einen Layer für den Content und jetzt die Schwierigkeit:

der 3. Layer soll den Footer-Bereich aufnehmen und immer unterhal des Contents angezeigt werden!

d.h. egal mit wieviel Inhalt der Content gefüllt ist, soll sich der Footer z. B. immer 20 px darunter befinden.

Also eigentlich so als wenn man 3 Tabellen untereinander setzt...

**prefix** · 13.08.2003 21:37

hey mein general

wenn du dir diesen beitrag (war erst gestern!) mal genau anschaust, siehst es

du brauchst ja nur ein wenig relativ zu positionieren - da ein div-element den standardwert display:block hat, gibt es da keine troubles *lol*

wenn noch morgen früh probleme da sind, dann bastel ich dir ein beispielchen

**General Hammond** · 13.08.2003 22:56

hallöchen prefix,

vielen Dank für Deine Antwort

Der genannte Treat ist mir nicht entgangen, wollte nur mal nachfragen, ob das so einfach Möglich ist, weil auf dieser Seite Diese meine ich kann man ein solches 3 Box untereinander Model nicht finden...und da dachte ich mir vielleicht geht das doch gar nicht...

...naja ich probier das morgen vormittag mal anhand des nebeneinander Beispiels!

Jetzt ists mir zu Spät

**LANtastic** · 14.08.2003 01:38

Doch doch, das geht schon. Nur ist das so einfach, daß es dort nicht vorgestellt wird.
Einfach ? Jepp, isses

Siehe selbst :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css" media="all">
html {
	font-size:100%}
body {
	padding:0;
	margin:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:.8em;
	}
#kopf {
	border:5px solid black;
	margin:0;
	height:60px;
	background-color:#33CC00;
	}
#inhalt{
	border:5px solid black;
	margin:0;
	background-color:#CCFF00;
	}
#fuss {
	border:5px solid black;
	margin:20px 0 0 0;
	top:40px;
	background-color:#0099FF;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="kopf">Das hier ist die Kopfzeile</div>
<div id="inhalt">
  Hier kannste dich nun austoben und Inhalt reinpacken
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  Die Position, der Fusszeile ist immer von der L&auml;nge dieses Abschnittes
  abh&auml;ngig. Jedoch immer 20px davon entfernt </div>
<div id="fuss">Und das hier soll die Fusszeiel darstellen</div>
</body>
</html>

@Prefix

du brauchst ja nur ein wenig [b]relativ[b] zu positionieren

Nö, braucht er nicht. Static reicht, sprich nix bei position klappt wunderbar.

**prefix** · 14.08.2003 07:37

@lantastic: nach blick in die spezifikation bin ich draufgekommen, dass ja wirklich "static" der ausgangswert ist

bisher hab ich immer "relative" als standardwert zugeordnet - na, man lernt nicht aus *hehe*

**General Hammond** · 14.08.2003 17:39

Hallöchen Lantastic & Prefix,

als erstes möchte ich mal das präsentieren was ich gebasltelt habe:
Mein Entwurf

hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cascading Style Sheets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<style type="text/css" media="all">

</style>
</head>

<body>
<div id="Header"><img src="grafik/objekte/mulfinger.jpg" width="800" height="120">
<div id="Content">
<h1 class="content">Überschrift</h1>
<p class="content">Grundlagen<br>
In einem Satz erklärt: Cascading Style Sheets erlauben es dem Author (und
auch dem Leser) HTML-Dokumente mit Formatierungen (zum Beispiel Schriftart, Farbe
und Rahmen) zu versehen. Das setzt natürlich voraus, dass Sie sich mit HTML
auskennen. Ist das nicht der Fall sollten Sie sich eine der vielen Dokumentationen
zu HTML ansehen. SelfHTML ist wohl die Beste.</p>
<p class="content">Um zu sehen wie CSS in HTML eingreift sehen Sie hier den Quelltext
einer einfachen HTML-Seite:</p>
<p class="content"></p>
<p class="content"><html></p>
<p class="content"><head><br>
</head></p>
<p class="content"><body></p>
<p class="content"><h1>&Uuml;berschrift</h1></p>
<p class="content"><p>Fließtext bzw. Absatz</p></p>
<p class="content"></body><br>
</html></p>
<p class="content">Die Kommentare sind nur informativ. Sie fungieren entweder
als zusätzlicher Hinweis im Quelltext oder, wie in Zeile eins um die Datei
zu benennen (wichtig bei Verknüpfung von Dateien). Kommentare beginnen in
HTML mit . In CSS sind Sie
in Form von /* Kommentar */ augebaut.</p>
<p class="content">In diesem Quellcode haben Sie jetzt vier HTML-Elemente, die
Sie formatieren können: <html>, <body>, <h1> und <p>.
</p>
<p class="content">Erklärung einer CSS-Regel<br>
Um dem Browser mitzuteilen welches dieser HTML-Element angesprochen wird bedient
man sich dem Selector, der in der Regel (außer bei Klassen oder ids) genau
so heißt wie das Element, das man formatieren möchte. Um zu bestimmen,
was mit dem Element passiert gibt man die Eigenschaft an und versieht diese dann
noch mit einem Wert. Im folgenden Beispiel sehen Sie wie sich alles zusammensetzt.</p>
<p></p>
<div id="Footer" class="footer"> All Rights Reserved</div>
</div>
</div>
</body>
</html>

und die CSS:

body {
background-color: White;
color: Black;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
margin: 10 0 0 20;
}

H1 {
font: 20px/130%;
color: #4e4e4e;
background-color: transparent;
}
H2 {
font: 16px/130%;
color: #4e4e4e;
font-weight: bold;
background-color: transparent;
margin: 50px 0 0 0;
}

H3 { font: 14px/130% Verdana, Arial, sans-serif; color: #4e4e4e; background-color: transparent; margin: 50px 0 0 -1%; font-weight: bold; }

#Header {
position: relative;
width: 800px;
height: 100px;
margin-top: 0px;
margin-bottom: 0px;
z-index: 1;
background-color: #ffffff;
}

#Content {
position: relative;
width: 800px;
margin-top: 15px;
margin-bottom: 0px;
z-index: 2;
font-size: 90%;
background-color: #ffffff;
}

#Footer {
position: absolute;
width: 800px;
height: 40px;
margin-top: 10px;
margin-bottom: 30px;
z-index: 3;
background-color: #ffffff;
font-size: 90%;
background-image: url(../grafik/objekte/footer.jpg);
background-repeat: repeat-x;
}

.content {
padding-left: 3px;
}

.footer {
padding-top: 8px;
padding-left: 5px;
font-weight: bold;
color: Silver;
}

Was meint Ihr dazu?
Ich möchte das ganze noch zentrieren, weiß aber nicht wie

Und die Breite soll eben Fest sein, wegen der Headgrafik...

**prefix** · 14.08.2003 17:43

na, general - da hast schon mal was echt gutes und schönes vollbracht - gefällt mir gut, ist der code auch schon validiert?

zum thema zentrieren haben wir erst vor kurzem darüber gesprochen: klick mich

**General Hammond** · 14.08.2003 18:02

hi prefix,

danke...validiert ist das noch nicht.
Hatte keinen Internetzugang, dort wo ich das gebastelt habe.

Das mit dem Zentrieren klappt irgendwie nicht. In NN 7 garnicht und der IE macht einen Scrollbalken unten...

Naja probieren wir weiter...
Was für ein Doctype wäre für mein Bsp. denn empfehlenswert?

Oder noch besser, wie wißt Ihr eigentlich immer so genau welcher zu was passt?

**prefix** · 14.08.2003 18:07

tja, an sich wäre xhtml 1.1 empfehlenswert - hab aber damit bisher selbst noch kaum erfahrung, wird mein nächstes projekt!

wichtig ist, dass du dir mal die verhaltenstabelle der browser anschaust - und zwar in diesem artikel ziemlich unten!

da siehst dann klarer

**General Hammond** · 14.08.2003 18:08

Na was sagt man dazu:
Fast Valide

**LANtastic** · 14.08.2003 19:20

Ich denke HTML 4.01 Strict, oder XHTML Transitional 1.0 reicht voll und ganz.

Klar kannste auch direkt XHTML 1.1 machen, aber da kriegste stellenweise noch eine Krise.

Der Sprung von HTML 4.01 Strict auf XHTML 1.0 Transitional ist später im Quellcode nur noch minimal. Du kannst dann (wenn du möchtest) immer noch umsteigen. Aber zum "warm werden" reicht HTML 4.01 Strict schon voll und ganz.

**LANtastic** · 14.08.2003 19:27

* Line: 5 Context : body

Invalid number : marginonly 0 can be a length. You must put an unit after your number : 10 0 0 20

margin: 10 0 0 20; ist falsch, da Werte ungleich Null immer eine Einheit haben müssen.

Richtig wäre :
margin: 10px 0 0 20px;

* Line: 9 Context : H1

Invalid number : fonttoo few values for the property 20px/130% : 20px/130%

und

* Line: 14 Context : H2

Invalid number : fonttoo few values for the property 16px/130% : 16px/130%

Code:

font: 20px/130%;

Wenn du schon sogenannte "Shorthands" verwendest, dann müssen diese unbedingt vollständig sein.

In deinem Fall fehlt also noch der name der Schrift.
Richtig wäre z.B. wenn ich dein CSS als Grundlage nehme :

Code:

font: 20px/130% Arial, Verdana, Geneva, Helvetica, sans-serif;

Mach es dir zu Beginn und auch der Übersichtlichkeithalber einfacher und verzzichte zumindest beim Font Shorthands.

**LANtastic** · 14.08.2003 19:28

Ach ja, hast du auch schon deinen HTML Code validiert

da wirste dich vermutlich arg wundern.
Deswegen meinte ich, daß du zu Beginn erstmal nur mit HTML 4.01 Strict anfangen solltest, hehe

**General Hammond** · 14.08.2003 20:14

LANtastic - danke Dir, mit dem validieren wollte ich im prinzip abwarten, bis ich von den "MOCSS" (Masters of CSS) mal eine Meinung zu dem was ich da so kreiert habe bekommen habe/hatte.

Denn das ganze ist ja schon sehr Umfangreich, vor allem wenn man das in Tabellen denken einfach so vergessen soll (wofür waren die gleich nochmal?)

Auf jeden Fall bin dankbar für jeden Tip und lerne auch ständig dazu und möchte Euch beiden mal ein ghroßes Lob aussprechen:

Ihr macht das Klasse!

**prefix** · 14.08.2003 20:15

danke general, lob tut immer gut - und auch du hast schon viel viel gelernt (was waren nochmal tabellen??)

zur Startseite vom TP

Thema: 3 Layer untereinander, geht das

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

3 Layer untereinander, geht das

Aktive Benutzer

Aktive Benutzer