✔ Layout - Fusszeile soll sich immer unter dem Mittelteil halten (auto)

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
C

Comenius

Hi ihr :)

Ich habe bis jetzt folgendes Layout:

Code: 
/* ******************** LAYOUT ******************** */
#RAND   { position: absolute; top:	80px; left:  10px; width: 985px; height:  auto; border:		1px solid #8394B2; background-color: #FFFFFF; }
#KOPF   { position: absolute; top:	 0px; left:   0px; width: 985px; height:  20px; border-bottom: 1px solid #8394B2; background-color: #D1DCEB; }
#MITTE  { position: absolute; top:	30px; left: 152px; width: 682px; height:  auto; border:		1px solid #000000; background-color: #FFFFFF; }
#FUSS   { position: absolute; bottom:  0px; left:   0px; width: 985px; height:  20px; border-top:	1px solid #8394B2; background-color: #D1DCEB; }
/* ******************** LAYOUT ******************** */

Das füge ich so in eine HTML-Datei ein:

HTML: 
<!-- [******************** RAND ********************] //-->
<DIV ID="RAND">
<!-- [******************** KOPF ********************] //-->
<DIV ID="KOPF">
</DIV>
<!-- [******************** KOPF ********************] //-->
<!-- [******************** MITTE *******************] //-->
<DIV ID="MITTE">
</DIV>
<!-- [******************** MITTE *******************] //-->
<!-- [******************** FUSS ********************] //-->
<DIV ID="FUSS">
</DIV>
<!-- [******************** FUSS ********************] //-->
</DIV>
<!-- [******************** RAND ********************] //-->

Ich möchte gerne, dass sich der Fussteil immer unter dem Mittelteil befindet.
Er soll also "mitwandern"

Bekomme es leider nicht gebacken.

Vielleicht könnt ihr mir ja helfen :)

Danke

Gruss
Commi
 
Wenn sich das Fußnote-Element an das Layout anpassen soll, darf es nicht absolut positioniert werden. Stattdessen könntest du für die beiden seitlich darzustellenden Elemente die float-Eigenschaft benutzen, um sie aus den normalen Textfluss zu entfernen, während das mittig darzustellende Element mithilfe der margin-Eigenschaft seitlich zu begrenzen. Damit befände sich das Fußnote-Element immer direkt unter dem mittig darzustellenden Element.
 
Hmmmm,

Ich habe mir mal die Erklärungen, die du mir gepostet hast angeschaut.
Aber ich bin daraus leider nicht wirklich schlau geworden.

Ich werde mir das ganze noch einmal anschauen und ausprobieren, aber vielleicht könntest du mir das ja nochmal etwas genauer erklären.

Dank dir :)

Gruss
Commi
 
Mein Vorschlag: ein CSS-Modell ohne absolute DIV-Positionierungen.
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
}

#rand
{
margin: 80px 0 0 10px; /* Aussenabstand oben - rechts - unten - links */
width: 985px;
border: 1px solid #8394B2;
background-color: #FFFFFF;
}

#kopf
{
width: 985px;
height: 20px;
border-bottom: 1px solid #8394B2;
background-color: #D1DCEB;
}

#mitte
{
margin: 0 0 0 152px; /* Aussenabstand oben - rechts - unten - links */
width: 682px;
border: 1px solid #000000;
background-color: #FFFFFF;
}

#fuss
{
width: 985px;
height: 20px;
border-top: 1px solid #8394B2;
background-color: #D1DCEB;
}
-->
</style>

</head>
<body>

<div id="rand">

<div id="kopf">&nbsp;</div>

<div id="mitte">#mitte</div>

<div id="fuss">&nbsp;</div>

</div>

</body>
</html>
 
YEAH! *g*

Dank dir :)

Klappt prima. Leider konnte ich Gumbo´s Lösungvorschlag nicht testen, aber es ist ja egal "wie" man zu einer Lösung kommt :)

Oki Doki, dank dir nochmal.

Gruss
Commi
 
*grübel*


Da wäre doch noch etwas....

