CSS -> simple Sache...

[dav133]

ntag,

ich bin glaub ich mittlerweile betriebsblind...

Code:


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


#oben
{
position:relative;
width:100%;
height:130px;
background-color:red;
}



#main
{
position:absolute;
bottom:30px;
top:150px; /* header-höhe: 130px -> 20px abstand zum header */
width:100%;
background-color:green;

}


#unten
{
position:absolute;
bottom:0;
width:100%;
height:30px;
background-color:yellow;
}


</style>

<div id="oben"><h1>HEADER</h1></div>
<div id="main"><h1>Main</h1></div>
<div id="unten"><h1>FOOTER</h1></div>




so solls aussehen:
http://www.abload.de/thumb/problemp0v.jpg (http://www.abload.de/image.php?img=problemp0v.jpg)

so siehts im IE aus:
http://www.abload.de/thumb/unbenannt0rq.jpg (http://www.abload.de/image.php?img=unbenannt0rq.jpg)

Erklärung:
Das ist das stark vereinfachte Muster einer Homepage... Die Positionierung muss absolut sein. Gewollt ist die Darstellung, wie sie im Opera ist.

Datei im Internet:
http://www.d-mueller.de/muster.htm


Danke für eure Hilfe,

lg

[darph]

Quirks-Mode. Kann man durch korrekte Angabe eines non-transitional-Doctypes fixen.

Übrigens: h1 darf in einem Dokument nur einmal vorkommen.


http://files.darph.net/htmltest.html Es paßt. Auch im IE.

Validen Code schreiben!
Neue Seiten nicht in Transitional (der geneigte Leser möge hier im Wörterbuch nachschlagen und über die Bedeutung des Begriffes sinnieren) erstellen!
Dann klappt's auch mit dem Nachbarn.

[DanMan]

Übrigens: h1 darf in einem Dokument nur einmal vorkommen.
Wer erzählt denn sowas?

[darph]

Wer erzählt denn sowas?
Wie viele Überschriften kann ein Dokument denn haben?

[dav133]

http://files.darph.net/htmltest.html Es paßt. Auch im IE.


http://www.abload.de/thumb/unbenanntt4w.jpg (http://www.abload.de/image.php?img=unbenanntt4w.jpg)

Im 7ener gehts, der 6er finds irgendwie immer noch net so toll...

lg

[darph]

Dann mußt du eine Höhe definieren.

[dav133]

Dann mußt du eine Höhe definieren.

geht ja grad drum, dass es bei jeder aufloesung gleich aussehen soll. Deswegen kann ich %-angaben schon mal vergessen, feste werte natuerlich erst recht und mit min und max-height zu arbeiten fuehrt auch wieder zu problemen und is im prinzip nur rumgefusche.

lg

[darph]

Du könntest versuchen, dem Body einen grünen Hintergrund zu geben und den weißen Streifen als <hr> zu implementieren. Daß es überall genau auf den Pixel gleich aussehen soll ist sowieso eine Vorstellung, von der ich mich verabschieden würde. Reicht es denn nicht, wenn es hinreichend ähnlich ist?

[dav133]

Da is dann wieder das Problem, dass die Homepage in real wesentlich komplexer als das Modell ist, deswegen wird das so auch nix... Kann ja net sein, dass es fuer absolute so schwierig is, ne vernuenftige aufteilung zu schaffen.

lg

/edit:

Auf sowas will ich halt tunlichst verzichten, obwohls aus optischer hinsicht genau meine anforderungen erfuellt.



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

<table style="height:100%;width:100%;" cellspacing=0>
<tr><td height=300 bgcolor=red>Header</td></tr>
<tr><td height=10 bgcolor=white></td></tr>
<tr><td bgcolor=green>Main</td></tr>
<tr><td height=30 bgcolor=yellow>Footer</td></tr>
</table>

[DanMan]

