dimensione div non dichiarata

**lbottoni** · 13-01-2009, 17:57

Ciao,vorrei tramite javascript fare in modo che questa struttura che segue venisse modifcata, il problema è che quando creo la buova struttura (dinamica) ho problemi a affiancare correttamente un'altro div a quello che devo modificare

Esempio Struttura iniziale:

codice:

<div id="pippo">
pippo
</div>
<div id="pluto">
pluto
</div>

Struttura finale

codice:

<div id="Container_pippo" class="Container">
   <div id="pippo">pippo</div>
   <div id="Bar_pippo" class="barra"></div>
</div>
<div id="pluto">
pluto
</div>

il mio problema è che la Bar_pippo sarà 7px di larghezza e deve essere affiancata a dx del div pippo (2 colonne), ma non riesco a capire come posso dimensionare il width e heigth del contenitore visto che in FF vedo che il div pippo si restringe in base al suo contenuto e invece nell'esempio mio in orgine era lungo quanto lo schermo.

Come posso fare?

**artorius** · 13-01-2009, 18:05

ma hai uno stile associato alla pagina?

**lbottoni** · 13-01-2009, 18:10

si certo, ma se tu metti i div pippo e bar con float:left purtroppo in FF vedi che pippo non mantiene le dimensioni orginali, ma si restringe adattandosi al suo contenuto, cosa che non voglio

**peppeocchi** · 13-01-2009, 18:53

Assegna una dimensione fissa per i div. Sai esattamente come funziona l'attributo float?
Puoi lasciare in float:left il div pippo, e il div pluto con un margine sinistro pari alla dimensione del div pippo....
Forse però non ho capito bene la domanda, ma magari se posti un pò del tuo codice posso capire meglio e quindi, se posso, aiutarti.

**lbottoni** · 13-01-2009, 19:02

Guarda questo codice di esempio..l'immagine barra_03.png è un semplice rettangolo colorato.

Vedilo in FF e poi in IE, vedrai che pippo si è ridimensionato...vorrei non definire a priori le dimensioni.

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=iso-8859-1" />
<script src="/js/Scriptaculous/lib/prototype.js" type="text/javascript"></script>
<title>Documento senza titolo</title>
</head>
<style>
div
	{
	border:1px solid #000000;
	padding:10px;
	margin:10px;
	}
.divContainer
	{
	background-color:#E2E7EC;
	position:relative;
	padding:0;
	overflow:auto;
	}
.divBar
	{
	padding:0;
	margin:0;
	/*background-image:url(images/barra_01.png);*/
	background-position:right;
	background-repeat:repeat-y;
	border-width:0px 0px 0px 0px;
	border-style:solid;
	border-color:#E2E7EC;	
	width:7px;

	}
.divClear{margin:0;padding:0;clear:both;overflow:auto;display:none;}
</style>

<body>
<div id="paperino" style="background-color:#FFFF00;">
PAPERINO
</div>
<div id="pippo" style="background-color:#FF99CC;">
PIPPO
PIPPO
PIPPO
PIPPO
PIPPO
PIPPO
PIPPO

</div>
<div id="pluto" style="background-color:#00CC00;">
PLUTO
</div>
</body>
</html>
<script>
/*
DOM INIZIALE
	PADRE
		|- DIV 1
		|- DIV 2 (Da Modificare)
		|- DIV 3

DOM FINALE
	PADRE
		|- DIV 1
		|-CONTENITORE DIV 2
			|- DIV 2 (Da Modificare)
		|- DIV 3	
*/
id="pippo";
divWork=$(id);
wDivWork=$(id).getWidth();//larghezza di lavoro
hDivWork=$(id).getHeight();//altezza dei div da lavorare

//Duplico il div di lavoro e gli pulisco la classe
divClone=divWork.cloneNode(true);

//Trovo il Padre del div di lavoro a cui appenderò i nuovi figli
Father=divWork.parentNode;

//Creo il contenitore
divContainer = document.createElement('div');
divContainer.setAttribute("id","Container_"+divWork.id);
divContainer.className="divContainer";


//Inserisco dal padre il nuovo div contenitore prima di quello di lavoro
Father.insertBefore(divContainer,divWork);

//Rimuovo il Nodo spostato
Father.removeChild(divWork);

//Creo il Div della barra
divBar = document.createElement('div');
divBar.setAttribute("id","divBar_"+divWork.id);
divBar.className="divBar";
divBar.style.cssFloat="left";


barImage=new Image();
barImage.src="images/barra_03.png";

divClear = document.createElement('div');
divClear.className="divClear";

divBar.appendChild(barImage);
divContainer.appendChild(divClone);

divClone.style.margin=0;
divClone.style.overflow="auto";
divClone.style.cssFloat="left";
divClone.style.display="block";

divContainer.appendChild(divBar);
divContainer.appendChild(divClear);

</script>

Discussione: dimensione div non dichiarata

Strumenti discussione

Ricerca discussione

Visualizza

dimensione div non dichiarata

Permessi di invio