Ich habe gerade versucht mir ein Menu zu erstellen.
Das ganze habe ich auf die gleiche Weise wie die "Mitte" gemacht, aber leider verschiebt sich dann die Mitte nach unten, was ich mir nicht erklären kann.

Code: 
body { margin: 0; padding: 0; }
#MITTE { margin: 10px 0px 10px 152px; /* Aussenabstand oben - rechts - unten - links */ width: 682px; border: 1px solid #000000; background-color: #FFFFFF; }
#RAND { margin: 80px 10px 0px 10px; /* Aussenabstand oben - rechts - unten - links */ width: 985px; border: 1px solid #8394B2; background-color: #EEF2F7; }
#LINKS { margin: 10px 0px 10px 10px; /* Aussenabstand oben - rechts - unten - links */ width: 100px; border: 1px solid #000000; background-color: #FFFFFF; }
#KOPF { width: 985px; height: 20px; border-bottom: 1px solid #8394B2; background-color: #D1DCEB; }
#FUSS { width: 985px; height: 20px; border-top:	1px solid #8394B2; background-color: #D1DCEB; }

HTML: 
<!-- [******************** RAND ********************] //-->
<DIV ID="RAND">
 
<!-- [******************** KOPF ********************] //-->
<DIV ID="KOPF">
</DIV>
<!-- [******************** KOPF ********************] //-->
 
<!-- [******************** LINKS *******************] //-->
<DIV ID="LINKS">
</DIV>
<!-- [******************** LINKS *******************] //-->
 
<!-- [******************** MITTE *******************] //-->
<DIV ID="MITTE">
</DIV>
<!-- [******************** MITTE *******************] //-->
 
<!-- [******************** FUSS ********************] //-->
<DIV ID="FUSS">
</DIV>
<!-- [******************** FUSS ********************] //-->
 
</DIV>
<!-- [******************** RAND ********************] //-->

Ich habe damit schon etwas herumgespielt, aber ich schaffe es nicht, dass Die "Mitte" auf dem Fleck bleibt.

:)

Gruss
Commi
 
CSS-Code
Code: 
body
{
margin: 0;
padding: 0;
}

#rand
{
margin: 80px 0 0 10px; /* Aussenabstand oben - rechts - unten - links */
width: 985px;
border: 1px solid #8394B2;
background-color: #FFFFFF;
}

#kopf
{
width: 985px;
height: 20px;
border-bottom: 1px solid #8394B2;
background-color: #D1DCEB;
}

#links
{
float: left;
margin: 10px 0 10px 10px; /* Aussenabstand oben - rechts - unten - links */
width: 100px;
border: 1px solid #000000;
background-color: #FFFFFF;
}


#mitte
{
margin: 10px 0 10px 152px; /* Aussenabstand oben - rechts - unten - links */
width: 682px;
border: 1px solid #000000;
background-color: #FFFFFF;
}

#fuss
{
width: 985px;
height: 20px;
border-top: 1px solid #8394B2;
background-color: #D1DCEB;
}
 
Hehe, klasse! :)

Wenn ich dran denke wie ich sonst die Fussleiste immer mit Zeilenumbrüchen weiter nach unten verschoben habe..... Dank dir michaelsinterface, hast mir sehr geholfen ;)

Schönen Abend noch.

Gruss
Commi

// edit 1

Grmpf.... sorry, aber ich hab wieder eine Frage :(

Ich wollte mir jetzt auch noch ein rechtes Menu machen.
Dort habe ich dann ganz einfach "float: right;" angewendet, aber leider setzt er mir das ganze jetzt unter den Mittelteil :mad:

Wiederspricht sich das nicht irgendwie ?
Ein linkes Menu kann man mit "float: left;" richtig platzieren, aber ein rechtes nicht mit "float: right;" ?!

Vielleicht könntest du mir das ja mal erklären, wäre nett.

Gruss
Commi

// edit 2

Ich habs jetzt... Habe die Reihenfolge im HTML-Code verändert.
Erst Links, dann Rechts und dann Mitte, so gehts.

Warum - das weiss ich nicht, ich finde das beisst sich alles irgendwie.

Gruss
Commi
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück