Layout fluido: <DIV> uno sotto l'altro

**djdalle** · 04-05-2008, 18:40

Premesso che ho già fatto ricerca nel forum e non mi pare di aver trovato la soluzione al mio problema, vi rimando ad una pagina creata da me
http://sedicisi.altervista.org/cicciopasticcio.htm

Questo qui sotto è il codice

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div id="Layer1" style="position:absolute; left:16px; top:21px; width:40%; z-index:1">
   [img]/Immagini/emiliaromagna%20copia.gif[/img]
</div>

<div id="Layer2" style="position:absolute; left:16px; top:110px; width:40%; z-index:2"> 
    [img]/Immagini/regione.gif[/img] 
</div>

</body>
</html>

Quello che vorrei fare è posizionare i due div uno sotto l'altro. l'attributo width è ovviamente in percentuale in modo da creare il layout fluido.
l'attributo height come potete vedere l'ho tolto in modo che i div si adattino alle immagini (Fluide).

l'attributo top nel secondo div invece vorrei toglierlo e fare in modo che il secondo div venga sotto al primo (che comunque è ridimensionabile in altezza) senza dover impostare un top in percentuale o in pixel (per ovvi motivi)

Come posso fare? :master:

Grazie in anticipo

**djdalle** · 04-05-2008, 22:48

stavo dando un occhio al post in rilievo "siti accessibili sul web" e vedendo i siti noto che in praticamente nessuno ci sono delle immagini fluide bensi il fluido è applicato solo al testo... questo mi fa riflettere...quello che ho chiesto sopra è possibile farlo?

**Vincent.Zeno** · 05-05-2008, 00:00

:master: mica capisco il tuo progetto...

perché fissare in quel modo i div? a parte che non c'è un progetto completo per cui non si sa dove andare a parare..
ma, se devo solo rispondere alla domanda originale, farei così:
(senza diversa istruzione i div vanno a capo da soli)

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#Layer1 {margin-left:16px; margin-top:21; width:40%;}
#Layer2 {margin-left:16px; width:40%;}
img {width:100%;}
</style>
</head>

<body>
<div id="Layer1">
[img]/Immagini/emiliaromagna%20copia.gif[/img]</div>
<div id="Layer2"> 
  [img]/Immagini/regione.gif[/img]</div>
</body>
</html>

**djdalle** · 05-05-2008, 06:49

mica capisco il tuo progetto...

Eheheh... infatti quella pagina che ho creato è solo per farvi vedere una funzione che mi serve per la creazione del sito finale! non volevo mettere una pagina piena di codice per farvi capire due cose in croce...

Comunque grazie mille!!! Quel codice funziona proprio come voglio!!!
http://sedicisi.altervista.org/cicciopasticcio2.htm

Anche se non capisco una cosa...perchè solo con il Css funziona questo codice?

Sono il position:absolute o il z:index che cambiano la disposizione?
O è proprio una disposizione che prendono perchè sono inserite con il css?

**Vincent.Zeno** · 05-05-2008, 11:40

Originariamente inviato da djdalle
Anche se non capisco una cosa...perchè solo con il Css funziona questo codice?

Sono il position:absolute o il z:index che cambiano la disposizione?
O è proprio una disposizione che prendono perchè sono inserite con il css?

funzionerebbe anche se lo mettessi nel markup: come te l'ho messo io è "solo" più pulito.
tra l'altro usi xhtml dove si è più rigorosi a separare il contenuto dalla formattazione.

se usi posizione assoluta poi avrai sempre problemi e rendere un layout fluido/elastico
(se non particolarmente contestualizzato),
z-index ha senso se devi imporre un livello di visualizzazione (altrimenti diventa istruzione inutile)

meno istruzioni riesci ad utilizzare meglio è per tutti: chiarezza e semplicità vincono sempre.

**djdalle** · 05-05-2008, 15:19

Grazie mille!!! Sei stato gentilissimo!

Mi hai dato ottime info!

Discussione: Layout fluido: <DIV> uno sotto l'altro

Strumenti discussione

Ricerca discussione

Visualizza

Layout fluido: <DIV> uno sotto l'altro

Permessi di invio