width:100%, hintergrund wird abgeschnitten

[DaKKK]

Hi Leute,

ich stehe momentan etwas auf dem Schlauch. Und zwar habe ich ein Div mit 100% width, das eine Hintergrundgrafik hat, die sich in x-richtung wiederholt. Doch sobald man reinzoomt oder ne Auflösung kleiner als 1024x786 verwendet, wird die Hintergrundgrafik rechts abgeschnitten (siehe Bild)



Mein HTML-Code (ohne das Logo und die Navigation, da das Problem auch so besteht):

<div id="nav_bg">
 <div id="nav_wrapper">
<div id="nav_logo"><img src="http://www.psd-tutorials.de/forum/images/style/logo.gif" width="225" height="35" alt="logo" /></div>         
<div id="navMenu">            
 <ul>                 
 <li><a href="#">Über Uns</a>                     
 <ul id="liabout">                         
 <li><a href="#">Unsere Vorteile</a></li>                        
 <li><a href="#">Unsere Produktpalette</a></li>                     
 </ul> </li></ul>                
</div> 
</div>

Mein CSS:

html {     
height:101%; 
}  

body {
font-family:Helvetica, Tahoma, sans-serif;     
font-size:1em;     
color:#004781;     
background:url(../images/style/bg_01.jpg) repeat;     
height:101%;    
 }

#nav_bg {     
height:100px;        
width:auto;  
background:url(../images/style/navi_bg.jpg) repeat-x;     
border-bottom:5px solid #dedede; 
}  

#nav_wrapper {     
width:960px;     
height:100px;     
padding-top:40px;     
margin:auto; 
}

Kann mir da jemand helfen? Vielen Dank im Vorraus für eure Mühe

mfg

 

[fexx]

AW: width:100%, hintergrund wird abgeschnitten

link zur seite bitte

 

[scanner]

AW: width:100%, hintergrund wird abgeschnitten

Hallo DaKKK,
wo gibst Du denn die Weite mit 100% an?
Ich sehe da ein "width=auto", sprich das <div> zentriert sich, und eine feste Angabe mit 960px Breite.
Wenn Du entsprechend width=100% und repeat-x (evtl. noch mit Positionierung z.B. top left) angibst, sollte das schon funktionieren.

 

[DaKKK]

AW: width:100%, hintergrund wird abgeschnitten

@ fexx: die Seite ist noch nicht online, daher kann ich die leider nicht verlinken

@ scanner: danke für die Antwort. Ich habe ausversehen den falschen Code (einen testcode) der ID #nav_bg kopiert.

Hier mein richtiger:

#nav_bg {
    height:100px;
    width:100%;
    background:url(../images/style/navi_bg.jpg) repeat-x;
    border-bottom:5px solid #dedede;
}

Es funktioniert dennoch nicht.

 

[piepel]

AW: width:100%, hintergrund wird abgeschnitten

Meinst du so was hier?

 

[DaKKK]

AW: width:100%, hintergrund wird abgeschnitten

Meinst du so was hier?

nein, nicht wirklich ,

aber ich habe es glaube ich hinbekommen.
Ich habe der ID nav_bg ein min-width hinzugefügt. Nun geht es.
Besteht halt noch das Problem, dass IE7 und kleiner das nicht verstehen. Aber vllt. gibts da ja noch alternativen

 

[scanner]

AW: width:100%, hintergrund wird abgeschnitten

Hallo DaKKK,
so wie ich das sehe, solltest Du Dein #nav-Div in ein übergeordnetes Div mit einer Deklaration "min-width" legen: z.B.
.container {width:100%; min-width:960px;}

--- Ahh, da habe ich zu langsam getippt
Viel Erfolg!

 

[DaKKK]

AW: width:100%, hintergrund wird abgeschnitten

Da war ich ein bisschen schneller scanner

Aber vielen Dank für deine Hilfe! Das gilt natürlich auch für die anderen