Disporre due div uno sopra l'altro

**gokufg** · 08-03-2010, 22:40

Ciao ragazzi,
voi conoscete un metodo per disporre i div in maniera sovrapposta come nell'immagine qui:

Vorrei crearlo in modo che il testo contenuto nel div 1 non deve andare sotto il div 2 ma aggirarlo.
Spero di essermi spiegato...

**Mich_** · 09-03-2010, 09:24

float: left;

Esempio:

codice:

HTML:
<div id="DIV1">
  

testo testo ...(sopra il div2) ...</p>
  <div id="DIV2">

testo del div2"</p></div>
  

testo testo ... (a fianco del div2) ...</p>
  

testo testo ...(a fianco o sotto a seconda della lunghezza) ...</p>
  

testo testo ...(a fianco o sotto a seconda della lunghezza) ...</p>
</div>

CSS:
#DIV1 {
  width: ...;         /* di solito e` necessario (ma dipende dal contesto) */
}
#DIV2 {
  width: ...;
  float: left;
}
/* se il DIV1 puo` finire prima della fine del DIV2 e` necessario aggiungere una cosa del tipo */
#DIV1:after {
  clear: left;
  ecc (vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
}

**gokufg** · 09-03-2010, 10:27

Ciao Mich_ e grazie mille per la risposta.

Pero' il mio reale problema e' dato dal fatto che non posso dividere il contenuto del div 1.

Quindi in pratica il codice html dovrebbe essere una cosa del tipo:

codice:

<div id="DIV1">
  

testo unico del div 1</p>
  <div id="DIV2">

testo del div2"</p></div>
</div>

il posizionamento del div 2 in mezzo dovrebbe essere impostato con il css. E' possibile fare una cosa del genere?

Credo sia il tuo suggerimento di leggere qui..Ora leggo...Thanks

**Mich_** · 09-03-2010, 10:59

Non so se e` possibile. Tutti gli esempi che vedo in giro sono posizionati come ti ho scritto io.

Puoi provare una cosa del genere (a partire dal tuo HTML), ma non so se funziona:

codice:

#DIV1 {
  width: ...;         /* di solito e` necessario (ma dipende dal contesto) */
  position: relative;
}
#DIV2 {
  width: ...;
  float: left;
  position: relative;
  top: -20em;        /* valore da definire - o anche in px che ti sposti l'inizio un po' sopra */
}
/* se il DIV1 puo` finire prima della fine del DIV2 e` necessario aggiungere il clear */

**gokufg** · 09-03-2010, 11:29

Infatti non va.. Il div 2 viene visualizzato sopra il div 1...io invece vorrei che il testo del div 1 ruoti attorno al div 2...

**mucu** · 09-03-2010, 21:01

appena torno a casa ti posto una mia pagina dove avevo fatto un esperimento del genere
ma non so se è crossbrowser poi mi dirai

eccolo: http://www.colonnello.net/nuovo/html...ircondato.html

**gokufg** · 09-03-2010, 21:05

Originariamente inviato da mucu
appena torno a casa ti posto una mia pagina dove avevo fatto un esperimento del genere
ma non so se è crossbrowser poi mi dirai

OK, aspetto con ansia la tua risposta

A presto!

**gokufg** · 10-03-2010, 17:32

Originariamente inviato da mucu
appena torno a casa ti posto una mia pagina dove avevo fatto un esperimento del genere
ma non so se è crossbrowser poi mi dirai

eccolo: http://www.colonnello.net/nuovo/html...ircondato.html

Ciao mucu, sembra che e' proprio cio' che cercavo...potresti postarmi il codice css che hai utilizzato? Perche' se salvo in locale la pagina non funziona...

**mucu** · 10-03-2010, 19:08

ne ho messo una versione semplificata a quest'indirizzo
http://www.colonnello.net/nuovo/html...rcondato2.html
il codice comunque è questo

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>div circondato 2</title>
<style type="text/css">
* {
 	margin: 0;
 	padding: 0 }
.div1 {
 	background-color: rgb(255,255,0);
 	position: relative;
 	float: left; }
.distanza {
 	width: 0px;
 	height: 0px;
 	float: right;
 	clear: both;
 	margin-top: 5em;
 	position: relative; }
.div2 {
 	background-color: rgb(204,204,204);
 	float: left; 	clear: both;
 	border: 2px solid rgb(0,0,0);
 	width: 40%;
 	margin: 1em 1em 1em 0em; }
</style>
</head>
<body> 
<div class="div1">
<div class="distanza"></div> 
<div class="div2">

Lorem ipsum ...</p></div>


Lorem ipsum dolor sit amet, consectetur adipisici...</p>
</div>
</body>
</html>

edit:
per la precisione il paragrafo che si vuole posizionare in mezzo non bisogna neanche racchiuderrlo in un div e basta dargli la classe .div2 o quello che si vuole

**gokufg** · 10-03-2010, 21:23

Originariamente inviato da mucu
ne ho messo una versione semplificata a quest'indirizzo
http://www.colonnello.net/nuovo/html...rcondato2.html

Davvero geniale!!!

Solo Firefox e Chrome non lo vede....

Edit: se il div2 era vuoto firefox e chrome lo ignoravano (giustamente)...
Ora va.. Grazie mille

Discussione: Disporre due div uno sopra l'altro

Strumenti discussione

Ricerca discussione

Visualizza

Disporre due div uno sopra l'altro

Permessi di invio