Please help - Dreamweaver : too much vertical space
hi warrior forum,
I have a webpage with a few layers (ap div). They are all in position: relative and margin: auto.
I don't really understand the structure/system behind the relative positioning, because with each new layer it gets more difficult to position them: with negative -px values etc. Also, bottom doesn't seem to work as "from bottom of the page", but also relative to - but i don't know in relation to what.
Still, with a bit of trying, I can handle that and position the layers where i want them to be (since everything is basically centered it's just a vertical position thing)
...But what i can't figure out is which layer creates so much white space at the bottom of the browser and why.
It would be of enormous help if somebody could tell me whats wrong!
here the code:
I have a webpage with a few layers (ap div). They are all in position: relative and margin: auto.
I don't really understand the structure/system behind the relative positioning, because with each new layer it gets more difficult to position them: with negative -px values etc. Also, bottom doesn't seem to work as "from bottom of the page", but also relative to - but i don't know in relation to what.
Still, with a bit of trying, I can handle that and position the layers where i want them to be (since everything is basically centered it's just a vertical position thing)
...But what i can't figure out is which layer creates so much white space at the bottom of the browser and why.
It would be of enormous help if somebody could tell me whats wrong!
here the code:
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lotus Garten</title>
<style type="text/css">
#Navi-Restaurant {
position: relative;
left: 0;
top: 105px;
width: 925px;
height: 15px;
z-index: 1;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: normal;
color: #666;
text-align: center;
margin: auto;
}
#center-line-top1 {
position: relative;
width: 880px;
height: 1px;
z-index: 2;
left: 0px;
top: 100px;
background-color: #FE4573;
margin: auto;
}
#center-line-top2 {
position: relative;
left: 0px;
top: 110px;
width: 880px;
height: 1px;
z-index: 3;
margin: auto;
background-color: #FA4573;
}
#center-line-bot1 {
position: relative;
left: 0px;
width: 800px;
height: 1px;
z-index: 4;
background-color: #FA4573;
margin: auto;
top: 730px;
}
#center-line-bot2 {
position: relative;
left: 0px;
top: -415px;
width: 800px;
height: 1px;
z-index: 5;
background-color: #FA4573;
margin: auto;
}
#Navi-Info {
position: relative;
left: 0px;
top: -408px;
width: 1100px;
height: 15px;
z-index: 6;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 10px;
text-align: center;
margin: AUTO;
}
#Willkommen-Text {
position: relative;
left: -5%;
top: 190px;
width: 775px;
height: 400px;
z-index: 8;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
margin: auto;
color: #FFF;
font-weight: lighter;
}
#background-photo {
position: relative;
left: 0px;
top: -250px;
width: 85%;
height: 500px;
z-index: 7;
background-image: url(DSCF7936-Bearbeitet760.jpg);
margin: auto;
}
#whiteoveraly {
position: relative;
width: 88%;
height: 200px;
z-index: 9;
background-image: url(overlaywhite-45pc.png);
margin: auto;
top: -720px;
}
.Willkommen-BIG {
font-size: 24px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: normal;
color: #FE4573;
font-style: normal;
word-spacing: normal;
letter-spacing: 0.2em;
}
.Willkommen-Text {
font-size: 13px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
font-weight: 200;
}
#apDiv1 {
position: absolute;
left: 582px;
top: 8px;
width: 221px;
height: 78px;
z-index: 1;
margin: auto;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #999;
}
a:active {
text-decoration: none;
}
}
</style>
</head>
<body>
<div id="center-line-bot1"></div>
<div id="center-line-top1"></div>
<div id="Navi-Restaurant"><span style="letter-spacing:0.2em"><a href="#" target="new">RESTAURANT </a> <a href="#">SPEISEKARTE</a> <a href="#">BUFFET</a> <a href="#">ANGEBOTE</a> <a href="#">ANFAHRT</a> <a href="#">KONTAKT</a></span></div>
<div id="center-line-top2"></div>
<div id="Willkommen-Text"><span class="Willkommen-BIG">HERZLICH WILLKOMMEN</span><br />
<br />
<br />
<span class="Willkommen-Text">Seit 1992 sind wir in Gevelsberg für Sie da.<br />
<br />
Im Lotus Garten bieten wir Ihnen <br />
<br />
Wir freuen uns auf Ihren Besuch!<br />
<br />
Ihr Lotusgarten-Team</span><br />
</div>
<div id="background-photo"></div>
<div id="whiteoveraly"></div>
<div id="center-line-bot2"></div>
<div id="Navi-Info"><span style="letter-spacing:0.2em">LOTUS GARTEN HAGENER STR. 409 45138 GEVELSBERG TEL. 02332 - 65 26 4 WWW.LOTUSGARTEN.COM</span></div>
</body>
</html> -
lui3000 -
Thanks
{{ DiscussionBoard.errors[9667461].message }} -
-
bakintime -
Thanks
{{ DiscussionBoard.errors[9807227].message }} -