Problemi a centrare pagina

**totano79** · 18-06-2018, 18:29

Salve ragazzi, sono nuovo e vi ringrazio in anticipo per l'aiuto che mi darete.

Come da titolo ho problemi a centrare il contenuto del sito nella pagina

questo è il codice

codice:

<!DOCTYPE html>
<html>

<style type="text/css">
body
{
margin: 0 auto;
}
#header
{
width: 100%;
max-width: 950px;
text-align: center;
background-color: #fff;
}
#container
{
width: 100%
max-width: 950px;
text-align: center;
background-color: #fff;
padding-bottom: 180px;

}
#footer
{
position: fixed;
bottom: 0;
width: 100%;
max-width: 950px;
text-align: center;
background-color: #fff;
}
</style>

<body>
<center>

<div id="header">
<img src="img/HEADER.png" width=100% >
</div>


<div id="container">
<img src="img/CONTAINER.png" width=100% >
<img src="img/CONTAINER.png" width=100% >
<img src="img/CONTAINER.png" width=100% >
</div>



<div id="footer">
<img src="img/FOOTER.png" width=100%>
</div>

</center>
</body>

</html>

e questo è il risultato

http://sitoprovatgrbrtb.altervista.org/

ho usato delle immagini per semplificare, come potete vedere i "container" sono a tutta larghezza nonostane abbia messo "max-width: 950px" e il footer sta tutto a sinistra.

ho creato un'appplicazione con appsgeyser e il risultato è questo

apk.jpg

il container sta centrato, header centrato ma non al 100% e il footer sta sempre per gli affari suoi.

se potete aiutarmi vi ringrazio perche non riesco a capire il motivo.

**Vincent.Zeno** · 19-06-2018, 17:35

ti propongo il codice corretto in modo che tu possa apprezzarne le differenze.

codice:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin: 0 auto;
}
#header
{
margin:auto;
width: 100%;
max-width: 950px;
text-align: center;
background-color: #fff;
}
#container
{
margin:auto;
width: 100%;
max-width: 950px;
text-align: center;
background-color: #fff;
padding-bottom: 180px;


}
#footer
{
margin:auto;
position:fixed;
left:0;
right:0;
bottom: 0;
width: 100%;
max-width: 950px;
text-align: center;
background-color: #fff;
}
</style>
</head>

<body>


<div id="header">
<img src="img/HEADER.png" style="width:100%;" >
</div>




<div id="container">
<img src="img/CONTAINER.png" style="width:100%;" >
<img src="imgCONTAINER.png" style="width:100%;" >
<img src="img/CONTAINER.png" style="width:100%;" >
</div>


<div id="footer">
<img src="img/FOOTER.png" style="width:100%;" >
</div>


</body>


</html>

ricorda di utilizzare sempre il tag [CODE][/CODE] per postare codice sul forum, grazie

**totano79** · 19-06-2018, 20:40

Ciao Vincent, grazie per la risposta, funziona alla perfezione!

anche su mobile va bene. Grazie ancora

Discussione: Problemi a centrare pagina

Strumenti discussione

Ricerca discussione

Visualizza

Problemi a centrare pagina

Permessi di invio