nicht angemeldet
Größe eines Blocks an das Browserfenster anpassen
Hallo,
ich mache gerade meine ersten Schritte mit CSS und manchmal ist es echt zum Mäusemelken!
Ich habe einen Body:
body
{
position:absolute;
background-color: #fff;
background-image: url(../images/bild.jpg);
background-repeat: no-repeat;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
und in diesem body ist ein content-Bereich:
#content
{
border-top: #000000 1px solid;
position:absolute;
background-color:#E8F5FD;
margin: 142px 0px;
height:420px;
width:100%;
}
Der Contentbereich ist also um 142px nach unten gerückt, damit oben Headerinfos stehen können. Mein Problem ist nun "height", denn das hätte ich gerne so, dass die Box "content" bis zur Unterkante des Browserfensters geht. Mit "100%" geht das leider nicht, denn dann werden offensichtlich die 142px addiert, die die Box nach unten gerückt wurde.
Hat jemand eine Idee, wie ich das lösen könnte?
Vielen Dank,
Heinz
-
Hi.
body
{
position:absolute;
background-color: #fff;
background-image: url(../images/bild.jpg);
background-repeat: no-repeat;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}Warum hier bitte position:absolut?
#content
{
border-top: #000000 1px solid;
position:absolute;
background-color:#E8F5FD;
margin: 142px 0px;
height:420px;
width:100%;
}Vielleicht versuchst du mal statt das alles mit margin von der Oberkante zu trennen per top:142px.
Der Contentbereich ist also um 142px nach unten gerückt, damit oben Headerinfos stehen können. Mein Problem ist nun "height", denn das hätte ich gerne so, dass die Box "content" bis zur Unterkante des Browserfensters geht. Mit "100%" geht das leider nicht, denn dann werden offensichtlich die 142px addiert, die die Box nach unten gerückt wurde.
Hmm willst du das dem Inhalt enstprechend oder auch wenn da kein Inhalt steht, dann wäre height:auto sinnvoll denk ich.
Hat jemand eine Idee, wie ich das lösen könnte?
Sorry ich bin völlig übermüdet. Das ist wirklich nur das was mir grad in Kopf geschossen kahm ohen wirklich drüber nachzudenken.
mfg
Phil Z.
PS: Du hast nicht zufällig einen Sohn der Christian heißt? -.-*
-
Hallo,
Warum hier bitte position:absolut?
Damit sich die Kinderelemente in ihrer Positionierung an dem Elternelement orientieren.
Vielleicht versuchst du mal statt das alles mit margin von der Oberkante zu trennen per top:142px.
Das macht keinen Unterschied.
Hmm willst du das dem Inhalt enstprechend oder auch wenn da kein Inhalt steht, dann wäre height:auto sinnvoll denk ich.
Nein, der Wert "Auto" erweitert die Box so, dass die Inhalte hineinpassen. Das wäre hier also völlig falsch.
PS: Du hast nicht zufällig einen Sohn der Christian heißt?
Nein.
Über weitere Vorschläge würde ich mich freuen.
Grüße,
Heinz
-
Hi,
Warum hier bitte position:absolut?
Damit sich die Kinderelemente in ihrer Positionierung an dem Elternelement orientieren.
dazu verwendet man besser position:relative.
Aber abgesehen davon hast Du mit der absoluten Positionierung eine schlechte Wahl getroffen und solltest diese Eigenschaft erst dann anwenden, wenn Du über ausreichende Erfahrung vrfügst - dann allerdings würdest Du auch kaum auf die Idee kommen, ein ganzes Layout auf diese Weise für eine bestimmte Fenster- und Schriftgröße festzuzimmern.freundliche Grüße
Ingo-
Warum hier bitte position:absolut?
Damit sich die Kinderelemente in ihrer Positionierung an dem Elternelement orientieren.
dazu verwendet man besser position:relative.
Aber abgesehen davon hast Du mit der absoluten Positionierung eine schlechte Wahl getroffen und solltest diese Eigenschaft erst dann anwenden, wenn Du über ausreichende Erfahrung vrfügst - dann allerdings würdest Du auch kaum auf die Idee kommen, ein ganzes Layout auf diese Weise für eine bestimmte Fenster- und Schriftgröße festzuzimmern.Das mag ja sein, löst mein Problem aber nicht. ;-)
-
Hi,
Das mag ja sein, löst mein Problem aber nicht. ;-)
aber viele andere, denen Du Dir noch gar nicht bewußt bist.
Was möchtest Du überhaupt erreichen? Eine Teilung der Hintergrundfarbe unter dem Header? Gib dazu dem (nicht absolut positioniertem) Body die Hintergrundfarbe mit an und dem (ebenfalls im Elementfluß belassenen) Header eine andere.
freundliche Grüße
Ingo-
Hallo,
Das mag ja sein, löst mein Problem aber nicht. ;-)
aber viele andere, denen Du Dir noch gar nicht bewußt bist.Was möchtest Du überhaupt erreichen? Eine Teilung der Hintergrundfarbe unter dem Header?
Ich möchte einige Boxen pixelgenau im Browserfenster positionieren und einige davon auch überlappen lassen. Das jetzige Design mit absolut positionierten Elementen funktioniert nun ganz gut. Jedenfalls ist die Positionierung im IE5, IE6, Firefox und Opera perfekt umgesetzt. Einzig die Druckansicht sieht noch etwas wild aus, was sicher auch an der zerrissenen Reihenfolge liegt. Das behebe ich allerdings mit einem Stylesheet für print.
-
Hi,
Ich möchte einige Boxen pixelgenau im Browserfenster positionieren und einige davon auch überlappen lassen.
Für ersteres reicht die Angabe von margin und letzteres geht auch mit position:relative oder einer Kombination aus position:relative und position:absolute bzw. negativen margins für die folgenden Elemente.
Das jetzige Design mit absolut positionierten Elementen funktioniert nun ganz gut. Jedenfalls ist die Positionierung im IE5, IE6, Firefox und Opera perfekt umgesetzt.
Du hast dies auch in verschiedenen Fenstergrößen und Schriftgraden getestet?
freundliche Grüße
Ingo-
Hallo,
Ich möchte einige Boxen pixelgenau im Browserfenster positionieren und einige davon auch überlappen lassen.
Für ersteres reicht die Angabe von margin und letzteres geht auch mit position:relative oder einer Kombination aus position:relative und position:absolute bzw. negativen margins für die folgenden Elemente.Was der Vorteil dieser Methode ist, muss ich wohl erst noch lernen. Aber danke erstmal für die Anregungen.
Das jetzige Design mit absolut positionierten Elementen funktioniert nun ganz gut. Jedenfalls ist die Positionierung im IE5, IE6, Firefox und Opera perfekt umgesetzt.
Du hast dies auch in verschiedenen Fenstergrößen und Schriftgraden getestet?Ja natürlich. Ich habe in den verschiedenen Browsern die Auflösungen von 800x600 bis 1600x1200 Pixel durchprobiert und die Schriftgröße in den Browsern stufenweise verkleinert und vergrößert.
Für Auflösungen kleiner 800x600 Pixel bzw. tragbare Geräte kommt ein textbasiertes CSS zum Einsatz und für den Druck gibt es wie gesagt noch einen weiteren Style.
-
Hi,
Was der Vorteil dieser Methode ist, muss ich wohl erst noch lernen. Aber danke erstmal für die Anregungen.
position:absolute wird leider sehr oft von Anfängern (und Du schriebst ja auch "ich mache gerade meine ersten Schritte mit CSS") als einfache Methode zur Entwicklung eines Layouts entdeckt, nur die Folgen sind meist nicht bewußt - nämlich die Herausnahme aus dem Elementenfluß. Die Seite sieht dann - sogar in allen Browsern - perfekt aus ... bis man sie in anderer Fenster- oder Schtriftgröße sieht. Dann kommt es nämlich oft zu Überlagerungen, unnötigen Scrollbalken oder anderen unschönen Effekten.
Für Auflösungen kleiner 800x600 Pixel bzw. tragbare Geräte kommt ein textbasiertes CSS zum Einsatz
wie soll das gehen? Abgesehen davon, dass die Bildschirmauflösung nichts über die Fenstergröße aussagt, ist so etwas nur über Javascruipt zu ermitteln, was nicht zwangsläufig tzr Verfügung steht.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-