Wie viele Überschriften kann ein Dokument denn haben?
Man beantwortet Fragen zwar nicht mit Gegenfragen, aber um deine zu beantworten: beliebig viele.

Natürlich kann es auf einer Seite mehrere Überschriften mit der gleichen Gewichtung geben. Das macht der Strukturierung keinen Abbruch, und gegen die HTML Richtlinien spricht es auch nicht.

Zum Thema: Es wäre nicht schlecht, wenn du uns einen Screen der Endversion zeigen könntest. Denn oft braucht man so eine Klötzchenstrucktur, wie du sie gerne hättest garnicht.

Was du noch probieren könntest ist den Footer in den Mitteleil zu verschieben und innerhalb dessen unten zu platzieren. Dann könnte vllt. auch die Mittlere Box bis unten aufgezogen werden (weil ja dann was drinsteht - habs aber nicht getestet).
Verstehe aber ehrlich gesagt immernoch nicht ganz was genau das Problem ist. Kommen da Inhalte in de weißen Streifen? Wenn nicht, dann gib doch einfach dem Head "border-bottom:10px solid white".

[dav133]

Hmm... Ich glaub ich drücke mich nicht verständlich genug aus, war noch nie meine Stärke.

neuer Anlauf... Man kann das Problem auch so umformulieren: http://www.d-mueller.de/umf.htm

Der mittlere Container soll so groß sein, dass das Gesamtgefüge 100% Höhe hat. Ähnlich wie bei einem Frameset: <frameset cols="300px,*"> Der Stern bedeutet in diesem Fall ja, dass der "Rest" des Dokuments benutzt wird. Und genau sowas brauch ich auch.

lg

[DanMan]

Hmm... Ich glaub ich drücke mich nicht verständlich genug aus, war noch nie meine Stärke.

neuer Anlauf... Man kann das Problem auch so umformulieren: http://www.d-mueller.de/umf.htm

Der mittlere Container soll so groß sein, dass das Gesamtgefüge 100% Höhe hat. Ähnlich wie bei einem Frameset: <frameset cols="300px,*"> Der Stern bedeutet in diesem Fall ja, dass der "Rest" des Dokuments benutzt wird. Und genau sowas brauch ich auch.

lg
Hmmm... das geht wohl nicht besser als das, was darph dir geschrieben hat. Bestenfalls kannst du versuchen mit Javascript die freie Größe auszulesen und dann bei Veränderung der Fenstergröße immer neu zu schreiben.

[dav133]

Hmmm... das geht wohl nicht besser als das, was darph dir geschrieben hat. Bestenfalls kannst du versuchen mit Javascript die freie Größe auszulesen und dann bei Veränderung der Fenstergröße immer neu zu schreiben.

jemand hat mir diesen Code hier zugesteckt:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
* {margin: 0; padding: 0;}

html {
height: 100%;
}
body {
padding:0px;
margin:0px;
height: 100%;
}
#out {
min-height: 100%;
height:auto !important;
height:100%;
position: relative;
background-color: green;
}
#oben{
width:100%;
background-color:red;
height:50px;
}
#mitte {
width:100%;
}

#unten
{
width:100%;
background-color:yellow;
height:50px;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="out">
<div id="oben"></div>
<div id="mitte"></div>
<div id="unten"></div>
</div>
</body>
</html>



Sieht mir ganz vernünftig aus, nur verstanden hab ichs noch nicht so recht.

lg

[kloffy]

...

Sieht mir ganz vernünftig aus, nur verstanden hab ichs noch nicht so recht.

lg
Naja, die Lösung ist nicht schlecht, allerdings füllt hier das mittlere div nicht die gesamte Restfläche aus. Es wurde ledeglich dem Umschliessenden div die Hintergrundfarbe Grün gegeben. Das untere div ist mit Hilfe von "bottom" plaziert. Insgesammt eine ziemlich gute Lösung, viel schöner wird man's nicht hinbekommen...

[dav133]

danke allen beteiligten.

lg