premesse:
tutto l'html e' generato da un CMS sul quale non ho controllo, quindi l'html non e' modificabile. L'unico modo che ho per personalizzare il layout del sito generato dal CMS e' usare i CSS (per fortuna gli sviluppatori di questo CMS hanno avuto l'accortezza di rendere il tutto abbastanza gestibile solo con CSS)
il CSS deve seguire determinate regole e quindi anche li ho le mani legate ...
purtroppo i limiti sono tanti ma in qualche modo devo farlo funzionare
ora il problema e' il solito, su IE6 il render funzia bene ... su FF (2.0.0.11) non va bene .. visto che prevalentemente sto sito viene usato con IE6 me ne infischierei anche, ma voglio che vada bene anche li... non si sa mai che sti furboni che gestiscono i ns. computers decidano di fare una scelta giusta. su IE7 non ho modo di provarlo perche' non posso installarlo (sempre a causa dei furboni di cui prima) ancora.
io credo che solo guardando l'effetto che fa, sareste in grado di capire qual'e' il problema (guardate l'allegato).
in pratica i box di sotto il menu si allineano sulla sinistra con l'estremo della voce del menu selezionata. piu' sono a destra nel menu e piu' i box sottostanti vanno a finire a destra.
ora il menu ha il seguente codice css:
ora non chiedetemi perche' e' stata usata una struttura cosi' poco chiara ... il codice html relativo che contiene il menu/* Main menu wrapper */
#pageNavBar {
background: #444; border-bottom: 1px solid #ccc;
margin-left:137px;
width:750px;
}
/* Single menu entries */
.mainNav
{
margin: 0; padding: 0 0 0 15px;
height: 39px;
list-style: none;
line-height: 3em;
color: #fff;
/*border-bottom: 1px solid #999;*/
background: transparent url("images/vista_v_bar.png") repeat-x top;
}
.mainNav li
{
float: left;
height: 35px;
margin-right: 1.5em;
white-space: nowrap;
}
.mainNav li.current
{
cursor: pointer;
margin: 0; padding: 1px 1.1em 1px 1.1em;
height: 39px;
border: 1px outset #fff;
background: transparent url("images/vista_v_bar_on.png") repeat-x top;
color: #fff;
font-weight: bold;
}
.mainNav li.current span.menuTitle { color: #fff; }
.mainNav a
{
display: block;
float: left;
margin: 0; padding: 1px 1.1em 1px 1.1em;
color: #fff;
text-decoration: none;
border:none;
}
.mainNav a:hover
{
cursor: pointer;
margin: 0; padding: 0 1em 0 1em;
color: #fff;
border: 1px outset #fff;
height:39px;
background: transparent url("images/vista_v_bar_on.png") repeat-x top;
}
.mainNav li.current a:hover span
{
display: block;
}
/* submenus */
.mainNav ul
{
height: auto;
background: #fff;
color: #333;
line-height: normal;
}
.mainNav ul li
{
display: block;
float: none;
height: auto;
border: none;
line-height: normal;
}
.mainNav ul li a
{
float: none;
display: inline;
line-height: normal;
}
cerco di scrivere qui la struttura generica della pagina, tagliando tutte le parti inutili<div id="pageNavBar">
<ul class="mainNav">
<li class="first">Home
[*]Organization
[*]Training
<li class=" current"><span>Documentation</span>
[*]Support
<li class="last">Contacts[/list]
</div>
spero che l'incolonnamento si mantenga...<div id="MasterHeader">
<ul id="primaryNav">[*]Contact[*]My Profile[*]Sign Out[/list]
</div>
<div id="MasterContent">
<div id="pageNavBar">
...il menu di sopra....
</div>
<div id="contentarea">
<table class="columns" cellspacing="15" border="0">
<tr>
<td class="column">
<div class="colHead"><h2>Documentation</h2></div>
<div class="contentPanel" partid="wp343363742">
<div class="contentHead">
<h3 class=""></h3>
</div>
<div style="display:block;" class="contentBlock" >
<p style="TEXT-ALIGN: center">
[img]GetImage.aspx?AccountID=xxxx&ID=xx[/img]
<span style="FONT-SIZE: 14pt; COLOR: #ff0000; FONT-FAMILY:
Verdana">
UNDER WORK
</span>
</p>
</div>
</div>
<span class="extra"></span>
</td>
</tr>
</table>
</div>
</div>
scusate la lunghezza del messaggio ma non saprei come meglio spiegare il problema, se volete posso postare anche il css dei vari wrapper della pagina come sopra.
io intanto continuo a cercare di capire qual'e' il prob, ma se qualche anima pia mi aiuta ne sarei felice.... :master:
Rispondi quotando
