Problema con i Div

**Cink** · 28-10-2012, 17:57

Praticamente sto facendo un sito, l'ho suddiviso in div, il problema è che, non so come mai, mi vede male i div. Ora mi spiego meglio:

codice:

<div id="top"> 
      <div id="top1">  Logo </div> 
      <div id="top2">  Nome utente e Avatar </div> 
      <div id="top3">  Cerca </div> 
</div>

codice:

<div id="center">
     <div id="center1">  Contenuto<? include("contenuti/$pagina.php"); ?> </div> 
    <div id="center2">  Menu </div>
 </div>

Questi sono i due File che vengono inclusi e questo è il css:

codice:

body { font-size: 12px; font-family: verdana }
#top {margin-top:10px;width: 80%;}
#top1 { float:left; width:30%; } 
#top2 { float:left; width:40%;} 
#top3 { float:left; width:30%;}
#center {margin-top:10px;width:80%;}
#center1 {float:left; width:75%}
#center2 {float:left; width:25%}

Praticamente non capisco perchè mi vede Top e Center come un unico div, infatti se non ci fossero le percentuali li metterebbe uno accanto all'altro...

Inoltre ho notato che utilizzando google, la funzione per webmaster, quando vai sul cursore a selezionare div top o div center, per vedere dove si trovano, li fa vedere sfalsati e comunque entrambi nella stessa posizione!

Grazie 1000 per l'aiuto

**Cink** · 28-10-2012, 18:48

Ok, ho scoperto che è un problema di template e di attributi posizioni div, ma non so come risolverlo!

**ricman** · 29-10-2012, 11:11

Originariamente inviato da Cink
Ok, ho scoperto che è un problema di template e di attributi posizioni div, ma non so come risolverlo!

??

Cmq prova a usare il clear both dopo il top3 e vedi se migliora

**Cink** · 29-10-2012, 15:32

Cercando un po' su internet ho capito che la domanda sarebbe "come inserire 3 div in un div contenitore, tutti uno accanto all'altro"

Ieri ho cercato e fatto un po' di prove ma non hanno avuto esito positivo...

Non ho idea di cosa sia il clear both

**ricman** · 31-10-2012, 12:31

Originariamente inviato da Cink
Non ho idea di cosa sia il clear both

Su gooogle trovi tutte queste risposte in italiano
http://www.google.it/search?client=s...fiancare+3+div

E qui c'è il clear
http://www.w3schools.com/cssref/pr_class_clear.asp

**Cink** · 31-10-2012, 14:07

Non sono un tipo che si mette a chiedere a babbo sui forum senza prima cercare xD Anzi cercare mi costa meno tempo che aspettare una risposta per giorni su un forum! In ogni caso avevo già cercato prima dele soluzioni, solo che non sono riuscito a trovare una soluzione... per ora sta in questo modo:

codice:

<html> 
<head> 
<link rel="stylesheet" href= type="text/css"> <
/head> 
<body> 
<div id="top"> 
     <div id="top1">  <img src=> </div> 
     <div id="top2">  Nome utente e Avatar </div> 
     <div id="top3">  Cerca </div> 
</div>
<div id="center"> 
    <div id="center1">  Contenuto  </div> 
   <div id="center2">  
      <div id="menu"> 
       <div> Articoli </div> 
       <div> Profilo </div> 
       <div> Eventi </div> 
       <div> Prova </div> 
       </div>
   </div>
</div> 
<div id="bottom">  Fondo </div></body> </html>

Questo è il template:

codice:

body { font-size: 12px; font-family: verdana } 
#top {width: 90%;border: 1px solid #000000;margin:10px auto; padding: 10px 10px 20px 10px; }
#top1 { float:left; width:20%; }
#top2 { float:left; width:50%;}
#center {width:90%;border: 1px solid #000000;margin:10px auto; padding: 10px 10px 10px 10px;}
#center1 {float:left; width:70%} 
#bottom {border: 1px solid #000000;width:90%;margin:10px auto; padding: 10px 10px 10px 10px;}

A provarlo sembra andare tutto perfettamente, ma su google chrome mi visualizza il top3 come se fosse tutti i top (top1 top2 top3)

Stessa cosa per il center2.

Poi io vorrei "Articolo profilo Eventi Prova" Uno sotto l'altro, invece me li allinea con l'altro div. Insomma non è che capisca molto il senso

**ricman** · 02-11-2012, 02:29

Non vedo il clear both ....

**ricman** · 02-11-2012, 02:32

codice:

#top1, #top2, #top3 {float:left;}

<div id="top"> 
     <div id="top1">  <img src=> </div> 
     <div id="top2">  Nome utente e Avatar </div> 
     <div id="top3">  Cerca </div> 
     <div style="clear:both"></div>
</div>

Discussione: Problema con i Div

Strumenti discussione

Ricerca discussione

Visualizza

Problema con i Div

Permessi di invio