• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kopfzeile

Status
Für weitere Antworten geschlossen.
Klasse efchen, habs mal ganz profan gecheckt... manchmal muß man sich echt von dem ganzen kompliziert hintenrum denken frei machen.

Zumal die Lösung so schön naheliegend ist.

Nur über ein 100% height läuft es nicht, musste schon dem Body eine konkrete höhe in pixeln zuweisen und die 3 anderen parts dann in prozenten entsprechend ihrer gesollten höhe einteilen.

aber nochmal ne Frage an Mario...

warum hat deine By.. zeile einen silbernen rahmen mit 0px ?
 
Werbung:
karstenHH schrieb:
Nur über ein 100% height läuft es nicht
Zum Vergrößern anklicken....

Müsste aber eigentlich. Der IE braucht die Zuweisung der Höhe aber auch für das Element "html", nicht nur für "body". Sonst gehts in der Krücke wirklich nicht.

musste schon dem Body eine konkrete höhe in pixeln zuweisen und die 3 anderen parts dann in prozenten entsprechend ihrer gesollten höhe einteilen.
Zum Vergrößern anklicken....

Das wiederum kann nicht gehen, weil Du dann nicht die Höhe weißt. Eine Höhe von 100% minus n Pixel kann man in CSS nicht angeben.
Also wenn oben 100px hoch, und unten 50px hoch, dann kann man der Mitte keine Höhe von 100%-150px geben. Deswegen müssen alle Blöcke mit der selben Einheit angegeben werden. Und da sich alles an 100% Höhe ausrichten soll, kann es nur mit % gehen.

Gute Nacht,
-Efchen
 
Efchen schrieb:
.....Seite 100% hoch machst, sie dann in drei Teile aufteilst, und die Höhen aller drei Bereiche zusammen 100% ergeben? Dem mittleren Teil gibst Du ein overflow:auto, dann bekommt der Scrollbalken. Die anderen beiden Teile bleiben stehen.........
Zum Vergrößern anklicken....
Das geht natürlich, sieht dann aber aus wie Frames weil der Scrollbalken nicht über die ganze Höhe geht. So ein Gerüst hab ich vor einiger Zeit auf css-Spalten zur Ansicht hochgeladen.

Schöner geht es mit position:absolute, min-height und padding-bottom für den Inhalt:
Die Fußzeile ist auch bei wenig Inhalt am unteren Browserrand. Wenn Der Inhalt in der Höhe wächst, rutscht die Fußleiste nach unten mit.
html
Code: 
<body>
<div id="alles">
<h1>Lorem ipsum</h1>
<p>
 dolor sit amet, consectetuer adipiscing elit. Ut tempus leo id odio. Donec aliquam laoreet enim. Aliquam euismod massa non orci accumsan aliquet...
</p>
<div id="fuss">
Fusszeile
</div>
</div>
</body>
</html>
css
Code: 
* {
margin: 0px;
padding: 0px;
}

  html, body {
height: 100%;
background-color: #6AA3AE;
}
#alles {
min-height: 100%;
position: relative;
}

#alles p {
padding-bottom: 2em;
}

#fuss {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: #E9E9E9;
border-top: 1px solid black;
}
Da der IE6 kein min-height kennt, height aber wie min-height behandelt funktioniert folgender Hack:
css
Code: 
/*IE6 /*
* html #alles {
height: 100%;
}
für den IE 5 und 5.5 habe ich keine eigene Idee.
Auf alistapart.com habe ich auch für diese Browser mal eine Anleitung gesehen (finde ich jetzt aber gerade nicht).

Ich würde für IE unter Vers 6. einfach alle Höhenangaben entfernen und anstelle position: absolute, static verwenden. So bleibt es bei nur einem kleinen css-Hack und übersichtlichem html.
So wichtig kann die Position der Fussleiste nicht sein.
 
Zuletzt bearbeitet:
Werbung:
Mit #alles spreche ich den Container id="alles" an.
Er hat keine feste Höhe, sondern eine Mindesthöhe von 100%.
Also mindestens so hoch wie das Browserfenster.
Die Fußleiste habe ich mit position: absolute; bottom: 0px am unteren Rand von id="alles" ausgerichtet.
Beispiel:
Feste Fusszeile
 
Werbung:
Ich hab es so gemacht:

.html:

Code: 
<div id="alles">
 </diV>

 <div id="Fusszeile">
    ©by Mario Bienz
  </div>


Aber irgendwie kriege ich das mit dem Zentrieren einfach nicht hin!
 
Das geht nicht.
Die fußzeile muß im div id=alles stehen.
Sonst wird die Fußzeile an der Unterkannte vom Body ausgerichtet, sie muß aber von dem Container id=alles ausgerichtet werden.
Divs innerhalb von Divs sind auch erlaubt.

Den Inhalt vom Fuß zentrierst du so:
Code: 
#fuss {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: #E9E9E9;
border-top: 1px solid black;
text-align:center;
}

PS
Deine Seite besteht doch schon aus Frames. Warum fügst du nicht einfach einen weiteren Frame für die Fußleiste ein?
 
Werbung:
Wieso funktioniert das nicht?

Code: 
<div id="alles">
 

 <div id="Fusszeile">
    ©by Mario Bienz
  </div>
   </div>
 
Werbung:
Es geht immer noch nicht:

.css

Code: 
#alles {
min-height: 100%;
position: relative;
}

#alles p {
padding-bottom: 2em;
}


#Fusszeile {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
background-color: gray;

  }

/*IE6 /*
* html #alles {
height: 100%;
}
 
Hallo,

ist wahrscheinlich nicht der ausschlaggebende Tipp, aber der DOCTYPE stimmt ja gar nicht. Frameset ist nur für das Frameset-Dokument reserviert. Auf die Seiten sollte dann wieder etwas anderes wie Strict oder Transitional kommen (ich empfehle Strict, denn nur dann kann CSS im Standard Mode funktionieren, bei HTML 4.01 Transitional springt sogar Firefox in den Quirks Mode).

Und ich weiß nicht, ob Du von einer anderen Website sprichst, aber der Code auf der von Dir verlinkten Site ist ein anderer als der, den Du hier postest.

Gruß,
-Efchen
 
Du meinst also, ich darf nur in index.html den Doctype Framesets verwenden, für die anderen Dokumente Strict?
 
Werbung:
Mario348 schrieb:
Meine Probleme existieren immer noch...
Zum Vergrößern anklicken....
bei dir steht immer noch folgendes:
Code: 
<div id="alles">
 </diV>
 <div id="Fusszeile">
    ©by Mario Bienz
  </div>
Die Fußzeile muß innerhalb von id="alles" stehen.
id="alles" habe ich so genannt weil da alles andere drin stehen sollte.
Also:
Code: 
<body>
<div id="alles">
hier der Inhalt
<p id="fuss">
fuss
</p>
</div>
</body>
 
Werbung:
Ich verstehe...

Und wie kann ich das Problem mit dem Tab in der Navi lösen?



Habe nun ein Frame mit der Fusszeile gemacht, nun ist das ganz komisch.

index:

Code: 
<frameset rows="200px,*,10px" border="0" frameborder="0">
<frame src="oben.html" name="oben" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" noresize>
<frame src="home.html" name="mitte" scrolling="auto" frameborder="0" marginheight="0" marginwidth="0" noresize>
<frame src="fusszeile.html" name="fusszeile" scrolling="auto frameborder="0" marginheight="0" marginwidth="0" noresize>
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben