PDA

View Full Version : [CSS] Disperazione ad impostare correttamente l'altezza di un elemento


D4rkAng3l
18-09-2008, 12:36
Ciao,
devo modificare una pagina web non realizzata da me (e con codice un po' caotico), potete vederla quà: http://www.siatec.net/andrea/archivio/quadricromie/page.html

Come potete vedere l'header contiene un javascript che mostra delle immagini in rotazioni. Tali immagini hanno un'altezza di 156 px e di conseguenza anche l'elemento che contiene lo script dovrebbe avere tale altezza affinchè la visualizzazione delle immagini sia corretta, invece l'altezza di tale elemento mi pare essere minore...credo 100 px ad occhio e croce e ciò causa un errore di visualizzazione.
Ho provato ad impostare un'altezza di 156px per i div con id pari a: sitename e my_slideshowhome ma la situazione peggiora ulteriormente e non capisco proprio cosa debba cambiare per impostare la corretta altezza dell'elemento che contiene il javascript.
Vi prego di darmi una mano.

Il codice HTML e CSS è il seguente:


<!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" xml:lang="it" lang="it" dir="ltr">

<head id="Head1"><title>
Home
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="imagetoolbar" content="no" /><meta name="Description" content="Home" /><meta name="Keywords" content="Home" />
<script src="http://www.bbcsite.com/template/riferimento/common.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.creoinvento.com/wi_images/stile.css" media="screen" type="text/css" />
<style type="text/css">
#mainmenu a {
color:#FFFFFF;
}

#mainmenu a:hover {
color:#505050;
}

#mainmenu a.current {
color:#505050;
}
</style>


<style type="text/css">
<!--
/* CSS Document */
#sitename {
color:#ffffff;
height: 156px;

}
#content {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-color: transparent;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
#container {
background:#000000 url(http://www.bbcsite.com/immagini/ecommerce/bodybgquadricorime.jpg) repeat-x;
}

a:link, a:visited, a:hover {
color: #FFFFFF;
text-decoration: none;
}




-->
</style>

<script type="text/javascript" src="http://www.bbcsite.com/template/riferimento/slideshow/mootools.js"></script>
<script type="text/javascript" src="http://www.bbcsite.com/template/riferimento/slideshow/slideshow.js"></script>

</head>

<body>
<form name="frm" method="post" action="Default.aspx" id="frm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4OTA0OTIzMTFkZKjwNoneGnrIpdgMDy7tiI7WXaW9" />
</div>

<div id="container">
<div id="sitename">

<div align="left" id="my_slideshowhome" class="slideshow"><img width="1000" height="156" src="img/header2.jpg" alt="A picture" /> </div>
<script type="text/javascript">
myShow = new Slideshow('my_slideshowhome', {type: 'fade', duration: [2000, 3000], width: 1000, height: 156, hu: 'img/', images: ['header2.jpg','header3.jpg','header4.jpg']});
</script>
</div>

<div id="mainmenu">
<div id="ItemMenu"><div id="navcontainer"><ul id="navlist"><li><a href="/">Home</a></li>
<li><a href="http://www.bbcsite.it/public/siti/ecommerce/paginaita5576.aspx">Prodotti</a></li>
</ul></div></div>
</div>


<div id="wrap">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">

<td width="20%"><div id="leftside">
<div class="STRMyConfLatosx" style="text-align:left"></div>
</div></td>
<td width="60%"><div id="content">
<div id="ItemCorpoPresentazione">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><h1><div class="STRPRODdescriptionLINGUA">Home</div></h1></td>
</tr>
<tr>

<td valign="top"><p><font size="4">I prodotti in vendita su questo sito sono fittizi, servono esclusivamente per vedere il funzionamneto dell' ecomerce.<br /><br /><img alt="" src="http://www.bbcsite.it/public/library/ClipArt_Animate/Economia/eco153[1].gif" /></font></p></td>
</tr>
</table>
</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">

<div id="ItemCorpoProdotto"> </div>


<div id="ItemCategorieRipeti">
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="2">

</table>
</div>
</td>
</tr>
</table>
</div></td>
<td width="20%"><div class="STRMyConfLatodx" style="text-align:right"></div></td>

</tr>
</table>
<div class="clearingdiv">&nbsp;</div>
</div>
</div>

<div id="footer">
<div class="indirizzo">
<span class="StrSuppan_indir">Ecommerce Demo</span>
<span class="StrSuppan_indir">V.le della Repubblica</span>
<span class="StrSuppan_citta">Tolentino</span>
<span class="StrSuppan_prov">(MC)</span>
<span class="StrSuppan_cap">62029</span>

<span class="StrSuppan_telef">0733 000000</span>
<span class="StrSuppan_faxtlx">0733.000000</span>
<span class="StrSuppsupplierEmail">ecommerce<img src="http://www.creoinvento.com/wi_images/null.gif" alt=""/>@<img src="http://www.creoinvento.com/wi_images/null.gif" alt=""/>bbcsite.it</span>
<div class="STRMyConfPiePagina"></div>
</div><!--/div.indirizzo-->
<div class="Poweredby"><p>Powered by <a href="http://www.bbcsite.com/">BBC</a></p></div>
<div class="StrSuppidSupplier">

<p><SCRIPT LANGUAGE="javaScript">document.write(txt1);</SCRIPT> 109 PI 01111111 <a href="http://www.bbcsite.it/public/siti/ecommerce/viewita.aspx">Site Map</a></p>
</div>

<p>
<script type="JavaScript">document.write('<s' + 'cript src="' + txt2 +'109">');document.write('</' + 's' + 'cript>');</script>
<!--Ultimo agg. 15/09/2008 0.22.57 V1907 pagita6370-->

</p>
</div>
</form>
</body>
</html>


Grazie
Andrea

Oceans11
18-09-2008, 13:09
Perchè imposti le altezze dei div a 156????? le foto sono alte 132px....e così sembra che funzioni, almeno su firefox 3.0.1

D4rkAng3l
18-09-2008, 14:08
Perchè imposti le altezze dei div a 156????? le foto sono alte 132px....e così sembra che funzioni, almeno su firefox 3.0.1

ok si...sono 132 px e non 156...il fatto è che sulla pagina si vede male perchè mi pare che l'altezza visualizzata non sia quella corretta ma sia 100px o comunque meno di 132 px...come mai?

Oceans11
18-09-2008, 14:17
l'altezza visualizzata non sia quella corretta ma sia 100px o comunque meno di 132 px...come mai?

come fai a dire che sono meno di 132???a me non sembra....

D4rkAng3l
18-09-2008, 14:20
come fai a dire che sono meno di 132???a me non sembra....

nella pagina sono sicuramente meno...prova ad aprire una di quelle immagini in un'altra finestra e lo vedi chiaramente

Oceans11
18-09-2008, 15:55
mmm...a me non sembra proprio....

vedi che a me le foto hanno la stessa dimensione. Ma che browser usi?