Salve a tutti,
il problema stà nell'alteza del div "corpo".
Affinche la barra di destra navigation_dx si visualizzi tutta del colore che voglio a seconda della lunghezza del corpo centrale (la barra deve essere sempre lunga quanto il corpo e deve mantenere il colore di sfondo) hoimpostato il colore di sfondo del corpo centrale che rachciude le due zone principali del colore di sfondo interessato. A questo punto lascio invece bianco il colore di sfondo della parte centrale, ciò però comporta il fatto che se la barra di dx è + lunga mi si ripresenta lo stesso problema per la parte centrale, ovvero si colora tutto dello stesso colore della colonna di dx.
mostro struttura e il css utilizzato così che sia + chiaro
struttura:
<div id="container">
<div id="header"><?php require('top.php')?></div>
<div id ="corpo">
<div id="corpo_sinistra">
<div id="corpo_news">news</div>
<div id="corpo_prodotti">
Elementi vari
</div>
<div id="corpo_basso">
<div id="corpo_vetrina_verticale">immagine</div>
<div id="titolo_corpo_basso">TITOLO</div>
<div class="box_elemento_serie">
<div class="box_elemento_corpo_serie">
<div class="titolo_elemento_corpo_serie">titolo</div>
</div>
</div>
<div class="box_elemento_serie">
<div class="box_elemento_corpo_serie">
<div class="titolo_elemento_corpo_serie"></div>
</div>
</div>
</div>
</div>
<div id="navigation_dx">
<?php
if (isset($categoria)) {
?>
<div id="barra_verde_intestazione"><?php echo $lingua?></div>
<?php
$sqltxt="select *
$result = mysql_query($sqltxt) or mysql_error("Errore nella QUERY: $sqltxt.");
if (mysql_num_rows($result)==0)
{
?>
<div class="box_elemento_vuoto">
<div class="box_elemento_corpo">
<span style="font-size:11px; font-family:Geneva, Arial, Helvetica, sans-serif; color:#FFFFFF;">Siamo spiacenti ma non ci sono serie presenti in questa categoria.</span></p></div>
</div>
<?php
}
else
{
while ($row=mysql_fetch_array($result))
{
?>
<div id="barra_elemento_corpo"></div>
<div class="box_elemento">[img]immagine[/img]
<div class="box_elemento_corpo">
<?php echo $row[...]?></p><p style="margin-top:-14px;"><?php echo substr($row[...],0,120)?>...</p>
</div>
</div>
<?php
}
}
}
else {
//inizialmente non ho nessuna lista di prodotti o serie
?>
<div class="box_elemento_vuoto">
<div class="box_elemento_corpo"></div>
</div>
<?php
}
?>
</div>
</div>
<div id="footer"><?php require('bottom.php');?></div>
</div>
css:
#container{
width:800px;
margin:auto;
height:100%;
padding:0px;
text-align:left;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
}
#header
{
width:100%;
}
#corpo {
width:800px;
height:100%;
float:left;
margin-left:auto;
margin-right:auto;
background-color: #006633;
}
#corpo a {
color:#FF9933;
text-decoration:underline;
}
#corpo_sinistra
{
padding-top:10px;
width:550px;
float:left;
height:100%;
background-color: #FFFFFF;
padding-bottom: 10px;
}
#corpo_prodotti
{
width:171px;
float:left;
padding-bottom:0px;
}
#corpo_prodotti a {
color:#000000;
text-decoration:none;
}
#corpo_news
{
width:360px;
float:left;
padding-bottom:10px;
}
#barra_verde_intestazione
{
float:left;
background-color: #006633;
padding-top:5px;
padding-bottom:5px;
text-align:left;
width:230px;
margin-bottom:5px;
margin-top:5px;
margin-left: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
#corpo_basso {
width:530px;
float:left;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#corpo_vetrina_verticale {
width:29px;
height:100%;
float:left;
background-color: #006633;
}
#titolo_corpo_basso {
width:496px;
float:left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
margin-left:0px;
padding-left:5px;
background-color:#006633;
}
#navigation_dx {
float:left;
width:250px;
margin-top:0px;
text-align:left;
background-color:#006633;
padding: 0px;
height:100%;
}
#footer {
width:795px;
margin:auto;
text-align:right;
padding-top:25px;
padding-bottom:3px;
padding-right:5px;
float:left;
color:#333333;
font-family: Geneva, Arial, Helvetica, sans-serif;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
font-size: 11px;
background-color: #FFFFFF;
font-weight: bold;
}
#barra_elemento_corpo {
float:left;
background-image:url(img/barra_verde_news.jpg);
background-repeat: repeat-x;
width:230px;
height:1px;
}
#corpo_news_letta {
float:left;
width:510px;
text-align:justify;
margin-right:20px;
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #006633;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
img {
border:0px;}
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
position:relative;
margin-top:0px;
background-color: #738341;
}
.elenco_prodotti
{
background-color:#DBDBDB;
width:166px;
float:left;
padding-bottom:5px;
height: 25px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.td_prodotti_catalogo
{
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color:#DBDBDB;
color: #000000;
}
.td_sotto_prodotti_catalogo
{
background-image:url(img/linea_sotto_catalogo.jpg);
font-family: Geneva, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-position: bottom;
font-size: 11px;
text-decoration: none;
padding-bottom:1px;
padding-top:1px;
}
.box_elemento {
width:250px;
margin-bottom:10px;
margin-top:5px;
float:left;
}
.box_elemento_vuoto {
width:250px;
height:250px;;
margin-bottom:10px;
margin-top:0px;
float:left;
}
.box_elemento img{
float:left;
border: 1px solid #666666;
margin-left:6px;
}
.box_elemento_corpo {
float:left;
margin-left:10px;
width:180px;
clear:right;
height:85px;
font-size:11px;
}
.box_elemento_serie {
width:240px;
float:left;
margin-top:10px;
margin-left:5px;
margin-right:5px;
padding-bottom:10px;
}
.box_elemento_serie img{
float:left;
border: 1px solid #666666;
margin-left:5px;
margin-right:5px;
}
.box_elemento_corpo_serie {
float:left;
width:100%;
text-align:left;
}
.box_elemento_serie a{
color:#FF9933;
text-decoration:none;
}
.titolo_elemento_corpo_serie{
width:160px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
}
.data_elemento_corpo_serie
{
width:160px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
float:left;
text-align: justify;
font-style: oblique;
text-decoration: none;
}
.stralcio_elemento_corpo_serie
{
width:160px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
float:left;
text-align: justify;
}
Ho provato inizialmente ad impostare l'altezza al 100%, ma logicamente considera iol 100% del contenuto interno e non del div esterno che lo contiene!
Qualche idea?
Grazie
Roberto
Rispondi quotando