Centrare un sito nel browser

**mokkia.art** · 28-05-2012, 14:13

Ciao a tutti.
Vorrei creare un sito che sia sempre centrato nel browser, a prescindere dalla larghezza della finestra e dalla risoluzione del monitor. Nella mia pagina html ho messo intorno a tutto un div #wrapper (che non ha un corrispondente nello style e nemmeno nel css), subito dentro al wrapper ho messo un div contenitore che ha le seguenti caratteristiche:
#contenitore {
position:relative;
width:1000px;
height:750px;
margin:0 auto;
}
All'interno del contenitore ho poi sistemato i vari contenuti. Ma quando visualizzo il sito nel browser, allargando o accorciando la finestra il sito rimane sempre decentrato a sinistra.

Sapete dirmi dove ho sbagliato? Grazie!
Monica

**totsdesign** · 28-05-2012, 14:34

al #wrapper prova a mettere width:100% e height:100%

**carlomarangoni** · 28-05-2012, 14:51

codice:

#wrapper {
position absolute;
top: 50%,
left: 50%;
width:1000px;
height:750px;
margin: -375px 0 0 -500px;
}
#contenitore {
position:relative;
width:1000px;
height:750px;
}

**mokkia.art** · 28-05-2012, 16:34

Niente da fare...
Vi metto tutto il codice.

html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titolo del sito</title>
<link rel="stylesheet" type="text/css" href="fogliodistile.css">

<style>

body {
background-image:url(Immagini/home/fondo_home.jpg);
background-repeat:repeat-x;
background-color:#dfdccd;
width:150px;
height:149px;
}

</style>

</head>

<body>
<div id"wrapper">
<div id="contenitore">
<div id="logo_home">
[img]Immagini/home/logo_home.png[/img]
</div>

<div id="giuseppe_home">
Nome
</div>

<div id="menu_home">
<ul class="spaziata">
About Me Portfolio Contacts
[/list]
</div>
</div>
</div>

</body>
</html>

css:

@charset "UTF-8";
/* CSS Document */

.spaziata {
word-spacing: 3em;
}

#logo_home {
position:absolute;
left:600px;
top:100px;
}

#nome_home {
position:absolute;
left:450px;
top:270px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:45px;
width:465px;
height:50px;
}

#menu_home {
position:absolute;
top:360px;
left:400px;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
text-align:center;
width:530px;
height:34px;
}

#contenitore {
position:relative;
width:1000px;
height:750px;
}

#wrapper {
position:absolute;
top:50%;
left:50%;
width:100%;
height:750%;
margin: -375px 0 0 -500px;
}

**mokkia.art** · 28-05-2012, 16:38

P.S.
Il wrapper ho provato a metterlo sia come l'ho scritto su, sia così:

#wrapper {
position:absolute;
top:50px;
left:50px;
width:100%;
height:750%;
margin: -375px 0 0 -500px;
}

**Mich_** · 28-05-2012, 16:58

La soluzione corretta e` unmiscuglio di quelle proposte.

Pero` dare il 100% ad un blocco ha senso solo se il suo contenitore ha dimensioni definite.

E nell'ultimo codice postato c'e` un pezzo di CSS che sovrascrive quello richiamato dal tag <link> e ridefinisce il body.

La soluzione va riscritta:

codice:

html, body {
  width: 100%;          /* definisce le dimensioni del <body> */
  height: 100%
}
#wrapper {
  position:absolute;
  top:50%;
  left:50%;
  width:1000px;         /* e` un po' troppo larga per i miei gusti */
  height:750px;
  margin-left: -500px;   /* la meta` di width */
  margin-right: -375px;  /* la meta` di height */
}

Poi va tolto quel pezzo di CSS racchiuso in <style> ... </style>

PS: quando si posta codice anno usati i tag CODE del forum, altrimenti si perde la formattazione

**Web Designer M** · 28-05-2012, 17:49

Ciao,

1. per prima cosa ho guardato il codice html, hai fatto un piccolo errore, hai mancato di dichiarare correttamente la classe wrapper su un div <div id"wrapper"> ... non hai messo l'uguale (=). Se non fai questo la centratura su quel div non te la prenderà mai. (comunque per centrarlo margin: 0 auto; va benissimo ovviamente dando a wrapper una larghezza... non dargli 1000 però, usa larghezza 970px massima, sennò ti entra la scrollbar in orizzontale sulle risoluzioni più diffuse: 1024 x 768)

2. evita di dare misure al body, lavora sul wrapper, al body conviene dare solo proprietà più generiche per evitare problemi di crossbrowsing (crossbrowsing= compatiblità con la maggior parte dei browser) tipo queste: margin: 0; padding: 0; line-height: ...; eventuali background come per altro hai correttamente fatto... ma niente misure a meno che non sia strettamente indispensabile (non è questo il caso).

3. Usa Firebug (elemento aggiuntivo di firefox e chrome). Se vuoi fare questo lavoro non puoi farne a meno, soprattutto quando si tratta di siti con centinaia di righe di codice. Inoltre potrai vedere l'html e i css dei siti che ti ispirano di più o che ottengono l'effetto che vorresti tu... Puoi simulare modifiche sul css in tempo reale... insomma è un ottimo strumento anche nel momento in cui si deve ancora imparare. PS: se avevi firebug ti saresti accorto che non veniva preso il tuo css sulla classe wrapper, ti fa risparmiare un sacco di tempo, usalo.

Spero di esserti stato utile

**mokkia.art** · 29-05-2012, 09:53

Ciao Web Designer M.
Grazie innanzi tutto per la tua risposta, ma volevo chiederti dei chiarimenti. Che significa che ho mancato di dichiarare correttamente la classe sul wrapper? Potresti mettermi il codice? Scusami, ma sono alle prime armi...

... Monica

**Web Designer M** · 29-05-2012, 10:36

<div id"wrapper"> dovevi scrivere <div id="wrapper">

...sopra dove hai riportato il codice mi sono accorto di questa dimenticanza.

Spero tu sia riuscita nel tuo intento :-)

A presto

Discussione: Centrare un sito nel browser

Strumenti discussione

Ricerca discussione

Visualizza

Centrare un sito nel browser

Attenzione a come è scritto il codice

<div id"wrapper">

Permessi di invio