• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

website nach rechts scrollbar ?

hektima

Neues Mitglied
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;
}
 
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.
 
Ich habe aber noch nicht die Ursache gefunden
Warum nicht? Mit dem Firebug fällt das sofort auf! :(
HTML:
#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!
 
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.
 
Zurück
Oben