website nach rechts scrollbar ?

[hektima]

Hallo habe ein Problem mit meinem Css

Die Website kann nach rechts gescrollt werden....kann mir jemand helfen, wo die Fehlerquelle liegt? danke

CSS:

*{
margin:0;
border:0;
padding:0;
text-decoration:none;
list-style-type:none;
font-family:Verdana;
}
html,body{
background-color:#fff;
color:#000;
width:100%;
}
#headbg{
margin:100pxauto;
}
#head{
margin:auto;
width:100%;
height:170px;
margin-top:-100px;
background-image:url(img/header-und-schatten.jpg);
}
#logo {
height:130px;
float:left;
width:300px;
margin-left:415px;
margin-top:15px;
background:url(img/logo.png) no-repeatlefttop;
}
#Navigation {
position:absolute;
font-size:18px;
margin-left:240px;
margin-top:100px;
width:100%;
height:40px;
display:inline;
float:right
}
.clear {clear:both;}
#Navigation ul li {
display:inline;
width:auto;
margin-right:8px;
}
#Navigation ul li#menu-item-1:hover,
#Navigation ul li#menu-item-1.active{
background-image:url(img/navi_hover_background.jpg);
}
#Navigation ul li#menu-item-2:hover,
#Navigation ul li#menu-item-2.active{
background-image:url(img/navi_hover_background.jpg);
}
#Navigation ul li#menu-item-3:hover,
#Navigation ul li#menu-item-3.active{
background-image:url(img/navi_hover_background.jpg);
}
#Navigation ul li#menu-item-4:hover,
#Navigation ul li#menu-item-5.active{
background-image:url(img/navi_hover_background.jpg);
}
#Navigation ul li#menu-item-5:hover,
#Navigation ul li#menu-item-5.active{
background-image:url(img/navi_hover_background.jpg);
}
#body{
background-color:#fff;
height:auto;
min-height:1200px;
margin:auto;
width:1400px;
}
#image {
position:absolute;
margin:auto;
float:left;
margin-top: -10px;
margin-left:200px;
}
#content{
position:absolute;
float:left;
font-size:14px;
padding:10px;
color:#3e3e3e;
margin-top:80px;
margin-left:550px;
line-height:150%;
}
#content h2.module_title{
color:#942642;
font-weight:normal;
padding-bottom:5px;
font-size:20px;
/*text-shadow:#010 -2px -2px 2px;
filter:Shadow(Color=#010,Direction=315,Strength=2);*/
}
#content h2.module_title.place_first_module{
margin-top:0;
}
#content div.module_container{
margin-left:0px;
width:650px;
}
#box_head2{
position:absolute;
background-image:url(img/kasten_oeffnungszeiten_head.jpg);
width:250px;
margin-left:200px;
height:56px;
margin-top:332px;
z-index:2;
}
#maginal{
position:relative;
float:left;
width:300px;
padding:10px;
color:#3E3E3E;
padding-top:50px;
line-height:150%;
font-family:Verdana;
font-size:14px;
text-align:left;
}
#maginal div.module_container{
position:relative;
margin:0 auto;
width:330px;
margin-left:190px;
padding-top:23px;
}
#maginal h2.module_title{
padding-top:30px;
padding-right:5px;
height:20px;
background:url(img/kasten_kontakt_head.jpg) no-repeatlefttop;
z-index:1;
}
#maginal div.module_box{
color:#45111D;
padding:10px20px;
background:url(img/kasten_body.jpg) repeat-ylefttop;
}
#maginal div.module_container{
padding-bottom:20px;
background:url(img/kasten_footer.jpg) no-repeatleftbottom;
}
.clear{clear:both;}
#foot{
background-image:url(img/footer-und-schatten.jpg);
margin:auto;
font-family:Verdana;
font-size:12px;
width:1920px;
height:59px;
margin-top: -95px;
bottom:0px;
text-align:center;
padding-top:20px;
color:#852139;
}
#foot a{
text-decoration:none;
color:#4e1716;
}
#foot a:hover{
color:#3D3D83;
}
input,select,textarea{
border:1pxsolid#111;
font-size:1em;
background:#333;
color:#aaa;
}
input,option,textarea{
padding:2px;
background:#FFFFFF;
color:#aaa;
}
.submit{
background:#222;
color:#aaa;
}

 

[bdt600]

Ein Link zur Seite wäre besser als der CSS-Code

 

[hektima]

ja testseite unter http://s180731598.online.de

 

[bdt600]

Ein Tipp: benutze den Firefox mit installiertem Addon Firebug, damit erkennst du, welche Elemente so weit nach rechts rausgehen. ;)

Und wozu position:absolute? Damit handelt man sich mehr Probleme als Lösungen ein.

 

[hektima]

Ich habe aber noch nicht die Ursache gefunden...hat jemand eine Idee?

 

[bdt600]

Ich habe aber noch nicht die Ursache gefunden

Warum nicht? Mit dem Firebug fällt das sofort auf! :(

#Navigation {
position:absolute;
font-size:18px;
margin-left:240px;
margin-top:100px;
width:100%;
height:40px;
display:inline;
float:right
}

Bei einer Breite von 100% und margin-left von 240px verschiebst du doch alles!

 

[hektima]

jo danke das wars....Position fixed hilft hier schon ....

 

[Tronjer]

jo danke das wars....Position fixed hilft hier schon ....

Tut es nicht, und bevor du in das nächste Problem läufst, nenne ich dir noch ein paar Dinge die du fixen solltest:

- Ein HTML5 Dokument braucht keinen XML Namespace im Head.
- Die Umwandlung von #Navigation in ein Inline-Element ist sinnfrei
- Wie alles andere, so schreibt man in HTML auch die IDs klein (#navigation)
- #head auf eine width von 1920px zu setzen, erzeugt bei jedem User, dessen Browser-Viewport kleiner ist, einen Scrollbalken.
- Das Attribut position solltest du nach Möglichkeit vermeiden, und zwar nicht nur in Verbindung mit absolute sondern auch für relative und fixed. Positioniere Elemente ausschließlich mit margin und padding.