✔ Überflüssige weiße Flächen -> erzeugt Scroll

Status
Nicht offen für weitere Antworten.
J

J1M1

Erfahrenes Mitglied
Hallo!

Ich habe ein vollkommen auf CSS und DIVs basierendes Layout erzeugt.
Das Problem ist, dass durch die Verwendung von Positionsangaben mit Minuswerten (so meine Vermutung), weiße Flächen enstehen, auf denen gar keine Elemente sind und somit überflüssig sind.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Hanrun Hu's Website</title>
<link rel="stylesheet" type="text/css" href="css/firefox.css">
<!--[if IE]>
  <style type="text/css">@import url(css/ie.css);</style>
<![endif]-->
</head>

<body>
<!--Header-->
<div id="header"></div>
<div id="banner"></div>

<!--Navigation-->
<div id="navigation">
<a href="">Home</a>
<a href="">Me&amp;&amp;MySelf</a>
<a href="">MyInterests</a>
<a href="">Multimedia</a>
<span id="last_update">Last Update: 19/03/08</span>
<span id="splitter"></span>
</div>

<!--Background-->
<div id="background"></div>

<!--Sidebar-->
<div id="sidebar">
<a href="">Announcement</a>
<a href="">Blog</a>
<a href="">Guestbook</a>
</div>

<!--Main-->
<div id="main">
<div id="top">
Announcement
<div id="side"><img src="../images/me&&myself.png" alt="me&&myself.png"></div>
<div id="topic_1"><div id="subtitle">Subtitle 1</div>
Lorem ipsum dolor <a href="bla.php">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="topic_x"><div id="subtitle">Subtitle X</div>
Lorem ipsum dolor <a href="bla.php">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="topic_x"><div id="subtitle">Subtitle X</div>
Lorem ipsum dolor <a href="bla.php">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="topic_x"><div id="subtitle">Subtitle X</div>
Lorem ipsum dolor <a href="bla.php">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor <a href="bla.php">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="bottom"></div>
</div>

<!--Footer-->
<div id="footer"></div>

</body>
</html>

Code: 
CSS:
body
{
width: 1025px;
}

#header
{
display: block;
position: relative;
top: 0px;
left: -10px;
width: 800px;
height: 100px;
background-image: url(../../images/header.png);
background-repeat: no-repeat;
z-index: 99;
}

#banner
{
display: block;
position: relative;
top: -80px;
left: -10px;
width: 1025px;
height: 153px;
background-image: url(../../images/banner.png);
background-repeat: no-repeat;
z-index: 1;
}

#navigation
{
display: block;
position: relative;
top: -80px;
left: -10px;
padding-left: 4px;
width: 1025px;
height: 40px;
background-image: url(../../images/navigation_bar_repeat_x.png);
font-family: Candara;
font-size: 15px;
font-weight: bold;
}

#navigation a 
{
display: inline-block;
position: relative;
float: left;
width: 98px;
height: 40px;
line-height: 40px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}

#navigation a:hover
{
color: #CDEAFD;
background-image: url(../../images/navigation_on_mouse_hover.png);
}

#navigation #last_update
{
display: block;
position: relative;
padding-left: 10px;
float: right;
width: 178px;
height: 40px;
background-image: url(../../images/last_update.png);
color: #223350;
font-family: Georgia;
font-size: 12px;
line-height: 40px;
z-index: 80;
}

#navigation #splitter
{
display: block;
position: relative;
float: right;
width: 9px;
height: 40px;
background-image: url(../../images/splitter.png);
}

#background
{
display: block;
position: relative;
top: -80px;
width: 660px;
height: 370px;
background-image: url(../../images/background.png);
}

#sidebar
{
display: block;
position: relative;
top: -390px;
left: 0px;
width: 191px;
height: 222px;
padding-top: 70px;
padding-left: 30px;
background-image: url(../../images/sidebar.png);
z-index: 70;
}

#sidebar a
{
display: block;
position: relative;
background-image: url(../../images/arrow.png);
background-repeat: no-repeat;
padding-left: 12px;
text-decoration: none;
font-family: Georgia;
font-size: 14px;
color: #455268;
line-height: 18px;
}

