posizionamento delle sfumature laterali... sto perdendo la testa

**xnavigator** · 06-06-2005, 22:25

in pratica ( seguendo il tutorial su pro.html ) ho creato le sfumature laterali con un img che al centro ha uno spazio bianco di 724px e ai lati le sfumature.

fin qui tutto bene.

ecco xhtml

codice:

<body>
 <div id="parent">
  <div id="child">
   bla bla bla bla bla
   <div id="footer">
    bla bla
   </div>
  </div>
 </div>
</body>

ecco il css

codice:

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	
}


div#parent {
	background: #FFFFFF url(img) repeat-y center;
}

div#child {
	text-align: left;
	margin: 0px auto;
	width: 723px;
}


div#footer {
	background-color:#F4F4F4;
}

il problema come si vede nell'immagine allegata e che rimane un px tra il footer e il bordo destro.

ora voi direte: be ovvio hai messo il #child largo 723 quando hai detto che lo spazio dell img è 724.

bene: mettendo il #child a 724 viene "mangiato" pixel del bordo sinistro e comunque rimane il pixel di spazio a destra.

come faccio?
ho iniziato oggi a strutturare con i div qualunque consiglio è ben accetto

**vicky** · 06-06-2005, 23:22

io correggerei così:

codice:

<body>
 <div id="parent">
  <div id="child">
   bla bla bla bla bla  </div>
   <div id="footer">
    bla bla
   </div>
 </div>
</body>

e per il css:

codice:

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
        background: #FFFFFF url(img) repeat-y center;
}


div#parent {
            width: 723px;
}

div#child {
	text-align: left;
	margin: 0px auto;

        background:#ffffff;
}


div#footer {
	background-color:#F4F4F4;
	}

Dimmi come va.

**xnavigator** · 06-06-2005, 23:36

[editato]

**xnavigator** · 06-06-2005, 23:36

uguale. il px riamne sempre.

codice:


<?xml version="1.0" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
    background: #FFFFFF url(back.gif) repeat-y center;
}


div#parent {
			margin:0 auto;
            width: 723px;
}

div#child {
	text-align: left;
    background:#ffffff;
}


div#footer {
	background-color:#F4F4F4;
}


-->
</style>
</head>

<body>
 <div id="parent">
  <div id="child"> bla bla bla bla bla  </div>
  <div id="footer"> bla bla </div>
 </div>
</body>

</html>

**vicky** · 07-06-2005, 08:15

Se ho capito bene (ma forse mi sbaglio) tu vuoi avere l'effetto del foglio bianco con delle sfumature laterali grigie, ma il footer deve essere grigio.es:www.datarchivi.it (anche se nel mio caso il footer è bianco)
In questo caso io sto utilizzando un'immagine di sfondo che non è affatto bianca in centro ma è tutta grigia, sfumata lateralmente verso il grigio chiaro.
Poi sarà il colore del child a darmi il bianco del foglio.
Lo sfondo del body invece deve essere del colore della sfumatura (cioè dello stesso grigio chiaro altrimenti si vede lo stacco.
Facendo così il footer lo posso fare del colore che voglio ma mi arriva esattamente a coprire tutta la larghezza del parent.

**xnavigator** · 07-06-2005, 08:36

Originariamente inviato da vicky
Se ho capito bene (ma forse mi sbaglio) tu vuoi avere l'effetto del foglio bianco con delle sfumature laterali grigie, ma il footer deve essere grigio.es:www.datarchivi.it (anche se nel mio caso il footer è bianco)
In questo caso io sto utilizzando un'immagine di sfondo che non è affatto bianca in centro ma è tutta grigia, sfumata lateralmente verso il grigio chiaro.
Poi sarà il colore del child a darmi il bianco del foglio.
Lo sfondo del body invece deve essere del colore della sfumatura (cioè dello stesso grigio chiaro altrimenti si vede lo stacco.
Facendo così il footer lo posso fare del colore che voglio ma mi arriva esattamente a coprire tutta la larghezza del parent.

capito. proverò con il tuo metodo ma penso sia la stessa cosa.

**xnavigator** · 07-06-2005, 10:43

sono riuscito a farlo.
il problema è che IE (

) ridimensionando la finestra in certi punti tagliava quel px di sinistra...

comunque ora avrei un'altro quesito: come faccio a far scendere il footer fino in basso?

ho provato con height:100% ma FF non ne vuole sapere...

**vicky** · 07-06-2005, 14:33

Sicuramente troverai qualcuno che sa fare meglio di me, io comunque l'ho portato in fondo scrivendo nel footer:

bottom:0;

ed impostando nel child:

height in px (nel mio caso 725px)

Lo vedo in fondo sia on IE che con FF

Discussione: posizionamento delle sfumature laterali... sto perdendo la testa

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento delle sfumature laterali... sto perdendo la testa

Permessi di invio