nicht angemeldet
Untersachiede IE / Firefox
Hallo,
ich habe auf den Forumsrat mein Layout nun auf CSS umgestellt, jedoch große Probleme mit verschiedenen Browser, genauer gesagt IE und Firefox. Anbei meine Layout-Definitionen. Das merkwürdige ist, dass ohne Inhalt das Layout in beiden Browsern identisch dargestellt wird, sobald aber inhalt rein kommt verschiebt sich das Manü und der Inhaltscontainer. Height-Angaben bewirken nichts, da sie im IE völlig anders dargestellt werden, bei width-Angaben passiert das nicht, was ich schon mal nicht verstehe. Hab's nun mit Abstandsangaben (margin/padding) sowie mit relativer und fixer Positionierung versucht, auch hier schon in der Vergangenheit gegebene Tipps konnten mir nicht helfen.
Hier nun mal der Code:
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 1em auto;
width: 900px;
text-align: center;
background-color: red;
border: 1px solid black;
}
#header
{
height: 67px;
background-color: fuchsia;
background-image: url(back.gif);
background-repeat: no-repeat
}
#mainnav
{
height: 23px;
background-color: green;
background-image: url(back.gif);
background-repeat: no-repeat;
}
#menu
{
float: left;
width: 130px;
height: 300px;
background-color: yellow;
background-image: url(glas.gif);
position: relative;
}
#contents
{
float: right;
width: 770px;
background-color: #444444;
color: #dddddd;
margin:auto;
height: 490px;
}
#footer
{
clear: right;
height: 20px;
margin-bottom: 0px;
background-color: lime;
background-image: url(background_grau.gif);
}
Vielleicht sind noch kleinere Fehler drin, aber im Großen und Ganzen sollte das an sich passen. Wie gesagt, mein Problem ist, dass Manue und Contents-Container bei Befüllung mit Inhalt ein "Eigenleben" entwickeln, dass ich nur zu gerne unterbinden würde.
Viele Grüße,
Thomas
-
Hi,
#container
{
width: 900px;
border: 1px solid black;
}das ergibt je nach Box-Modell unterschiedliche Breiten.
#menu
{
float: left;
position: relative;
}zu Risiken und Nebenwirkungen dieser Kombination fragen Sie... ;-)
#contents
height: 490px;
}und was, wenn der Inhalt mehr Höhe erfordert? Lasse die Eigenschaft besser auf auto.
#footer
{
clear: right;warum nicht both? Ist das Menü in jedem Fall kleiner?
freundliche Grüße
Ingo-
»» Hi,
#container
{
width: 900px;
border: 1px solid black;
}
das ergibt je nach Box-Modell unterschiedliche Breiten.Das macht ja an sich noch nichts!
#menu
{
float: left;
position: relative;
}
zu Risiken und Nebenwirkungen dieser Kombination fragen Sie... ;-)Hab's jetzt ganz ohne position-Angabe
#contents
height: 490px;
}
und was, wenn der Inhalt mehr Höhe erfordert? Lasse die Eigenschaft besser auf auto.Ist auto, Problem dabei ist halt, dass er das dann dem Inhalt anpasst. Ich fände es besser, wenn man den Content-Bereich z.B angeben kann, dass er in der Höhe immer den gesamten zur Vefügung stehenden Platz füllt, so wie mit *-Angaben bei Frames.
#footer
{
clear: right;
warum nicht both? Ist das Menü in jedem Fall kleiner?War so gedacht, aber das erfordert halt Pixelgenaues ausrichten, was nur für einen Browser klappt. Hintergrund war, dass das Menü ein anderes Hintergrundbild hat als der Footer, die Bilder gehen aber in einander über, was eben nur geht, wenn der Footer links neben dem Menü beginnt.
Aber trotz allem ist das Problem noch nicht verschwunden :-(-
Hi,
Problem dabei ist halt, dass er das dann dem Inhalt anpasst. Ich fände es besser, wenn man den Content-Bereich z.B angeben kann, dass er in der Höhe immer den gesamten zur Vefügung stehenden Platz füllt, so wie mit *-Angaben bei Frames.
Ich nicht. Du bekommst so zwangsläufig Überläufe oder unschöne seiteninterne Scrollbereiche, die sich in Geckos nicht vernünftig scrollen lassen. Was macht einen leeren Bereich innerhalb des Containers schöner als außerhalb?
dass das Menü ein anderes Hintergrundbild hat als der Footer, die Bilder gehen aber in einander über, was eben nur geht, wenn der Footer links neben dem Menü beginnt.
nö. Du kannst evtl. beide Hintergründe zu einem vereinen, das dann dem Container zugewiesen wird.
freundliche Grüße
Ingo-
»» Hi,
Problem dabei ist halt, dass er das dann dem Inhalt anpasst. Ich fände es besser, wenn man den Content-Bereich z.B angeben kann, dass er in der Höhe immer den gesamten zur Vefügung stehenden Platz füllt, so wie mit *-Angaben bei Frames.
Ich nicht. Du bekommst so zwangsläufig Überläufe oder unschöne seiteninterne Scrollbereiche, die sich in Geckos nicht vernünftig scrollen lassen. Was macht einen leeren Bereich innerhalb des Containers schöner als außerhalb?Ok, ich gebe zu ich wollte es so, aber nach kurzer Recherche hast du wohl recht, mit internen Scrol-Problem.
Aber wenn der Content-Bereich nun recht groß respektive lang wird, wird damit ja auch der HAuptcontainer größer. Ich seh da das Problem, dass mein Menü eine Größe x hat, der Conten dann Größer X wird. D.h. ich habe eine Lücke zwischen Menü und Footer, was einen Bruch in dem Hintergrundbild führt. Auch nicht wirklich schick.
Da würde dich eher die Möglichkeit der festen Containergröße bevorzugen, zumindest wüßte ich nicht wie man das sonst umsetzen sollte (bin aber für Vorschläge offen!).dass das Menü ein anderes Hintergrundbild hat als der Footer, die Bilder gehen aber in einander über, was eben nur geht, wenn der Footer links neben dem Menü beginnt.
nö. Du kannst evtl. beide Hintergründe zu einem vereinen, das dann dem Container zugewiesen wird.Die Idee hatte ich auch, Problem ist, dass der Hintergrunde des Menüs sich wiederholt, und ich ja nicht unbedingt immer ein komplettes Bild angezeigt bekomme, also auch nicht weiß wo ich mir Footer-Bild ansetzen muß. Aber das ist das kleinere Problem.
-
Hi,
Problem ist, dass der Hintergrunde des Menüs sich wiederholt, und ich ja nicht unbedingt immer ein komplettes Bild angezeigt bekomme, also auch nicht weiß wo ich mir Footer-Bild ansetzen muß.
Ein wenig muß Dein Bild natürlich zur Kachelung geeignet sein.
freundliche Grüße
Ingo
-
-
-
-