- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Problema con i Div
-
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...
-
@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.
-
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...
-
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.
-
[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
-
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 :)
-
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.
-
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?
-
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).
-
Grazie 1000
