problema background con due nested div (uno position:relative)

**dogeht** · 06-10-2008, 10:18

voglio una "fascia orizzontale" sul mio sito, ad esempio l'header, con uno sfondo largo tutta la pagina e uno sfondo per la parte centrale (la pagina vera e propria, 800px). quindi ho optato per la soluzione che segue.

purtroppo, quando ridimensiono la finestra del browser (piccola larghezza) lo sfondo largo tutta la pagina scrolla e lascia scoperte delle zone...MOLTO STRANO!
l'effetto e' lo stesso sia su IE7 che FF3

CODICE:

codice:

<html><head><style>

body
{
	text-align: center;
}

#wrap
{
	background: yellow;
	height: 400px;
}

#inside
{
	width: 800px;
	position: relative;
	margin: 0px auto;
	background: red;
}

</style></head><body>

	<div id='wrap'><div id='inside'>
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
		se riduci la larghezza della finestra del brwoser, il background giallo scrolla!!!
	</div></div>

</body></html>

ED ECCO IL PROBLEMA IN AZIONE!

**dogeht** · 06-10-2008, 21:14

avevo postato un'immagine, ma e' scomparsa. forse ero fuori norma. ok.

cmq ho "risolto" nel senso che ho capito dov'era il problema. ed e' un grande problema! se qualcuno risponderà a questo thread dimostrando interesse, ne parlero', in caso contrario, arrisentirci a presto.

**pat7331** · 06-10-2008, 21:28

se metti le dimensioni in percentuale (non 800px ma 80%) si ridimensiona, non è un grande problema.

**Myaku** · 06-10-2008, 21:32

Originariamente inviato da dogeht
cmq ho "risolto" nel senso che ho capito dov'era il problema. ed e' un grande problema! se qualcuno risponderà a questo thread dimostrando interesse, ne parlero', in caso contrario, arrisentirci a presto.

sarebbe carino che postassi la "soluzione" comunque, magari fra qualche giorno o settimana a qualcuno potrebbe servire. Condividere non dovrebbe essere solo dalla parte chi cerca di aiutarti, ma anche dalla parte di chi è riuscito a cavarsela da solo quando magari nessuno è stato in grado di dargli una mano

e comunque, nel codice che hai postato non è dichiarato alcun doctype, e non vedo l'utilità di dichiarare un posizionamento a #inside

**dogeht** · 08-10-2008, 02:46

SOLUZIONE 1:
il background di inside dev'essere totalmente "opaco" in questo modo non si vede il gap sullo sfondo.

SOLUZIONE 2:
impostare un min-width (con la tecnica crossbrowser a vostro piacimento) ad #inside

PERCHE' #INSIDE HA POSITION:RELATIVE?
perche' all'interno vi piazzo elementi con absolute.
quelli non ce l'ho messi ma ho preferito lasciare position:relative per completare l'esempio

PERCHE' NON RENDERE #INSIDE 80%?
perche' solitamente creo template con LARGHEZZE fisse, come ho visto fare in almeno una 30ina di siti che ho studiato da vicino (ore e ore) e che sono considerati ottimi esempi di web design.

**pat7331** · 09-10-2008, 17:12

Se l'utente usa un piccolo monitor, un telefono cellulare o un palmare per visualizzare un sito con una larghezza fissa ha dei seri problemi se il corpo del sito prende l'intera pagina.
Il più banale fra tutti per chi ha un monitor piccolo è la barra di scorrimento orizzontale, io non la sopporto e se trovo siti così, li chiudo subito.
Il layout fluido è più portabile, quindi secondo me più giusto.

Discussione: problema background con due nested div (uno position:relative)

Strumenti discussione

Ricerca discussione

Visualizza

problema background con due nested div (uno position:relative)

Permessi di invio