Szerokość html 100% nie działa

Występują pewne problemy z moim HTML, więc publikuję kod.Szerokość html 100% nie działa

Pierwszy tag to div z id="header". Dałem mu 100% szerokości i nadałem mu obraz tła.

Wewnątrz nagłówka znajduje się kolejny div z id="header-contents". Chcę go wyśrodkować na stronie, więc podałem mu szerokość, a następnie margin:0 auto. To działa dobrze z przeglądarki o maksymalnej wielkości, ale kiedy powiększam lub zmniejszam szerokość przeglądarki do około połowy, tło nagłówka div zaczyna znikać w pewnym momencie i nie wypełnia 100% szerokości.

Jak to wygląda na pierwszy (i zawsze powinien wyglądać): intended look http://i49.tinypic.com/3505fnk.png

Jak to wygląda, kiedy powiększyć lub zmienić wielkość przeglądarkę: after resize http://i46.tinypic.com/2lqg7r.png

Jaka jest właściwa HTML i CSS dla tego? Oto kod:

<!DOCTYPE HTML> 
<html> 
<style> 
body 
{ 
    margin:0; 
    padding:0; 
} 
.clear 
{ 
    display:block; 
    clear:both; 
} 
#header 
{ 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
} 
#head-contents 
{ 
    width:974px; 
    margin:0 auto; 
    height:156px; 
} 
#header ul 
{ 
    margin:85px 23px 0 0; 
    float:right; 
    list-style-type:none; 
} 
#header ul li 
{ 
    display:inline; 
} 
#header ul li a 
{ 
    margin-left:46px; 
    font-size:19px; 
    color:#fff; 
    text-decoration:none; 
} 
#header ul li a:hover , 
#header ul li a.active 
{ 
    color:#FD7600 
} 
</style> 
<body> 
<div id="header"> 

<div id="head-contents"> 

<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" /> 

<ul> 
<li><a href="#" class="active">Home</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 

<div class="clear"></div> 

</div> 

</div> 

</body> 

</html>

Źródło

2012-06-25 UmeRonaldo

Trzeba nauczyć się korzystać jsfiddle więc możemy pomóc łatwiejsze. wygoogluj to! – Samson

Oto skrzypce http://jsfiddle.net/eYrg8/ – UmeRonaldo

Jest to arkusz stylów, który pracuje ze mną:

body{  
    margin:0;  
    padding:0; 
} 
    .clear{  
    display:block; 
    clear:both; 
}  
    #header{ 
    min-height:156px; 
    display: block; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
} 
    #head-contents{  
    width:974px;  
    margin-left:200px; 
    height:156px; 
} 
    #header ul {  
    margin:85px 23px 0 0;  
    float:right; 
    list-style-type:none; 
} 
    #header ul li {  
    display:inline; 
}  
    #header ul li a { 
    margin-left:46px; 
    font-size:19px; 
    color:#fff; 
    text-decoration:none; 
} 

    #header ul li a:hover ,  
    #header ul li a.active {  
    color:#FD7600; 
}

Zmiana rozmiaru okna i ustawienie marginesów na auto będzie przykręcić pozycję swojej wewnętrznej div bo to s szerokość nie pasuje do okna.

Źródło

2012-06-25 20:32:37 Samson

Szukam rozwiązania – UmeRonaldo

kliknij łącze! :) – Samson

zrobiłem, myślę, że nie zrobił mój problem wystarczająco jasne. – UmeRonaldo

Wyjąć właściwość background-image z #header i zastosować styl do znacznika body:

background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

Nie będziesz już mieć problemu opisałeś. Teraz wystarczy wyciąć obraz tła na wysokość 156 pikseli, używając pakietu oprogramowania do edycji grafiki, takiego jak Photoshop.

Edycja: tutaj jest aktualizowany jsfiddle przedstawiający rozwiązanie: http://jsfiddle.net/eYrg8/35/

Źródło

2012-06-25 21:33:39 Rob

znalazłem rozwiązanie:

#header { 
    height: 156px; 
    min-width: 990px; 
    background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
    display: block; 
} 

#head-contents { 
    width: 974px; 
    margin: 0 auto; 
    height: 156px; 
}

To wszystko kwestia min-width w #header. Sprawdziłem stronę logowania na Facebooku i wymyśliłem.

Źródło

2012-06-26 08:30:13 UmeRonaldo

Working FIDDLE Demo

należy ustawić width twoich head-contents jako min-width twoich header:

#header { 
    min-height:156px; 
    display: block; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 

    min-width: 974px; /* this is width of head-contents */ 
}

Źródło

2013-05-21 02:30:08

#header { 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
}

Źródło

2014-09-13 15:18:02

Odpowiedz

Powiązane problemy