pagina centrata, footer no!

**paolabacci72** · 19-03-2009, 21:01

ciao a tutti!
non riuscivo a centrare una pagina, poi tra varie ricerche è uscita la soluzione di inserire nel codice html
all'interno del body il tag <center>.
succede che viene centrato tutto tranne il footer! come mai? eppure è compreso all'interno del contenitore principale...perchè rimane invece a sinistra? qualcuno sa darmi una mano? grazie!!

riporto il codice html e sotto il css.

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>gif idea- grafica fotografia e illustrazione</title>

<link rel=”foglio_stile”type=”text/css” href=”home2.css”/>

</head>

<body>
<center>
<div id=”container1”>
<div id=”header”>
</div> <!—chiusura header→
<div id=”container2”>
<div id=”contenuti”>
</div> <!—chiusura contenuti→
</div> <!—chiusura container2→
<div id=”footer”>
</div> <!—chiusura footer→
</center>

</div><!—chiusura container1→

</body>

Html,Body {margin:0;padding:0;}
Body{font-family: arial,sans serif; font-size: 11px;}

div#container{
width: 760px;
margin: 0px auto;}

div#header{position: relative; background-color:#CCCCFF; width: 760px; height:100px; border-bottom: 1px solid white;}

div#contenuti{position: absolute; top: 27px; left: 27px; width:586px; height: 406; background-color:#FFFFFF;}

div#container2{position: relative; background-color:#003366; width:760px; height: 459px;}

Div#footer{
width: 760px; height: 40px; margin-left: 30px; background-color:#FF33CC; color:#FFFFFF;}

**paolabacci72** · 19-03-2009, 21:12

ciao di nuovo...niente ho risolto eliminando il contenitore esterno...il footer si attaccava a quello, non so perchè. così dovrebbe andare bene..ciao!

**Niniane** · 20-03-2009, 09:29

Ciao,

se hai risolto tanto meglio, mi permetto comunque di darti un paio di suggerimenti che possono servirti per la prossima volta.

1. L'uso del tag <center> nel body per centrare gli elementi è deprecato quindi meglio eliminarlo ed utilizzare i soli css per ottenere lo stesso risultato.

2. Nel codice che hai postato risulta che il container principale abbia l'id container1 mentre nel css lo definisci come div#container (invece che div#container1) quindi la regola css non funzionerebbe perché nella pagina html non c'è il div container. Questo naturalmente a meno che non si tratti di un errore che ti è scappato nel copiare il codice.

3. Per centrare tutto ciò che si trova all'interno di un contenitore basta dare a quel contenitore il margin:0 auto come giustamente hai fatto tu. Però nel tuo css il footer ha il margin-left: 30px, ritengo fosse questo il motivo per cui il footer ti rimaneva allineato a sinistra. Se vuoi che il footer sia centrato non devi dare margin ma lasciare che si allinei seguendo il contenitore principale.
Se, per un qualche motivo, il footer devi lasciarlo al di fuori di un contenitore principale ma vuoi comunque che sia allineato al centro basta che usi il margin: 0 auto anche per il footer.

In conclusione, non è necessario che elimini il contenitore esterno. Basta che togli il margin al footer e lasci che si allinei seguendo il contenitore padre.

Ciao!

**paolabacci72** · 20-03-2009, 17:48

ciao niniane!
ti ringrazio moltissimo per aver risposto ugualmente! sono, come avrai capito, alle ultra-primissime armi! adesso sto cercando di impostare il mio sito web, ho pensato che per imparare la cosa migliore è avere un progetto da portare avanti...
le tue informazioni quindi mi sono state molto molto preziose,

ancora grazie e alla prossima! (sicuramente scriverò ancora!) Ciao!

**paolabacci72** · 20-03-2009, 18:18

cia niniane,
visto che mi hai detto che il tag body è deprecato, ho provato a reinserire il contenitore principale, assegnandogli margin: 0 auto, ma non mi funziona. cioè, adesso è il contrario, ovvero il footer è centrato ed il resto no!

cosa ho combinato??

ecco il codice ed il css

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>gif idea- grafica fotografia e illustrazione</title>

