Mi sono trovato nella necessità di creare una lista <ul>[*] nella quale i diversi elementi sono composti da un Codice e da una Descrizione. Ogni elemento è anche un Link.
La richiesta che ho avuto era, per ogni elemento, di posizionare a sinistra i Codici e di allineare verticalmente tutte le Descrizioni, inoltre, al passaggio del mouse, ogni elemento "href" avrebbe dovuto rispondere nella sua interezza alle variazioni impostate (non solo il Codice o solo la Descrizione).
Non sono riuscito a trovare suggerimenti sul forum e quindi ho fatto diverse prove, compresa questa.
Mi è stato detto che la soluzione che sto per proporre non è "semanticamente corretta" e non mi metto certo qui a disquisire di semantica, però a me pare funzionare in tutte le circostanze in cui l'ho provata e con almeno I.E. 6 e 7 e con Firefox. La propongo perchè mi è sembrata utile per chi volesse evitare di affrontare lo stesso problema con le tabelle e, ovviamente, accetterò le critiche che mi aiuteranno a migliorarla ed i suggerimenti aggiuntivi.
codice:
<body>
<container>
<div class="navigation">
<ul>
<li class="actvelink"><>04m<span class="tab">Mele</span>[*]06b<span class="tab">Pere</span>[*]08f<span class="tab">Limoni</span>[*]13kl<span class="tab">Banane</span>[*]19gk<span class="tab">Ciliegie</span>[*]20<span class="tab">Meloni</span>[*]27h<span class="tab">Ananas</span>[/list]
</div>
</div>
</body>
CSS:
div.navigation {width:253px; background-color:transparent; float:left; display:block; margin: 0; position: absolute; top: 125px; left: 2px}
div.navigation ul{list-style-type: none; margin: 0 !important; margin: 14px 0 0 0; padding: 0; border:0; text-align:left; display:block}
div.navigation li{margin: 0; padding:0; display:block; border:0}
div.navigation a{padding:0 0 1px 2px;
margin:-1px 0 0 0 !important; margin: -16px 0 0 0;
background-color:transparent;
color:#FFFF00;
text-align:left;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size:10px;
line-height: 1.35em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; border:0;
display:block;
letter-spacing: -0.07em}
div.navigation a:hover{background-color:#EAEAEA; color:#333333}
div.navigation li.activelink a{font-weight:bold;letter-spacing: -0.03em; word-spacing: -0.15em; color:#CCFF99}
div.navigation li.activelinka a:hover{font-weight:bold;letter-spacing: -0.03em; word-spacing: -0.15em; color:#333333}
/* regola per spostarsi di uno spazio prefissato. Variando il valore di "left" si spostano tutte le "Descrizioni" insieme*/
.tab{position:absolute; left:39px; cursorointer; padding-top: 1px}
Ancora grazie per chi avesse voglia di migliorare questa soluzione.
Rispondi quotando