Problema con Div width 100% e ridimensionamento pagina

**GraFXer.Art** · 21-09-2012, 23:09

Salve a tutti. Ho un problema per quanto riguarda un div con un width a 100%, ossia lungo tutta la pagina visualizzabile.
Prima di tutto specifico che questo div non'è l'unico ad avere un width 100% ma ce ne sono altri 4, e seconda cosa al centro della pagina deve essere presente un div dalla larghezza fissa (diciamo 950px) ma l'altezza si adatta automaticamente al contenuto. Tale div deve rimanere al centro esatto della pagina.

Il problema sta nel fatto che, avendo una risoluzione da 1920*1080, la resa grafica è perfetta, i 4 div sono lunghi quanto tutta la pagina e al centro c'è l'altro div dalla larghezza fissa, ma quando vado a ridimensionare la pagina, appena il browser diventa più stretto della larghezza del div centrale (quindi meno di 950 px) i 4 div da width 100% si spostano verso sinistra, e quindi perdendo l'efficacia del width 100%.

Vi faccio vedere cosa accade:
Questo è ciò che vedo al massimo della risoluzione

Questo è ciò che accade quando il browser è più piccolo di 950px

Il div bianco stà perfettamente al centro e non viene nascosto, invece i div verdi si spostano verso sinistra.
Qual'è il problema?

Vi posto il codice di un div da width 100% (gli altri hanno il codice uguale)

codice:

#div {
height: 20px;
width:100%;
background:url(../img/*****), repeat;  
}

Questo è il body

codice:

*{	
	vertical-align:baseline;
	border:0;
	outline:0;
	margin:0 auto;
	padding:0;
	height:100%;
	width:100%
}


html, body {	
	background:#999;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#FFF;
}

**codencode** · 22-09-2012, 09:36

Sarebbe meglio dare un'occhiata a tutto il codice.

**GraFXer.Art** · 22-09-2012, 11:05

Alla fine i div si ripetono, sono quasi tutti uguali, comunque questo è il css:

codice:

html, body {	
	background:#FFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#FFF;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	border:0;
}

#div width 100%_1 {
	height:50px;
	background:#999;
	width:100% !important;
	margin:0;
}

#div width 100%_2 {
	height:150px;
	background:#666;
	width:100% !important;
	margin:0;
}

#div centrato{
	margin:0 auto;
	margin-top:50px;
	margin-bottom:50px;
	height: auto !important;
	width:950px;		
	background-color:#333;
}

#div width 100%_3 {
	height:50px;
	background:#666;
	width:100% !important;
	margin:0;
}

#div width 100%_4 {
	height:150px;
	background:#999;
	width:100% !important;
	margin:0;
}

E questo è il codice HTML:

codice:

<body>
	<div id="div width 100%_1">
	</div>

	<div id="div width 100%_2">
	</div>

	<div id="div centrato">
	</div>

	<div id="div width 100%_3">
	</div>

	<div id="div width 100%_4">
	</div>
</body>

Il codice html è molto semplice, il problema sta nei css di sicuro.
Tra l'altro ho notato diversi siti internet già presenti sul web, molto ben curati, che hanno questo stesso problema, cioè che il div che ha il width a 100% non mantenga la sua posizione quando la pagina si restringe!
Altri siti inutile dire che questo problema non ce l'hanno.
Mi auguro di risolvere questo problema

**cassano** · 22-09-2012, 11:26

Ma scusa non dovrebbe essere cosi ?

codice:

div#width 100%_4 {
	height:150px;
	background:#999;
	width:100% !important;
	margin:0;
}

**GraFXer.Art** · 22-09-2012, 11:29

No cassano il nome Div Width 100%_4 che ho dato allo stile è puramente indicativo, in realta il mio div id non ha questo nome, è per farvi capire a voi cosa voglio ottenere.

**ac_socmel** · 22-09-2012, 11:30

Originariamente inviato da GraFXer.Art

codice:

html, body {	
	background:#FFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#FFF;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	border:0;
}

#div width 100%_1 {
	height:50px;
	background:#999;
	width:100% !important;
	margin:0;
}
...

tira fuori il codice vero

questo è impossibile che funzioni

**codencode** · 22-09-2012, 11:33

@GraFXer.Art di certo il codice postato è sbagliato.
Nell'HTML non vanno lasciati spazi nel nome degli id e nel CSS le chiamate verso i vari div, come segnalato da @cassano, sono errate.

**codencode** · 22-09-2012, 11:34

Ok, ho letto adesso la tua precisazione.

**GraFXer.Art** · 22-09-2012, 11:40

Avevo semplificato il codice per venirvi in aiuto, comunque questo è il codice interamente preso dal mio css:

codice:

html, body {	
		background:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:12px;
		color:#FFF;
		margin:0;
		padding:0;
		height:100%;
		width:100%;
		border:0;
}


/* Parte alta menù */
#premenu {
		height: 20px;
		width:100% !important;
		background:url(../img/sf2.png), repeat;
		margin:0;
}


/* Sfondo menù */
#sfmenu {
		height: 150px;
		width:100% !important;
		background:url(../img/sf3.png), repeat;
		margin:0;
}


/* Menuù */
#menu {
		margin: -50px 0 0 0;
		height: 50px;
		width:100% !important;
		background:url(../img/sf5.png) 5px bottom repeat-x;
}


/* Immagine Sfondo */
#sf {
		height: 350px;
		width:100% !important;	
		background:url(../img/bg_image.jpg) 50% 0px repeat-x;
		margin:0;
}


/* Contenuto */
#content {
		margin:0 auto;
		margin-top:50px;
		margin-bottom:50px;
		height: auto !important;
		width:950px;		
		background-color:#FFF;
}


/* Piè pagina */
#foot {
		height: 200px;
		background:url(../img/sf_footer1.png) repeat;
		width:100% !important;
		margin:0;
}


/* Post piè pagina */
#postfoot {
		height:50px;
		background:url(../img/sf_footer2.png) repeat;
		width:100% !important;
		margin:0;
}

E questo è l'HTML:

codice:

<body>

	<div id="premenu">
	</div>

	<div id="sfmenu">
	</div>

	<div id="menu">
	</div>

	<div id="sf">
	</div>

	<div id="content">
    
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
    
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
    
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
    
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
    
prova
prova
prova
prova
prova
prova
prova
prova
prova
prova
	</div>

	<div id="foot">
	</div>

	<div id="postfoot">
	</div>

</body>

**codencode** · 22-09-2012, 11:51

Aggiungi ai div con larghezza 100% una min-width:950px

Discussione: Problema con Div width 100% e ridimensionamento pagina

Strumenti discussione

Ricerca discussione

Visualizza

Problema con Div width 100% e ridimensionamento pagina

Permessi di invio