• 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