positionamento di elementi che possono ingrandirsi

**iaiasole** · 19-02-2010, 01:34

ciao a tutti,dopo molto studio, eccomi qui con nuovi problemi.

sto realizzando una pagina al cui interno il contenuto può crescere,infatti il materiale che finirà nella mia pagina viene da un database (che nn costruisco io)

come faccio a dire agli elementi che vengono sotto di spostarsi al crescere di quello sopra?

ho costruito un div#contenitore, dentro il quale c'è div#contenuto_princ(che è quello che cresce) e sotto il quale ci sono div#login e ancora sotto div#foot

<div id="contenitore">
<div id="head"> </div>
<div id="navigation"> </div>
<div id="contenuto_princ> </div>
<div id="login"> </div>
<div id="foot"> </div>
</div>

e a tutti gli elementi ho attribuito nel CSS position:absolute

ma quando provo a far crescere il contenuto di div#contenuto_princ il foot e il login rimangono fermi e il div#contenuto_princ rimane coperto e poi risbuca da sotto.

Come posso fare??ho guardato un sacco di tutorial sull'argomento position...ma nn ho trovato nulla di adeguato!!!

HELP!!!

**evan75** · 19-02-2010, 03:30

c'è una ragione specifica per cui gli elementi debbano avere un position absolute?

puoi postare il codice e spiegare un po'più in dettaglio quello che vorresti ottenere?

ciao

-Ivan

**iaiasole** · 19-02-2010, 11:17

absolute mi sembra il modo coretto per farlo...ma nn ono molto esperta
posto html e css
grazie mille

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css17feb.css" >
<title>DESTINAZIONE VIAGGI_ricerca</title>
</head>

<body>
<div id ="container">
<div id ="head">
</div>
<div id ="navigation"> [img]images/NAV_OFF_noshad.gif[/img]

</div>
<div id ="content5">
<div id="box5">
<table border="0" cellspacing="15px" cellpadding="10px" >
<tr >
<td width="160" bgcolor="#FFFFFF"><input name="" type="image" src="images/immagine-prova.gif" />

<h3>località</h3>
<h4>prezzo</h4>
<textarea name="descrizione" cols="15" rows="3"></textarea>
</td>
<td width="160" bgcolor="#FFFFFF"><input name="" type="image" src="images/immagine-prova.gif" />

<h3>località</h3>
<h4>prezzo</h4>
<textarea name="descrizione" cols="15" rows="3"></textarea>
</td>
<td width="160" bgcolor="#FFFFFF"><input name="" type="image" src="images/immagine-prova.gif" />

<h3>località</h3>
<h4>prezzo</h4>
<textarea name="descrizione" cols="15" rows="3"></textarea>
</td>
<td width="160" bgcolor="#FFFFFF"><input name="" type="image" src="images/immagine-prova.gif" />

<h3>località</h3>
<h4>prezzo</h4>
<textarea name="descrizione" cols="15" rows="3"></textarea>
</td>
</tr>
</table>

</div>

<div id ="content5bot"> </div>

</div>

<div id ="login">

<form name="form2" method="post" action="" id="form2">

<table>
<tr>
<td class="user"> username</td>
<td><input name="textuser" type="text" class="text" id="textuser"></td>
<td rowspan="2" class="submit"><input name="Submit2" type="submit" class="pulsante" value="Entra"></td>
</tr>

<tr><td class="password"> password</td>
<td><input type="password" id="password" class="text"></td>
<td></td>
</tr>
</table>
</form>
</div>
<div id ="foot"> </div>
</div>

</body>
</html>

--------------------------------------------------------------------------------------
CSS
html,body{margin: 0;padding:0}
h3{font-family:"arial", Arial, Helvetica, sans-serif; font-size:12px;}
h4{font-family:"arial", Arial, Helvetica, sans-serif; font-size:12px;}
p{font-family:"arial", Arial, Helvetica, sans-serif; font-size:12px;}
p3{font-family:"arial", Arial, Helvetica, sans-serif; font-size:10px;}

body{background:url(images/BGbg1280_05.gif) repeat-y; line-height:10px;}

div#container {position:relative ; width:794px;height:739px; margin:auto;}

div#head{position:absolute; top:0px; width:794px; height:136px; background:url(images/head_noshad.gif) no-repeat}

div#navigation{position:absolute; top:136px;left:0px;width:794px; height:55px;
background:url(images/navigation-general_bg.gif) no-repeat;}/*fondo nn modificato con sfumatura 1280*/

div#content1{position:absolute;top:191px; width:794px; height:411px; background:url(images/content1_bg_1280.jpg) no-repeat}
div#box1{position:absolute; top:44px;left:43.46px; width:258px; height:305px;background:url(images/MULT_03.gif) no-repeat}
div#box1text{position:absolute; top:65.4px; left:18.54px; height:220.7px; width:222.7px;}

