[div] come inseire 2 div sopra e 2 sotto?

**Kahm** · 22-10-2008, 10:50

salve a tutti
vorrei inserire in una pagina 4 div:
i primi due nella prima riga , uno di fianco all'altro
e poi una seconda riga con altri riga

ho fatto per adesso questo codice:
per ora sono tutti nella stessa riga
mi rimane da mettere in seconda riga i restanti 2 div, come posso fare?

Codice PHP:


  

   <style>

div#testo {float:left;}



div#img1, div#img2 {float:left;}

   </style>

    





<div id="img1">

  [img]./buddarotto2.jpg[/img]</div>

<div id="img2">

  [img]./buddarotto2.jpg[/img]</div>





  <div id="img1">

  [img]./buddarotto2.jpg[/img]</div>

<div id="img2">

  [img]./buddarotto2.jpg[/img]</div>

**Gufo** · 22-10-2008, 13:17

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>


     
<style type="text/css">
<!--
.prima {
	float: left;
}
.seconda {
	float: left;
}
-->
</style>
</head>

<body>

 

<div class="prima">[img]./buddarotto2.jpg[/img]</div>
<div>[img]./buddarotto2.jpg[/img]</div>


 
 
<div class="seconda">[img]./buddarotto2.jpg[/img]</div> 
<div>[img]./buddarotto2.jpg[/img]</div>

</body>
</html>

**Myaku** · 22-10-2008, 13:48

Originariamente inviato da Gufo

non ha senso definire due classi diverse (che nel codice poi fai comportare come id) con applicate le stesse proprietà. In quello che hai scritto basta una sola classe.

@kahm: puoi postare un esempio grafico di quello che devi realizzare? ho come l'impressione che il codice che avete tirato fuori entrambi sia migliorabile ...

**Kahm** · 22-10-2008, 14:00

Originariamente inviato da Myaku
non ha senso definire due classi diverse (che nel codice poi fai comportare come id) con applicate le stesse proprietà. In quello che hai scritto basta una sola classe.

@kahm: puoi postare un esempio grafico di quello che devi realizzare? ho come l'impressione che il codice che avete tirato fuori entrambi sia migliorabile ...

ciao grazie per l'intervento
il consiglio di Gufo sembra avere successo, cmq in base alla richiesta io ho difficoltà con delle immagini per il titolo dell'applicativo

ho già postato in questo thread:
http://forum.html.it/forum/showthrea...readid=1279677

l'impostazione che devo modificare la puoi trovare qui
http://amodius.brinkster.net/sito/prova.htm

**Gufo** · 22-10-2008, 14:02

Originariamente inviato da Myaku
ho come l'impressione che il codice che avete tirato fuori entrambi sia migliorabile ...

E' tutto migliorabile, il codice che ho inviato io è stato buttato lì velocemente per dare un'idea modificabile, ma io so fare di meglio

**Marcolino's** · 22-10-2008, 14:05

Scusa ma perché vuoi necessariamente usare dei div per contenere le immagini?

**Myaku** · 22-10-2008, 14:28

Originariamente inviato da Gufo
E' tutto migliorabile, il codice che ho inviato io è stato buttato lì velocemente per dare un'idea modificabile, ma io so fare di meglio

ci mancherebbe, non metto in dubbio le tue capacità

è solo che ritengo "normale" cercare di fornire la soluzione più pulita e corretta possibile, tutto qui.

Cyà

**Myaku** · 22-10-2008, 14:33

Originariamente inviato da Marcolino's
Scusa ma perché vuoi necessariamente usare dei div per contenere le immagini?

esattamente. @kahm si potrebbe evitare di racchiudere ogni singola immagine in un div come stai facendo ora, puoi limitarne l'uso alle suddivisioni in "blocchi" principali. ridurresti la marcatura.

**Kahm** · 22-10-2008, 17:02

Originariamente inviato da Myaku
esattamente. @kahm si potrebbe evitare di racchiudere ogni singola immagine in un div come stai facendo ora, puoi limitarne l'uso alle suddivisioni in "blocchi" principali. ridurresti la marcatura.

EH?? EH????come come =? dai dia sono curioso

**Myaku** · 22-10-2008, 17:49

Originariamente inviato da Kahm
EH?? EH????come come =? dai dia sono curioso

premesso che non ci ho capito gran chè dal link che hai postato

soluzione [probabilmente] meno elegante:
. racchiudi tutto all'interno di un unico div di width fissa, che calcoli sulla somma delle larghezze delle due immagini affiancate.
Applichi una classe con float alle due immagini di sx - [forse necessario un commento condizionale per IE, ma era un test che avevo fatto parecchi mesi fa e potrei anche ricordare male questo dettaglio].

soluzione un po' più elegante:
. racchiudi le immagini superiori all'interno di un div, le inferiori all'interno di un altro.
Applichi una classe alle immagini come soluzione precedente ed un'altra classe ai div a cui magari applicherai il fabclearing (se non sai come si usa, fai una ricerca)

altra soluzione:
. racchiudi le due immagini di dx in un div ed in un altro div quelle di sx e fluttui direttamente i div

queste quelle che mi vengono in mente di primo acchito.
E già un minimo di marcatura l'hai risparmiata, utilizzi un solo div o al massimo due anzichè 4.
Resta inteso che a voler "pignoleggiare" sarebbe da vedere anche il significato di tali immagini all'interno del codice (ovvero cosa descrivono): se ad esempio si riferiscono a menu o thumbnails la gestione tramite lista sarebbe a mio avviso più indicata.

Discussione: [div] come inseire 2 div sopra e 2 sotto?

Strumenti discussione

Ricerca discussione

Visualizza

[div] come inseire 2 div sopra e 2 sotto?

Permessi di invio