• C
    User •

    Problema con i Div

    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:

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

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

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

    
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

    0
  • C
    User •

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

    0
  • M
    User Attivo •

    Puoi mettere un link?

    0
  • C
    User •

    Ci sto lavorando in locale, in ogni caso cercando sul web la domanda adesso 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...

    0
  • L
    User •

    @Cink said:

    Ci sto lavorando in locale, in ogni caso cercando sul web la domanda adesso 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...

    Se li devi mettere vicini verticalmente, basta scrivere

    <div>contenuto1</div>
<div> contenuto2</div>
<div>contenuto3</div>

    e verranno visualizzati uno sotto l' altro vicini, se li devi posizionare orizzontalmente dai uno sguardo alla proprietà float dei css.

    0
  • C
    User •

    Devo posizionarli orizzontalmente, il problema è che non riesco! Ho provato a mettere ad esempio top 1 e top 2 con float left, dato che dicono che poi il terzo div si sarebbe allineato da solo e niente. Ho provato a mettere al top 1 float left e al top 3 float right e così via, tutte soluzioni cercate su internet ma senza risultati...

    0
  • L
    User •

    Hai provato a usare la proprietà width sui div ? Altrimenti si prendono in automatico tutta la larghezza della finestra e non si allineano sulla stessa riga. Se posti il codice è più facile cercare di trovare una soluzione.

    0
  • C
    User • 
    [TABLE]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<html>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<head>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]   <link rel="stylesheet" href= type="text/css">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</head>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<body>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]  <div id="top">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     <div id="top1">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]      <!-- Logo -->  <img src=>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     <div id="top2">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     <!-- Avatar e Nome Utente -->    Nome utente e Avatar[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     <div id="top3">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     <!-- Funzione Cerca -->      Cerca[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</div><div id="center">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]      <div id="center1">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]      <!-- Contenuto -->  Contenuto <!-- Contenuto Della pagine index.php-->      </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]      <div id="center2">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]      <!-- Menu -->    <div id="menu">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]    <div> Articoli </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]    <div> Profilo </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]    <div> Eventi </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]    <div> Prova </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</div>      </div>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</div>   <div id="bottom">[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]     <!-- ancora da definire -->    Fondo[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</div></body>[/TD]
[/TR]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</html>[/TD]
[/TR]
[/TABLE]

    E questo è il file template.css

    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;margin:10px auto; padding: 10px 10px 10px 10px;}#center1 {float:left; width:70%} #bottom {border: 1px solid;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

    0
  • gattinara
    User Newbie •

    Hai solo bisogno di integrare nel layout un div con proprietà clear: both; dopo gli elementi connaturanti il float, es:

    HTML:

    <html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">
  <div id="top1">logo</div>
  <div id="top2">Nome utente e Avatar</div>
  <div id="top3">Cerca</div>
  <div class="clear"></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 class="clear"></div>
</div>
<div id="bottom">Fondo</div>
</body>
</html>

    CSS:

    body {font-size: 12px; font-family: verdana;}#top {width: 90%; border: 1px solid #000; margin: 10px auto; padding: 10px 10px 20px; }
#top1 {width:20%; float: left;}
#top2 {width:50%; float: left; text-align: center;}
#top3 {width:30%; float: right; text-align: right;}
.clear {clear: both;}
#center {width: 90%; border: 1px solid; margin:10px auto; padding: 10px;}
#center1 {width:70%; float:left;}
#center2 {width:30%; float: right; text-align: right;} 
#bottom {width:90%; border: 1px solid; margin: 10px auto; padding: 10px;}

    Ho utilizzato l'allineamento del testo in maniera pratica per la visualizzazione (starà a te decidere come formattare i contenuti);
    oltre questo ti suggerisco inoltre di adottare un corretto DOCTYPE.

    Buon lavoro :)

    0
  • L
    User •

    Riprendendo il codice scritto da te per far allineare orizzontalmente top1 e top2 ti basta scrivere

    [TABLE="class: cms_table_cms_table"]

[/TR]

[TD="class: cms_table_cms_table_webkit-line-content"]<html>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]<head>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]<link rel="stylesheet" href= type="text/css">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]</head>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]<body>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]  <div id="top">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     <div id="top1" **style="float:left"**>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]      <!-- Logo -->  <img src=>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"][/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     <div id="top2">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     <!-- Avatar e Nome Utente -->    Nome utente e Avatar[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"][/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     <div id="top3">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     <!-- Funzione Cerca -->      Cerca[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"][/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]</div><div id="center">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]      <div id="center1">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]      <!-- Contenuto -->  Contenuto <!-- Contenuto Della pagine index.php-->      </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"][/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]      <div id="center2">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]      <!-- Menu -->    <div id="menu">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]    <div> Articoli </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]    <div> Profilo </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]    <div> Eventi </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]    <div> Prova </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"][/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]</div>      </div>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]</div>   <div id="bottom">[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]     <!-- ancora da definire -->    Fondo[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]</div> </body>[/TD]
[/TR]

[TD="class: cms_table_cms_table_webkit-line-number"][/TD]
[TD="class: cms_table_cms_table_webkit-line-content"]</html>[/TD]
[/TR]
[/TABLE]

    inserire lo stile in linea non è consigliato, è sempre meglio farlo tramite il file css separato, ma se provi a fare copia incolla col codice qui sopra dovrebbe farti vedere il top1 affiancato a top2, poi aggiungendo la proprietà width insieme al float, riesci a gestire meglio le proporzioni dei vari div.

    0
  • C
    User •

    Grazie 1000 a tutti e due 😄

    In ogni caso ho provato ad usare il metodo di Gattinara ed è andato, però vorrei capire meglio quale è la funzione del clear:both, cioè perchè se non lo metto non va?
    Inoltre per il corretto DOCTYPE che accorgimenti mi suggeriresti di seguire?

    0
  • gattinara
    User Newbie •

    Senza un div connaturante clear: both, in presenza di due (o più) div con proprietà float (left o right che sia), l'ultimo dei div "floattante" si posizionerà sopra il precedente.
    Il clear: both forza i posizionamenti, ed impedisce ulteriori accostamenti sia a destra che a sinistra, è una sorta di fermacarte che ordina un accapo :)

    Per quanto concerne il DOCTYPE sono usa favorire l'XHTML Transitional (a meno che non mi venga espressamente richiesto l'HTML5); l'importante è evitare come la peste l'obsoleto HTML4 e prestare attenzione alla sintassi, qualsiasi sia la tua scelta. Con l'XHTML i tag "vuoti" vanno chiusi con lo slash, es:

    Sintassi XHTML:

    <br />
<img />
<meta name />
<link rel />

    Sintassi HTML:

    <br>
<img>
<meta name>
<link rel>

    Spero di essermi spiegata chiaramente (in caso contrario non esitare a chiedere delucidazioni).

    0
  • C
    User •

    Grazie 1000 😄

    0
Effettua l'accesso per rispondere