div#box2{position:absolute; top:44px;left:43.46px; width:258px; height:305px;background:url(images/CERC2_03.gif) no-repeat}
div#box2text{position:absolute; top:65.4px; left:18.54px; height:220.7px; width:222.7px;}
/*AREA CONTATTI*/
div#box3{position:absolute; top:28px;left:43.46px; width:302px; height:342px;background:url(images/domanda_grassa2_03.gif) no-repeat}
div#box3text{position:absolute; top:50px; left:18.54px; height:220.7px; width:222.7px;
font-family:"arial", Arial, Helvetica, sans-serif; font-size:12px;}
#information th {text-align: left; padding-left: 0px; padding-right: 0px; }
#information td.submission { text-align: center;}

div#box4text{position:absolute;top:290px;left:400p x;widht:231;height:171;
font-family:"Arial black",arial, Helvetica, sans-serif,; font-size:13px; }

/*ALTRE AREE DA DEFINIRE*/
div#content2{position:absolute;top:191px; width:794px; height:411px; background:url(1280/images/bg_offerteaffitti1.jpg) no-repeat}
div#content3{position:absolute;top:191px; width:794px; height:411px; background:url(images/content2_offaff1_1280_05.jpg) no-repeat}
div#content4{position:absolute;top:191px; width:794px; height:411px; background:url(images/content4_contatti_bg.gif) no-repeat}
/*AREA OFFERTE2*/
div#content5{position:absolute;top:191px; width:794px; height:411px; background:url(images/offerte2_noshadow_05.jpg) repeat-y }
div#content5bot{position:absolute;top:368px;width: 794px;height:44px; background:url(images/offerte2_noshadow_06.gif) no-repeat}
div#box5{position:absolute;top:0px;left:33px;width :704px; font-family:"arial", Arial, Helvetica, sans-serif; font-size:10px;}

/*AREA ACCESSO*/
div#login{position:absolute; bottom:49px;height:87px; width: 794px;background:url(images/ACCEDI_noshad.gif) no-repeat;}

#form2 {position:absolute;left:38px; top:23px; font:Arial, Helvetica, sans-serif,"arial"; font-size:12px; width:230px;
background:none;/*background di tutta l'area dedicata a contenere il form*/
padding: 0px;
width: 500px;
font: 12px "arial", Arial, Helvetica, sans-serif;
color:#FF0000;/*titolo del form rosso*/}

input.text {font: bold 12px "Arial", Helvetica, sans-serif;
color: #000000;/*nero*/
background: #FFFFFF;/* bianco fondo del contenuto da aggiungere*/
padding-right: px;
padding-left: px;
width: 140px;/*lunghezza del campo da riempire*/}
input.pulsante {
font: bold 12px "arial", Helvetica, sans-serif;
color: #006600;/*colore verdone della scritta invia sul pulsante */
background: #66CC00;/*verde il pulsante da fermo*/
text-align: center;
padding: px;
width: 50px;
border: 1px solid #000000;
margin-top: 1px;}
input.text:focus {background: #669900;}/*verde oliva il campo selezionato che si sta riempiendo_vedi su IE*/

input.pulsante:hover {background: #B1F766;}/*verdino il pulsante quando c vai sopra_vedi da IE*/
input.pulsante:active { background: #FFFF00;}/*giallo bo?*/
td.user {color: #000000 ;/*nero il testo del titolo del campo "nome""cognoome"*/
background: none;/*fondo di questo titolo*/
text-align: right;font: 11px "arial", Helvetica, sans-serif;}
td.password {font: 11px "arial", Arial, Helvetica, sans-serif;
color: #000000;/*colore del titolo"email" del campo*/background: none;text-align: right;}

/*FOOT*/
div#foot{position:absolute;bottom:0px;width:795px; height:49px; background:url(images/foot_1280.gif) no-repeat;}

**iaiasole** · 19-02-2010, 23:51

prima ho postato con troppa fretta e confusione.
adesso funziona,se nel div#content5 si agiune testo.
Ma il mio contenuto "che cresce" sono delle tabelle e con le tabelle non funziona.
Come faccio?Non devo usare per forza tabelle, ma devo impaginare immagini e del testo a loro riferito.

grazieee

<body>
<div id="content5">

<table></table>
<table></table>
<div id="content5-bot">
<div id="content5-top">
</div>

</div>

</div>

----------
CSS
#content5 {OFFaff2_bg_verdino_05.gif) repeat-y;
width: 794px;
position: absolute;
top: 191px;
left: 113px;}

#content5-top { background:url(OFFaff2_top_verdino_05.gif) no-repeat;
padding-left: 165px;
padding-top: 18px;}

#content5-bot {background: bottom left url(OFFaff2_verdino_bot.gif) no-repeat;
padding-bottom: 4px;}

div#box5{position:relative; left:10px; top:10px;
width:704px;font-family:"arial", Arial, Helvetica, sans-serif;font-size:10px;}

**Pino SIlvestre** · 22-02-2010, 16:20

hai risolto? non ho capito di preciso cosa intendi fare :master:
fai un disegnino magari, oppure (meglio) posta un link del problema

Discussione: positionamento di elementi che possono ingrandirsi

Strumenti discussione

Ricerca discussione

Visualizza

positionamento di elementi che possono ingrandirsi

vicina allla soluzione

Permessi di invio