[elpeyotl]

Hallo!! Ich bin neu hier und wollte mal nachfragen ob ihr mir bei einem Problem helfen könnt:

Ich bastle an einer Website die aus einem sehr breiten Container DIV besteht (height: 100%, Width: 400%). Der Sinn ist, dass es eine Fullbackgroundimage horizontal scrolling website ergibt. In diesem Div habe ich in Unterdivs 4 Images plaziert. Diese Divs haben die höhe 100% und breite 100%. So dass sie den Browserscreen sauber abdecken.

Nun zu meinem Problem: Ich habe Mühe den Content (#second, #third etc.)in den eizelnen Divs genau zu plazieren. Ich möchte das der Content 10% von oben (browserwindow) nach unten verschoben wird. Dazu benutze ich: top: 10%;
Dies scheint zum teil zu funktionieren. Komischerweise wenn ich dies über den Webdeveloper im Firefox eingebe, sehe ich es korrekt, sobald ich es aber abspeichere verschiebt sich der Content an eine andere Stelle. Nicht die 10% sondern eher 30%. Woran kann das liegen?? Ich denke ich habe irgendwo nen Fehler drinn, kann ihn aber nicht finden....

Danke für eure Hilfe.

Hier der Code:

CSS:

#body {
background-image: url (background.jpg);
background-repeat: repeat-x;
}

#container {
left: 0px;
top: 0px;
height: 100%;
width: 400%; 
}

ul#nav {
position: fixed;
z-index: 1;
display: inline;
left: 300px;
top: 91%;
}

ul#nav li {
list-style: none;
display: inline;
font-family:MyriadProCondensed, Arial, Helvetica, sans-serif;
}

ul#nav a {
padding: 5px;
    text-decoration: none;
color: grey;
}

ul#nav a:hover {
color: pink;
}
.box {
top: 0px;
left: 0px;
height: 100%;
width: 100%;
position: absolute;
}

img#back { 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: -1; 
} 



#box1 {
	


}
#box2 {	left: 100%;
}

#box3 {
	left: 200%;
}

#box4 {
	left: 300%;

}

#logo {
width: 150px;
position: fixed;
left: 25px;
top: 90%;
z-index: 1;
}

#main {
width: 500px;
height: 133px;
position: absolute;
top: 30%;
left: 30%;
}

p {
font-family:MyriadProCondensed, Arial, Helvetica, sans-serif;
}

#slogan {
font-size: 40px;
color: #8e8787;
margin-bottom: 28px;
}

#textmain {
font-size: 19px;
color: #232228;
line-height: 23px;
}

#second {
position: absolute;
width: 150px;
height: 133px;
top: 10%;
left: 30%;
}

#title {
font-size: 38px;
color: #8e8787;
margin-bottom: 28px;
}

#texttitle {
font-size: 18px;
color: #232228;
line-height: 23px;
}

#third {
position: absolute;
width: 430px;
height: 133px;
top: 10%;
left: 30%;}

#fourth {
position: absolute;
width: 430px;
height: 133px;
top: 10%;
left: 30%;}

#texttitle2 {
font-size: 18px;
color: #232228;
line-height: 23px;

HTML:

<div id="container">
<img src="logo.png" id="logo">
<ul id="nav">
<li><a href="home">.home</a></li>
<li><a href="home">.mexico</a></li>
<li><a href="home">.indonesia</a></li>
<li><a href="home">.norway</a></li>
<li><a href="home">.about</a></li>
</ul>


<div id="box1" class="box">

<img id="back" src="mexicobild.jpg" alt="" title=""> 

<div id="main">

<p id="slogan">.photo.inspiration.life</p><p id="textmain">Welcome to GoniPIX Here you will find my impressions of the world. Enjoy your trip....</p>

</div><!--endmain-->

</div><!--end box1-->

<div id="box2" class="box">
<img id="back" src="mexico.jpg" alt="" title=""> 

<div id="second">

<p id="title">{mexico}</p>
<p id="texttitle">.cabosanlucas.lapaz.guadalajara.mexicocity
.sanignacio.guanajuato.sanjosedelcabo.todossantos</p>
</div><!--end second-->

</div><!--end box2-->

<div id="box3" class="box">
<img id="back" src="indonesia.jpg" alt="" title=""> 


<div id="third">
<p id="title">{indonesia}</p>
<p id="texttitle">.jakarta.kalimantan.mtbromo.ubud
.komodo.flores.lebuanbajo.jogyakarta</p>

</div> <!--endthird-->

</div><!--end box3 -->

<div id="box4" class="box">
<img id="back" src="norwege.jpg" alt="" title=""> 

<div id="fourth">
<p id="title">{norway}</p>
<p id="texttitle">.oslo.bergen.trondheim.tromso.nordkapp
</p>

</div><!--end box4-->




</div><!--end container -->
</div>

[elpeyotl]

:kopfandiewand: Kein Wunder funktioniert das nicht wenn man noch den alten CSS code im XHTML file integriert hat.

hahahaha....kein schlechter Einstand würde ich mal sagen.