Buonasera a tutti,
ho cercato nelle varie discussioni ma non mi pare di aver trovato niente che facesse al caso mio; quindi vi pongo il mio problema, sperando che qualcuno possa essere così gentile da aiutarmi.
Sto preparando la nuova home page per il sito del club di cui faccio parte: cerco di darvi una visione generale dell'impostazione della pagina:
-un div wrapper, all'interno del quale metto tutto in modo che resti tutto alla stessa largezza
-un header
-un container, all'interno del quale ho messo
-un menu a minitabs in alto, e poi sotto
-un div sx, posizionato relativamente e allineato a sinistra
-un div dx (in questo caso chiamato "avvertenza"), posizionato anch'esso relativamente e allineato a destra
-un wrapper, che poi sistemerò
Inizialmente, il div dx era posizionato assolutamente, come spiegava Alessandro Fulciniti in uno dei suoi tutorial; poi però ho voluto posizionarlo relativamente, e lì sono venuti fuori i casini.
In pratica, se imposto l'altezza del div Container con height:auto o heght: 100%, il div Container rimane alto quanto il minitabs (ho provato anche a cambiare altezza al minitabs, e ho accertato che è così);
se invece al div container metto un'altezza fissa (es. 800px), allora il suo sfondo si vede per 800px e il div sx "sborda" da sotto.
Io comunque ho bisogno di avere l'altezza del div container variabile, per adattarsi all'altezza del div sx.
Vi posto qui la parte di codice relativa al div in questione e il css:
CODICE HTML:
<div id="container">
<ul id="minitabs">
<li id="current">Home
[*]L'Auto
[*]Il Club[/list]
<div id="sx">
<div id="data">25 ottobre 2009</div>
<div class="post" id="3">
<p class="titolo">Fiera di Padova 2009</p>
Già on-line la pagina relativa alla Fiera di Padova 2009;</p>
per la prima volta aggiorneremo la pagina in live, direttamente dalla fiera, quindi tenetevi in contatto!</p>
</div>
<div id="data">21 ottobre 2009</div>
<div class="post" id="2">
<p class="titolo">Fiera di Padova 2009: Cunico nostro ospite</p>
Sabato 24 ottobre, ore 12: è confermata la presenza
nel nostro stand del campione Gianfranco Cunico,
che festeggerà con noi i 30 anni della sua vittoria nel
Trofeo A 112 Abarth del 1979.</p>
</div>
<p class="titolo">Archivio notizie precedenti</p>
<div id="notizievecchie">
<div id="data">01 ottobre 2009</div>
<div class="post" id="1">
<p class="titolo">Raduno Internazionale 2009</p>
Raduno internazionale 2009: disponibile la pagina con il resoconto e le foto di questo maginifico weekend di festeggiamenti per i 20 anni del club.</p>
</div>
</div>
</div>
<div id="avvertenza">
<p class="titolo">Avvertenza:</p>
I dati, le informazioni e le notizie contenute in questo sito sono state tratte da documentazioni ufficiali o, molto spesso, sono frutto di una attenta e rigorosa indagine storica; l’intento è quello di fornire una esposizione realistica e veritiera sulla storia e le caratteristiche di questa versione sportiva della A112.
... </p>
Grazie per la collaborazione e buona visita. </p>
</div>
</div>
CSS:
#container {
width: 800px;
margin:0 auto;
position: relative;
height: auto;
/*height: 100%;*/ /*IL PROBLEMA E' QUI: METTENDO L'ALTEZZA AL 100%, o auto, VIENE ALTO COME IL MINITABS.*/
border: none;
/*background:url(images/nuova_home/blu_interno_sopra.png) no-repeat center top;*/
background-color: #cfc;
}
/* sezione di navigazione con minitabs */
ul#minitabs{list-style: none;
margin: 0;
padding: 7px 0;
padding-left:20px;
font: "Lucida Sans Unicode",Lucida Grande,Lucida,Arial,sans-serif;
text-align: left;
white-space: nowrap;
}
ul#minitabs li{display: inline;
margin: 0 3px;
}
ul#minitabs a{text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999
}
ul#minitabs li#current a{border-color:#36f;
/*font: "Georgia",serif, times;*/
font-style: italic}
ul#minitabs a:hover{border-color:#39c;
color: #666}
/* div sinistro: qui metterò le informazioni, diverse pagina per paginaa */
#sx{
position:relative;
width:60%;
float: left;
height: auto;
min-height: 353px; /*non viene interpretata da IE6*/
height: auto !important; /*serve per Opera, Mozilla e gli altri browser per sovrascrivere la terza dichiarazione che vincolerebbe in ogni caso l'altezza del box; IE6 non la vede*/
height: 353px; /*per IE6, che la interpreta come min-height*/
padding: 10px;
border:none;
/*background-color: #09c;*/
}
div#avvertenza {float: right;
width:35%;
margin-top: 50px;
padding:10px;
background: url(sfondoRighe_ombra.jpg) left top;
font: 90% Verdana, "Arial", Helvetica, sans-serif;
overflow:auto;
}
#avvertenza a{font: bold 1.2em "Arial", Verdana, sans-serif;}
.post {background: url(sfondoRighe.jpg) left top;
padding: 10px;
margin: 20px;
margin-top: 0px;
font: 90% Verdana, "Arial", Helvetica, sans-serif;
}
.titolo{font: italic 1.4em "Georgia", Times New Roman, Times, serif;
color: #36f;
text-align:center;
margin-bottom:20px;
}
div#data {height: 20px;
width: 200px;
margin-left:20px;
margin-top: 50px;
border: solid 1px #ccc;
align:left;
text-align:center;
font: 1.2em "Georgia", Times New Roman, Times, serif;
}
div#notizievecchie{
height: 150px;
overflow: auto;
border: solid 1px #ccd;
}
SCUSATE PER IL PAPIRO E GRAZIE MILLE A CHIUNQUE SAPRA' AIUTARMI!

Rispondi quotando