2012-06-25 34 views
7

Ci sono alcuni problemi con il mio HTML, quindi sto postando il codice.Html div width 100% non funziona

Il primo tag è un con id="header". Ho dato il 100% di larghezza e gli ho dato un'immagine di sfondo.

All'interno l'intestazione c'è un altro div con id="header-contents". Lo voglio centrato sulla pagina, quindi gli ho dato una larghezza e poi margin:0 auto. Funziona perfettamente con il browser di dimensioni massime, ma quando ingrandisco o ridimensiono la larghezza del browser a circa la metà, lo sfondo del div dell'intestazione inizia a scomparire in qualche punto e non riempie la larghezza del 100%.

Questo è come appare in un primo momento (e dovrebbe sempre guardare): intended look http://i49.tinypic.com/3505fnk.png

Questo è come appare quando ho Zoom o ridimensionare il browser: after resize http://i46.tinypic.com/2lqg7r.png

Qual è il corretto HTML e CSS per questo? Ecco il codice:

<!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> 
+0

Si dovrebbe imparare ad usare jsfiddle in modo che possiamo aiutare più facile. google! – Samson

+0

Ecco il violino http://jsfiddle.net/eYrg8/ – UmeRonaldo

risposta

0

Questo è il foglio di stile che lavora con me:

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; 
} 

Ridimensionamento della finestra e impostando i margini in auto sarà avvitare la posizione del div interno perché s di larghezza non si adatta alla finestra

+0

Sto cercando una soluzione – UmeRonaldo

+0

clicca sul link! :) – Samson

+0

l'ho fatto, penso di non aver reso il mio problema abbastanza chiaro. – UmeRonaldo

0

Estrarre la proprietà background-image da #header e applicare questo stile al tag body:

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

Lei non avrà più il problema che hai descritto. Tutto quello che devi fare ora è tagliare l'immagine di sfondo ad un'altezza di 156px, usando un pacchetto software di fotoritocco come Photoshop.

Edit: ecco il jsfiddle aggiornata che mostra la soluzione: http://jsfiddle.net/eYrg8/35/

6

ho trovato la soluzione:

#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; 
} 

E 'tutta una questione di min-width in #header. Ho controllato la pagina di accesso di Facebook e l'ho capito.

4

Working FIDDLE Demo

È necessario impostare la width del vostro head-contents come min-width del vostro 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 */ 
} 
0
#header { 
    min-height:156px; 
    width:100%; 
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); 
}