[CSS] centrare sito

[bmw]

ciao, vi chiedo aiuto perchè non riesco a venirne fuori...

sto facendo una pagina html composta da 3 div rispettivamente:

1) div intestazione
2) div menu
3) div contenuto

intestazione sta sopra, menu a sinistr sotto a intestazione e contenuto sta sotto a intestazione a destra di contenuto...

#intestazione {
  width: 748px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  } 

#menu {
  position: absolute;
  top: 177px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #FFF;
  border: 1px solid #DDD;
  width: 150px;
  } 

#contenuto {
  width: 570px;
  margin: 0px 200px 5px 182px;
  padding: 10px;
  background-color: #FFF;
  border: 1px solid #DDD;
  } 

l'impaginazione è ok ma il mio problema è che vorrei allineare il sito al centro della pagina e non a sinistra com'è adesso.... qualcuno sa aiutarmi ??

grazie

[alexba64]

Racchiudi i tuoi 3 div all'interno di un contenitore padre che centrerai nella pagina

[bmw]

ciao, avevo già provato leggendo in questo forum una soluzione simile, però facendo come dici tu mi trovo tutti i div uno sotto all'altro. C'è un modo per posizionarli rispetto al div che li contiene ??

grazie

[gengix]

Ciao

Evita di usare i posizionamenti, utilizzali solo in casi strettamente necessari. Nel tuo caso gli elementi possono essere disposti senza l'aiuto dei posizionamenti.

... però facendo come dici tu mi trovo tutti i div uno sotto all'altro. C'è un modo per posizionarli rispetto al div che li contiene ??

Questa descrizione è un po' confusa, puoi postare il codice di struttura che capiamo cosa non va?

[pat7331]

Ciao, prova a dare al menu float: left e togliere il posizionamento assouto e al contenuto float: right, dando margin e padding 0 per il momento.

[gengix]

Originariamente inviato da pat7331
Ciao, prova a dare al menu float: left e togliere il posizionamento assouto e al contenuto float: right, dando margin e padding 0 per il momento.

Dipende dalla situazione che ha. Se lui per caso ha un contenitore senza dimensioni e all'interno ha elementi fluttuanti senza un elemento con il clear il contenitore collassa.

In più lui vuole centrare il contenitore, quindi dovrà inserire le giuste proprietà al body e al contenitore.

Niente di complicato, ma riuscendo a vedere il codice che ha fatto si può intervenire e dirgli eventualmente dove sbaglia.

[pat7331]

Infatti, niente di complicato. Bmw, se hai dubbi in generale sul layout con i css questa guida è asauriente:

[bmw]

allora provato un po e sono quasi riuscito a centrare il sito...

posto la struttura del sito così andiamo meglio a capirci!!

<div id="contenitore">
            
  <div id="intestazione"></div>
        
  <div id="titolo">
    
    <div class="titolo"> titolo</div>
    <div class="sottotitolo"> sottotitolo </div>
        
    </div>
        
    <div id="menu">
        
      <div class="lista">MENU</div>
 
        [url="index.html"]menu 01[/url]

        [url="index.html"]menu 02[/url]

        [url="index.html"]menu 03[/url]

        [url="index.html"]menu 04[/url]

        [url="index.html"]menu 05[/url]

        [url="index.html"]menu 06[/url]

            
    <div class="news">NEWS</div>
            
    una news e collegamento alla pagina delle news.
        
    </div>
        
      <div id="contenuto">
        
       <h1>titolo</h1>
        
       

[img]images/ok.jpg[/img] paragrafo 01  </p>
       

 paragrafo 02 </p>
        
        

 paragrafo 03 </p>
        
      </div>
                  
            
    <div id="piede">
    
    <div> contenuto del piede </div>
        
    </div>
            
    <div></div>
            
   </div> 

ora sono riuscito a centrare il div contenitore:

#contenitore {
    width: 800px;
    margin: 0 auto 0 auto;
    } 

ho messo float left per il menu e float right per il contenuto. il menu si allinea perfettamente, mentre non riesco ad allineare il contenuto, vorrei che stesse a 5 pixel dal menu...

#menu {
  margin-left: 5px;
  float: left;
  padding: 10px;
  background-color: #FFF;
  border: 1px solid #DDD;
  width: 150px;
  text-align: left; 
  } 

#contenuto {
  width: 570px;
  float: right;
  padding: 10px;
  background-color: #FFF;
  border: 1px solid #DDD;
  text-align: left; 
  } 

[pat7331]

Ok. Qui devi giocare con le misure dei due div se hai una larghezza fissa del div che li contiene, 150px + 570px fanno 720px. Te ne rimangono ancora 80 (ai quali devi fare la tara dei bordi) per riempire il tuo contenitore principale da 800px. Ingrandisci uno dei due fino a quando la misura tra i due non è di 5px.
Se no, gengix ha detto bene, devi inserirci un clearing, o usare un altro stile per il layout.

[bmw]

avevo già provato ad allineare facendo la differenza fra le dimensione del div contenitore e le dimensioni dei due div contenuti ma non ci riesco perchè su explorer e su firefox il div contenitore ha dimensioni diverse (...e non capisco percè !!!)

in cosa consiste il "clearing" ??

grazie davvero per l'aiuto che mi state dando !! :-)