<link rel=”foglio_stile”type=”text/css” href=”home4.css”/>

</head>

<body>
<div id=”container1”>
<div id=”header”>
<img src¬=”loghetto header.gif”>
</div> <!—chiusura header→
<div id=”container2”>
<div id=”contenuti”>
</div> <!—chiusura contenuti→
</div> <!—chiusura container2→
<div id=”footer”>
</div> <!—chiusura footer→
</div>
</body>

Html,Body {margin:0;padding:0;}
Body{font-family: arial,sans serif; font-size: 11px;}

Div#container1{margin:0 auto;}

div#header{position: relative; background-color:#CCCCFF; width: 760px; height:100px; border-bottom: 1px solid white;}

div#contenuti{position: absolute; top: 27px; left: 27px; width:586px; height: 406; background-color:#FFFFFF;}

div#container2{position: relative; background-color:#003366; width:760px; height: 459px;}

Div#footer{
width: 760px; height: 40px; background-color:#FF33CC; color:#FFFFFF;}

grazie!!!

**paolabacci72** · 20-03-2009, 18:19

ehm...pardon intendevo il tag center deprecato, non body!!!

**Niniane** · 23-03-2009, 13:37

Ciao,

scusa il ritardo nel risponderti.

Credo che il problema stia nel fatto che il tuo container1 non ha una dimensione.
Che sia in px in em o in percentuale è necessario che tu gli dia una dimensione per poterlo centrare grazie al margin: 0 auto;

Prova e vedi cosa succede.

**paolabacci72** · 23-03-2009, 13:53

figurati, anzi grazie della risposta...avevi ragioneeee!!!!
certo che quando si è agli inizi si fanno degli errori proprio sciocchi! grazie 1000!!

alla prossima!

**Niniane** · 23-03-2009, 21:13

Lieta di esserti stata d'aiuto nel chiarirti le idee.

Non sono errori sciocchi...solo inesperienza

Keep learning...bye

**paolabacci72** · 24-03-2009, 16:35

ciao di nuovo niniane!
approfitto di nuovo per un'altra domanda. Nel codice che segue vorrei che il div#contenuti sia visibile. In effetti dovrebbe stare sopra al div#container2, del quale è figlio.
sto tentando in tutti i modi, sapevo che se un figlio è in posizione absolute e il genitore è in position relative, se imposto dei valori al figlio di left, top etc esso dovrebbe posizionarsi in base a quei valori rispetto al genitore...giusto? A me non succede niente, non so come far vedere questo rettangolo bianco sopra al container2, ho provato anche con z-index...nulla!!! e sto impazzendo!!

ti posto il codice nuovamente, di sicuro ci sta qualche errore che purtroppo non riesco a vedere!

grazie!!!

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>gif idea - grafica fotografia e illustrazione</title>

<link rel=”foglio_stile”type=”text/css” href=”home16.css”/>

</head>

<body>
<div id=”container1”>
<div id=”header”>
<div id=”logoheader”><img src¬=”loghetto-header.gif”;>
</div>
</div> <!—chiusura header→
<div id=”container2”>
<div id=”contenuti”>
</div> <!—chiusura contenuti→
</div> <!—chiusura container2→
<div id=”footer”>
</div> <!—chiusura footer→
</div>

</body>
</html>

Html,Body {margin:0;padding:0;}
Body{font-family: arial,sans serif; font-size: 11px;}

div#container1{position: relative; width:760px; height: 600px; margin: 0 auto;}

div#header{background-color:#CCCCFF; z-index:3; width: 760px; height:100px;}

div#logoheader{position: absolute; left:20px; top: 9px; width:129px; height:80px;}

div#container2{position: relative; background-color:#003366; width:760px; height: 459px;}

div#contenuti{position: absolute; left: 27px; top: 30px; width:586px; height: 406; background-color:white; border: 3px solid-red;}

Div#footer{
width: 760px; height: 40px; margin: 0 auto; background-color:#FF33CC; color:#FFFFFF; margin: 0 auto;}

Discussione: pagina centrata, footer no!

Strumenti discussione

Ricerca discussione

Visualizza

pagina centrata, footer no!

risolto...grazie lo stesso!

Permessi di invio