xhtml & css - problema liste
Inviato: gio 6 set 2007, 20:29
Ciao a tutti,
il recente post di bart sulla programmazione in C++ mi ha rincuorato, credevo di non poter postare quì per un problema del genere...
provo a spiegarmi, seguendo quest'articolo su "a list apart" ho messo (o meglio sto mettendo) un menù nel mio sito scritto appunto in xhtml e che fa uso di un css esterno...
Il menu in questione è formato da 5 bottoni, che linkano le sezioni principali del sito, quello che vorrei fare è far apparire in qualche modo "differente" dal resto dei bottoni quello relativo alla sezione in cui ci si trova...
Provo a farvi un esempio:
Adesso vi posto il codice che ho usato io...
Questo è l'xhtml:
E questo è il css:
solo che quest'approccio è sbagliato, infatti viene completamente ignorato quanto descritto dall'ultima regola del css, quella relativa all'id "cwd"...
Qualcuno di voi sa suggerirmi come potrei superare questo ostacolo??
Grazie mille a tutti...
il recente post di bart sulla programmazione in C++ mi ha rincuorato, credevo di non poter postare quì per un problema del genere...
provo a spiegarmi, seguendo quest'articolo su "a list apart" ho messo (o meglio sto mettendo) un menù nel mio sito scritto appunto in xhtml e che fa uso di un css esterno...
Il menu in questione è formato da 5 bottoni, che linkano le sezioni principali del sito, quello che vorrei fare è far apparire in qualche modo "differente" dal resto dei bottoni quello relativo alla sezione in cui ci si trova...
Provo a farvi un esempio:
- home
linux
downloads
links
- home
linux
downloads
links
Adesso vi posto il codice che ho usato io...
Questo è l'xhtml:
Codice: Seleziona tutto
<div class="colonne floatleft" id="button">
<ul>
<li id="cwd"><a>home</a></li>
<li><a href="linux/index.html" title="linux page">linux</a></li>
<li><a href="various/hacking.html" title="hacking page">hacking</a></li>
<li><a href="scripting/index.html" title="scripting page">scripting</a></li>
<li><a href="various/downloads.html" title="downloads page">downloads</a></li>
<li><a href="various/links.html" title="links page">links</a></li>
</ul>
</div>
Codice: Seleziona tutto
Body { background-color:#000; color:#00F; font-family:monospace,serif,sans-serif; margin:0; padding:0; font-size:1em;}
div { margin:0; padding:0;}
p { margin:0; padding:12px}
a { color:#ffa; text-decoration:none;}
a:hover {color:#fff;}
.floatleft { margin:0; float:left;}
.colonne { min-height:400px;}
#button { width:12%; font-weight:bold; margin-top:10px; border-right:1px solid #000; padding:0 0 1em 0; margin-bottom:1em; background-color:transparent; color:#00f;}
#button ul { list-style:none; margin:0; padding:0; border:none;}
#button li { border-bottom:1px solid #00d; margin:0;}
#button li a { display:block; padding:5px 0 5px 0.5em; border-left:10px solid #999; border-right:10px solid #bbb; background-color:#666; color:#00f; text-decoration:none; width:82%;}
#button li a:hover { border-left:10px solid #aaa; border-right:10px solid #ccc; background-color:#777; color:#00f;}
#cwd { background-color:#6495ED; color:#00f;}
Qualcuno di voi sa suggerirmi come potrei superare questo ostacolo??
Grazie mille a tutti...