#sidebar a:hover
{
color: #5FA8D7;
font-weight: bold;
}

#main
{
display: block;
position: relative;
top: -700px;
left: 320px;
}

#main a
{
font-size: 14px;
font-weight: bold;
color: #223350; 
}

#main a:visited
{
font-weight: normal;
color: #223350; 
}

#main #top
{
display: block;
position: relative;
width: 660px;
height: 450px;
background-image: url(../../images/top.png);
background-repeat: no-repeat;
z-index: 69;
font-family: Candara;
font-size: 70px;
font-weight: bold;
color: #FFFFFF;
padding-top: 15px;
padding-left: 40px;
}

#main #top #side
{
display: block;
position: relative;
width: 100px;
height: 460px;
top: 20px;
left: -40px;
margin-bottom: -400px;;
z-index: 65;
}

#main #top #topic_1
{
position: relative;
float: left;
left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #topic_1 #subtitle
{
display: block;
position: relative;
width: 204px;
height: 40px;
background-image: url(../../images/subtitle_1.png);
margin-left: -23px;
padding-top: 13px;
padding-left: 23px;
font-size: 19px;
font-weight: bold;
z-index: 70;
}

#main #top #topic_x
{
position: relative;
float: left;
left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #topic_x #subtitle
{
display: block;
position: relative;
width: 204px;
height: 40px;
background-image: url(../../images/subtitle_x.png);
background-repeat: no-repeat;
margin-left: -23px;
padding-top: 13px;
padding-left: 23px;
font-size: 19px;
font-weight: bold;
z-index: 70;
}

#main #bottom
{
display: block;
position: relative;
float: left;
left: 95px;
width: 567px;
height: 173px;
background-image: url(../../images/bottom.png);
background-repeat: no-repeat;
}

#footer
{
display: block;
position: relative;
float: left;
top: -550px;
left: -550px;
width: 457px;
height: 73px;
background-image: url(../../images/footer.png);
}

-> http://ajage.aj.funpic.de

MfG J!M!
 
Zuletzt bearbeitet:
Hi,

entweder versuchst du das Layout anstelle der top-Positionswerten mit der margin-top-Eigenschaft umzusetzen, oder du musst damit leben, dass die Seite schon ohne jeglichen Inhalt gescrollt werden kann, denn die auf diese Weise relativ positionierten Elemente hinterlassen entsprechend dem gesetzten top-Wert eine Lücke im Textfluss, die von den nachfolgenden Elementen nicht automatisch aufgefüllt wird.

SELFHTML hat gesagt.:
Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.
Zum Vergrößern anklicken....
 
Ok, dankeschön.

CSS wurde wiefolgt abgeändert:
Code: 
body
{
width: 1025px;
}

#header
{
display: block;
position: relative;
margin-top: 0px;
margin-left: -10px;
width: 800px;
height: 100px;
background-image: url(../../images/header.png);
background-repeat: no-repeat;
z-index: 99;
}

#banner
{
display: block;
position: relative;
margin-top: -80px;
margin-left: -10px;
width: 1020px;
height: 153px;
background-image: url(../../images/banner.png);
background-repeat: no-repeat;
z-index: 1;
}

#navigation
{
display: block;
position: relative;
margin-top: 0px;
margin-left: -10px;
padding-left: 4px;
width: 1020px;
height: 40px;
background-image: url(../../images/navigation_bar_repeat_x.png);
font-family: Candara;
font-size: 15px;
font-weight: bold;
}

#navigation a 
{
display: inline-block;
position: relative;
float: left;
width: 98px;
height: 40px;
line-height: 40px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}

#navigation a:hover
{
color: #CDEAFD;
background-image: url(../../images/navigation_on_mouse_hover.png);
}

#navigation #last_update
{
display: block;
position: relative;
padding-left: 10px;
float: right;
width: 178px;
height: 40px;
background-image: url(../../images/last_update.png);
color: #223350;
font-family: Georgia;
font-size: 12px;
line-height: 40px;
z-index: 80;
}

#navigation #splitter
{
display: block;
position: relative;
float: right;
width: 9px;
height: 40px;
background-image: url(../../images/splitter.png);
}

#background
{
display: block;
position: relative;
margin-top: 0px;
width: 660px;
height: 370px;
background-image: url(../../images/background.png);
}

#sidebar
{
display: block;
position: relative;
margin-top: -300px;
margin-left: 0px;
width: 191px;
height: 222px;
padding-top: 70px;
padding-left: 30px;
background-image: url(../../images/sidebar.png);
z-index: 70;
}

#sidebar a
{
display: block;
position: relative;
background-image: url(../../images/arrow.png);
background-repeat: no-repeat;
padding-left: 12px;
text-decoration: none;
font-family: Georgia;
font-size: 14px;
color: #455268;
line-height: 18px;
}

#sidebar a:hover
{
color: #5FA8D7;
font-weight: bold;
}

#main
{
display: block;
position: relative;
margin-top: -330px;
margin-left: 320px;
}

#main a
{
font-size: 14px;
font-weight: bold;
color: #223350; 
}

#main a:visited
{
font-weight: normal;
color: #223350; 
}

#main #top
{
display: block;
position: relative;
width: 660px;
height: 450px;
background-image: url(../../images/top.png);
background-repeat: no-repeat;
z-index: 69;
font-family: Candara;
font-size: 70px;
font-weight: bold;
color: #FFFFFF;
padding-top: 15px;
padding-left: 40px;
}

#main #top #side
{
display: block;
position: relative;
width: 100px;
height: 460px;
margin-top: 20px;
left: -40px;
margin-bottom: -400px;;
z-index: 65;
}

#main #top #topic_1
{
position: relative;
float: left;
left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #topic_1 #subtitle
{
display: block;
position: relative;
width: 204px;
height: 40px;
background-image: url(../../images/subtitle_1.png);
background-repeat: no-repeat;
margin-left: -23px;
padding-top: 13px;
padding-left: 23px;
font-size: 19px;
font-weight: bold;
z-index: 70;
}

#main #top #topic_x
{
position: relative;
float: left;
margin-left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #topic_x #subtitle
{
display: block;
position: relative;
width: 204px;
height: 40px;
background-image: url(../../images/subtitle_x.png);
background-repeat: no-repeat;
margin-left: -23px;
padding-top: 13px;
padding-left: 23px;
font-size: 19px;
font-weight: bold;
z-index: 70;
}

#main #bottom
{
display: block;
position: relative;
float: left;
margin-left: 95px;
width: 567px;
height: 173px;
background-image: url(../../images/bottom.png);
background-repeat: no-repeat;
}

#footer
{
display: block;
position: relative;
float: left;
margin-top: 130px;
margin-left: -980px;
width: 457px;
height: 73px;
background-image: url(../../images/footer.png);
}

Doch warum bleibt immer noch an der rechten Seite ein Weißraum? Auch mit margin-right: -10px; habe ich es schon probiert, klappt ebenfalls nicht.

MfG J!M!
 
Vielleicht solltest du einfach mal die Polsterungseigenschaften des Viewports und Dokumentkörpers zurücksetzen:

Code: 
html,body {
margin:0;
padding:0;
}
dann brauchst du die Elemente auch nicht mit margin-left:-10px an den linken Fensterrand zu rücken. ;)
 
Ahhh.. wunderbar, danke, du hast mir sehr geholfen.

Hmmm, bloß im IE will das leider noch nicht recht funktionieren:
ie.css:
Code: 
html, body
{
margin: 0px;
padding: 0px;
width: 1025px;
}

#header
{
display: block;
position: relative;
margin-top: 0px;
margin-left: 0px;
width: 800px;
height: 100px;
background-image: url(../../images/header.png);
background-repeat: no-repeat;
z-index: 99;
}

#banner
{
display: block;
position: relative;
margin-top: -80px;
margin-left: 0px;
width: 1020px;
height: 153px;
background-image: url(../../images/banner.png);
background-repeat: no-repeat;
z-index: 1;
}

#navigation
{
display: block;
position: relative;
margin-top: 0px;
margin-left: 0px;
padding-left: 4px;
width: 1020px;
height: 40px;
background-image: url(../../images/navigation_bar_repeat_x.png);
font-family: Candara;
font-size: 15px;
font-weight: bold;
}

#navigation a 
{
display: inline-block;
position: relative;
float: left;
width: 98px;
height: 40px;
line-height: 40px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}

#navigation a:hover
{
color: #CDEAFD;
background-image: url(../../images/navigation_on_mouse_hover.png);
}

#navigation #last_update
{
display: block;
position: relative;
padding-left: 10px;
float: right;
width: 178px;
height: 40px;
background-image: url(../../images/last_update.png);
color: #223350;
font-family: Georgia;
font-size: 12px;
line-height: 40px;
z-index: 80;
}

#navigation #splitter
{
display: block;
position: relative;
float: right;
width: 9px;
height: 40px;
background-image: url(../../images/splitter.png);
}

#background
{
display: block;
position: relative;
margin-top: 0px;
margin-left: 0px;
width: 660px;
height: 370px;
background-image: url(../../images/background.png);
}

#sidebar
{
display: block;
position: relative;
margin-top: -300px;
margin-left: 0px;
width: 221px;
height: 292px;
padding-top: 70px;
padding-left: 30px;
background-image: url(../../images/sidebar.png);
z-index: 70;
}

#sidebar a
{
display: block;
position: relative;
background-image: url(../../images/arrow.png);
background-repeat: no-repeat;
padding-left: 12px;
text-decoration: none;
font-family: Georgia;
font-size: 14px;
color: #455268;
line-height: 18px;
}

#sidebar a:hover
{
color: #5FA8D7;
font-weight: bold;
}

#main
{
display: block;
position: relative;
margin-top: -330px;
margin-left: 320px;
}

#main a
{
font-size: 14px;
font-weight: bold;
color: #223350; 
}

#main a:visited
{
font-weight: normal;
color: #223350; 
}

#main #top
{
display: block;
position: relative;
width: 660px;
height: 450px;
background-image: url(../../images/top.png);
background-repeat: no-repeat;
z-index: 69;
font-family: Candara;
font-size: 70px;
font-weight: bold;
color: #FFFFFF;
padding-top: 15px;
padding-left: 40px;
}

#main #top #side
{
display: block;
position: relative;
float: left;
width: 100px;
height: 460px;
margin-top: 20px;
margin-left: -40px;
z-index: 65;
}

#main #top #topic_1
{
position: relative;
float: left;
margin-top: 50px;
margin-left: 20px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #topic_1 #subtitle
{
display: block;
position: relative;
width: 204px;
height: 40px;
background-image: url(../../images/subtitle_1.png);
background-repeat: no-repeat;
margin-left: -23px;
padding-top: 13px;
padding-left: 23px;
font-size: 19px;
font-weight: bold;
z-index: 70;
}

#main #top #topic_x
{
position: relative;
float: left;
margin-left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #topic_x #subtitle
{
display: block;
position: relative;
width: 204px;
height: 40px;
background-image: url(../../images/subtitle_x.png);
background-repeat: no-repeat;
margin-left: -23px;
padding-top: 13px;
padding-left: 23px;
font-size: 19px;
font-weight: bold;
z-index: 70;
}

#main #bottom
{
display: block;
position: relative;
float: left;
margin-left: 95px;
width: 567px;
height: 173px;
background-image: url(../../images/bottom.png);
background-repeat: no-repeat;
}

#footer
{
display: block;
position: relative;
margin-top: -35px;
margin-left: 0px;
width: 457px;
height: 73px;
background-image: url(../../images/footer.png);
}
 
Davon, dass es im IE an der rechten Seite immer noch einen kleinen Weißraum gibt, den ich im Firefox durch deinen Tipp mit margin:0;padding:0; wegbekommen habe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück