✔ Layout verschiebt sich

[Denniz]

Hi Leute,

warum verschiebt sich mein Layout im FF3 ,opera und IE8? Im IE6 und 7 wird es korrekt dargestellt.
CSS:

* {
	margin:0;
	padding:0;
}

html,body {
	width:100%;
	height:100%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	background:url(../_images/bg_roma.jpg) no-repeat ;
	background-position:top left;
}

#container {
	width:100%;
	height:100%;
	min-height:100%;
	background:url(../_images/bg_wrapper.gif) repeat-x ;
	background-position:0% 130px;
}

#logo {
	position:absolute;
	background: url(../_images/_logo.png) no-repeat;
	width:118px;
	height:34px;
	margin:20px 0 0 20px;
}

*html #logo {
	position:absolute;
	width:118px;
	height:34px;
	margin:20px 0 0 20px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/_logo.png', sizingMethod='scale');
	background:none;
}

#wrapper {
	margin-top:135px;  // Das gesamt layout verschiebt sich nach unten im FF
}

<div id="logo"></div>
<div id="container">
  <div id="wrapper">Lorem blabla.... </div>
</div>

<div id="footer"> </div>

Hier der Link.

Gruß

 

[Maik]

Hi,

tausch mal das hier:

#wrapper {
	margin-top:135px;  // Das gesamt layout verschiebt sich nach unten im FF
}

gegen das hier aus:

#wrapper {
	position:relative;
	top:135px; 
}

Oder positionier bei Verwendung der margin-top-Deklaration den Block #container absolut:

#container {
        width:100%;
        height:100%;
        min-height:100%;
        background:url(../_images/bg_wrapper.gif) repeat-x ;
        background-position:0% 130px;
        position:absolute;
}

mfg Maik

 

[Denniz]

Hi,
vielen dank, beide Methoden funktionieren obwohl mir nicht ganz klar ist wieso ich den container hierfür auf absolute stellen muß oder statt einem margin-top ein einfaches top verwenden muß.

Vielleicht könntest du mir noch dabei helfen meinen footer im layout richtig zu plazieren. Der footer wandert im FF nicht mit sobald der content über die fenstergröße hinausgeht.

* {
	margin:0;
	padding:0;
}

html,body {
	width:100%;
	height:100%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	background:url(../_images/bg_roma.jpg) no-repeat ;
	background-position:top left;
}

#container {
	width:100%;
	height:100% ;
	min-height:100% ;
	margin-bottom:30px;
	background:url(../_images/bg_wrapper.gif) repeat-x ;
	background-position:0% 130px;
}


#wrapper {
	position:relative;
	top:136px;
}

#content {
	margin: 0 auto;
	width:674px;
	min-height:290px ;
	background: url(../_images/bg_content2.gif) repeat-y;
}

*html #content {
	margin: 0 auto;
	width:674px;
	height:290px;
	background: url(../_images/bg_content2.gif) repeat-y;
}

#footer {
	height:20px;
	width:900px;
	background-color:green;
}

Der neue link.

Danke und Gruß

 

[Maik]

Neue Variante, diesmal mit padding-top Hab ich vorhin doch glatt vergessen zu erwähnen :-(

* {
        margin:0;
        padding:0;
}

html,body {
        width:100%;
        height:100%;
        font-family: Verdana, Helvetica, Arial, sans-serif;
        font-size: 11px;
        background:url(../roma/_images/bg_roma.jpg) no-repeat ;
        background-position:top left;
}

#container {
        width:100%;
        /*height:100% ;*/ /* interpretieren moderne Browser als fixe Höhe */
        min-height:100% ;
        margin-bottom:30px;
        background:url(../_images/bg_wrapper.gif) repeat-x ;
        background-position:0% 130px;
}

* html #container { height:100%; } /* Mindesthöhe in IE<7 */

#wrapper {
        padding-top:136px;
}

#content {
        margin: 0 auto;
        width:674px;
        min-height:290px ;
        background: url(../_images/bg_content2.gif) repeat-y;
}

* html #content { /* die übrigen Regeln brauchen hier für den IE<7 nicht wiederholt werden */
        height:290px;
}

#footer {
        height:20px;
        width:900px;
        background-color:green;
}

mfg Maik

 

[Denniz]

Besten Dank. Ich hab die CSS angepaßt, funktioniert jetzt 1a.