Div dinamici

[androita]

Ciao a tutti premetto che ho gia visto dei post vecchi ma non riguardano proprio il mio problema...

Io ho un div per le news e ho voluto mettere una conice arrotondat attorno (percio mettere le news dentro a una tabella non va bene) allora cosa ho pensato, di crearmi un div contenitore con position absolute contenente altri 2 div position relative.

Nel primo div c'è l'immagine della cornice ripetuta sulla y e il codice che genera le news, questo div ha altezza auto.

Nel secondo div c'è solo l'immagine della cornice, ripetuta sempre sulla y, e l'altezza del div è auto, pero questo div non piglia l'altezza del primo div, ma rimane piccolo.. Ho provato a impostare come altezza anche 100% ma il risultato non cambia...

Sto impazzendo

Grazie a tutti!

[pastoweb]

Posta link alla pagina, codice css e codice html, altrimenti è dura aiutarti.

Nel frattempo, tra gli articoli sui css ne puoi trovare alcuni che spiegano diverse tecniche per gestire la tua situazione

[androita]

Questo e il codice del div

<div id="sinistra">
<div id="CONTENT">
[img]img/barra_oriz1.GIF[/img]</div>
<div id="B_VER" style="background-image:url(img/barra_vert.GIF); height:165px">

<iframe title="Previsione meteo per Torino" name="previsione_meteo" src="http://www.tempoitalia.it/previsioni_meteo/meteo.php?loc=Torino&css=1" width="260" height="160" marginwidth="3" marginheight="0"
scrolling="auto" frameborder="0"></iframe>
</div>

<div id="B_VER2" style="background-image:url(img/barra_vert.GIF); height:165px"><span>
</span></div>
<div id="CONTENT">[img]img/barra_oriz2.GIF[/img] </div>






<table border="0">
<tr><td colspan="3">[img]img/barra_oriz1.GIF[/img]</td></tr>

<tr><td>[img]img/barra_vert.GIF[/img]</td>
<td>
<table border="0" width="260">
<tr><td>

<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual newsbar.
// You can place this anywhere on your page.
-->
<div id="newsBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span> </div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-nbw"
type="text/javascript"></script>


<script type="text/javascript">
window._uds_nbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js?mode=new"
type="text/javascript"></script>


<script type="text/javascript">
function LoadNewsBar() {
var newsBar;
var options = {
largeResultSet : false,
title : "NEWS ITALIA",
horizontal : false,
autoExecuteList : {
executeList : ["Cronaca", "Politica", "Economia e Finanza", "Sport"]
}
}

newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
</script>



</td></tr></table>

</td>
<td>[img]img/barra_vert.GIF[/img]</td></tr>
<tr><td colspan="3">[img]img/barra_oriz2.GIF[/img]</td>
</tr></table>


</div>


questo del css

body{
text-align:center;
background-color:#336699;
}


#MAIN{
margin:0px auto;
width:900px;
text-align:left;
background-color:#336699;
}

#SPAZIO_ORI{
margin:0px;
height:7px;
clear:both;
float:none;
font-size:2px;
line-height:2px;
overflow:hidden;
visibility:hidden;
}


#B_VER{
margin:0px;
background:url('img/barra_vert2.GIF') repeat-y 0px -1px;
float:left;
position:relative;
padding-left:2px;
}

#B_VER2{
margin:0px;
float:right;
position:relative;
background:url('img/barra_vert2.GIF') repeat-y 0px -1px;
}

#B_VER4{
margin:0px;
float:right;
position:relative;
background:url('img/barra_vert2.GIF') repeat-y 0px -1px;
}

#CONTENT{
margin:0px;
height:auto;
width:100%;
float:none;
position:relative;
}

#LOGO{
width:100%;
height:118px;
position:relative;
border:2px;
background-image:url('../img/TESTALINO%201024x768.bmp');

}

#CERCA{
width:100%;
height:71px;
position:relative;
background-image:url('../img/cerca.bmp');

}

#corpo{
width:100%;
height:auto;
position:relative;
background-color:#336699;
}

#sinistra{
width:30%;
height:auto;
float:left;
background-color:#336699;
}

#centrale{
width:50%;
height:auto;
float:left;
background-color:#336699;
margin-left:2px;
margin-right:2px;
}

#destra{
width:19%;
height:auto;
float:left;
background-color:#336699;
}

[pastoweb]

Oddio che confusione.... tanto per cominciare hai due div con lo stesso ID e non va bene, poi non capisco quale sarebbe il div su cui vorresti gli angoli arrotondati, e tutte quelle tabelle cosa sono e quel ajax incluso non capisco cosa centra...

un bel link dove vedere cosa salta fuori da tutta quella roba ce l'hai?

[androita]

no, il link su cosa salta fuori non ce l'ho... provo a spiegarmi...
Ho una pagina html dove ce in div contenitore, che contiene div sinistra centro e destra, nel div di sinistra devo mettere le news (ecco spiegato tabella e aiax) pero a queste news voglio mettere una cornice arrotondata (immagine)... allora diviso la colonna sinistra in altri due div, dove nel primo metto l'immagine e le news e nel secondo div metto solo l'immagine, il problema è che il secondo div non tiene conto dell'altezza del primo e l'immagine della cornice non è alta come il primo div???

Spero di essere stato chiaro

Grazie

dimenticavo il codice della pagina html che avevo postato era una prova che avevo fatto con le tabelle, quello con i div è questo:

<div id="sinistra">

inizio div del meteo che funziona
<div id="CONTENT">
[img]img/barra_oriz1.GIF[/img]</div>
<div id="B_VER" style="background-image:url(img/barra_vert.GIF); height:165px">

<iframe title="Previsione meteo per Torino" name="previsione_meteo" src="http://www.tempoitalia.it/previsioni_meteo/meteo.php?loc=Torino&css=1" width="260" height="160" marginwidth="3" marginheight="0"
scrolling="auto" frameborder="0"></iframe>
</div>

<div id="B_VER2" style="background-image:url(img/barra_vert.GIF); height:165px"><span>
</span></div>
<div id="CONTENT">[img]img/barra_oriz2.GIF[/img] </div>


fine div del meteo che funziona





<div id="CONTENT">
[img]img/barra_oriz1.GIF[/img]</div>

<div id="B_VER" style="background-image:url(img/barra_vert.GIF); height:auto">

<table border="0" width="260">
<tr><td>

<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual newsbar.
// You can place this anywhere on your page.
-->
<div id="newsBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span> </div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-nbw"
type="text/javascript"></script>


<script type="text/javascript">
window._uds_nbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js?mode=new"
type="text/javascript"></script>


<script type="text/javascript">
function LoadNewsBar() {
var newsBar;
var options = {
largeResultSet : false,
title : "NEWS ITALIA",
horizontal : false,
autoExecuteList : {
executeList : ["Cronaca", "Politica", "Economia e Finanza", "Sport"]
}
}

newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
</script>



</td></tr></table>
</div>

<div id="B_VER2" style="background-image:url(img/barra_vert.GIF); height:800px;"><span></span></div>
<div id="CONTENT">[img]img/barra_oriz2.GIF[/img]</div>


</div>