xhtml & css - problema liste

Area di discussione libera.

Moderatore: Staff

Regole del forum
1) Rispettare le idee altrui.
2) Evitare le offese dirette.
3) Leggere attentamente le risposte ricevute
4) Scrivere i messaggi con il colore di default, evitare altri colori.
5) Scrivere in Italiano o in Inglese, se possibile grammaticalmente corretto, evitate stili di scrittura poco chiari, quindi nessuna abbreviazione tipo telegramma o scrittura stile SMS o CHAT.
6) Appena registrati è consigliato presentarsi nel forum dedicato.

La non osservanza delle regole porta a provvedimenti di vari tipo da parte dello staff, in particolare la non osservanza della regola 5 porta alla cancellazione del post e alla segnalazione dell'utente. In caso di recidività l'utente rischia il ban temporaneo.
Rispondi
Avatar utente
danix
Staff
Staff
Messaggi: 3289
Iscritto il: ven 27 ott 2006, 19:32
Nome Cognome: Danilo M.
Slackware: 64 current
Kernel: 6.12.13 x86_64
Desktop: i3
Località: Verona (VR)
Contatta:

xhtml & css - problema liste

Messaggio da danix »

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:
  • home
    linux
    downloads
    links
Questo è più o meno il contenuto del menù, se io mi trovo nella home, vorrei che si vedesse così:
  • home
    linux
    downloads
    links
Capite cosa intendo??
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>
E questo è il css:

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;}
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...
danix
danix ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

stetroi
Linux 0.x
Linux 0.x
Messaggi: 70
Iscritto il: mer 5 gen 2005, 0:00
Località: Madrid

Messaggio da stetroi »

Per prima cosa sistema il link di home (a href) e poi cambia l'ultima riga del codice css cosi:

#cwd a { background:#6495ED !important; color:#00f;}

stefano

Avatar utente
aschenaz
Staff
Staff
Messaggi: 4623
Iscritto il: mer 28 lug 2004, 0:00
Nome Cognome: Nino
Slackware: current
Kernel: 5.4.x
Desktop: KDE
Località: Reggio Calabria
Contatta:

Messaggio da aschenaz »

Innanzitutto, per ragioni di accessibilità, sarebbe meglio non usare una lista per un menu perché i link dovrebbero essere separati l'uno dall'altro da almeno un carattere.
Io di solito, mi regolo così (la formattazione è solo un esempio; occhio che sto usando un fondo pagina scuro):

Codice: Seleziona tutto

.menu { margin:6px 8px 4px 0; color:#aaa; background:transparent;
        border-bottom:1px dotted #fff; border-left:1px dotted #fff}
.menu a {text-decoration:none; font-weight:bold; color:#ff8}
.menu a:hover {color:#aaa}
per quanto riguarda il css, mentre...

Codice: Seleziona tutto

<p class="menu"> &nbsp;&middot; home</p>
<p class="menu"> &nbsp;&middot; <a href="index.php?page=news" accesskey="n" title="accesskey n">news</a></p>
<p class="menu"> &nbsp;&middot; <a href="index.php?page=chi-siamo" accesskey="w" title="accesskey w">chi-siamo</a></p>
<p class="menu"> &nbsp;&middot; <a href="index.php?page=gallery" accesskey="g" title="accesskey g">gallery</a></p>
etc...
per quanto riguarda l'xhtml.

Nota che ho messo il carattere &middot; come separatore e che ho usato le accesskey, sempre per ragioni di accessibilità.

Inoltre, vista la ripetitività del codice, ho preferito gestire tutto col php, inserendo i link in un array...

Ciao,
nino

Avatar utente
danix
Staff
Staff
Messaggi: 3289
Iscritto il: ven 27 ott 2006, 19:32
Nome Cognome: Danilo M.
Slackware: 64 current
Kernel: 6.12.13 x86_64
Desktop: i3
Località: Verona (VR)
Contatta:

Messaggio da danix »

grazie mille a entrambi per l'aiuto...

@stetroi:
ma è normale che il tag !important; non sia annoverato da quanta+?? me lo segnala addirittura come errore...
Al fine della validazione del css quel tag è un problema??

@ninobi:
volevo chiederti per la questione delle accesskey, come vengono attivate?? basta premere il tasto corrispondente o c'è una combinazione di tasti da usare tipo Alt+"accesskey"???

Ancora grazie mille per le informazioni...
A presto...
danix
danix ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

Avatar utente
aschenaz
Staff
Staff
Messaggi: 4623
Iscritto il: mer 28 lug 2004, 0:00
Nome Cognome: Nino
Slackware: current
Kernel: 5.4.x
Desktop: KDE
Località: Reggio Calabria
Contatta:

Messaggio da aschenaz »

danix85 ha scritto: @ninobi:
volevo chiederti per la questione delle accesskey, come vengono attivate?? basta premere il tasto corrispondente o c'è una combinazione di tasti da usare tipo Alt+"accesskey"???
Dipende dai browser e dal SO:
in genere è alt (o shift+alt) +accesskey...

Avatar utente
danix
Staff
Staff
Messaggi: 3289
Iscritto il: ven 27 ott 2006, 19:32
Nome Cognome: Danilo M.
Slackware: 64 current
Kernel: 6.12.13 x86_64
Desktop: i3
Località: Verona (VR)
Contatta:

Messaggio da danix »

ninobi ha scritto:Dipende dai browser e dal SO:
Grazie nino,
un'altra cosa, sempre se le conosci, mi potresti dire le varie combinazioni di tasti in base al browser e al SO, così le posso spiegare nelle varie pagine??
una cosa tipo win + ie = tasto1 + tasto2 + accesskey

Sempre se non ti rubo troppo tempo...
grazie mille per l'aiuto

A presto
danix
danix ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

Avatar utente
aschenaz
Staff
Staff
Messaggi: 4623
Iscritto il: mer 28 lug 2004, 0:00
Nome Cognome: Nino
Slackware: current
Kernel: 5.4.x
Desktop: KDE
Località: Reggio Calabria
Contatta:

Messaggio da aschenaz »

Forse facciamo prima così:
http://accessibile.csi.it/realizzare/ac ... ndex.shtml

:D

Ciao,
nino

stetroi
Linux 0.x
Linux 0.x
Messaggi: 70
Iscritto il: mer 5 gen 2005, 0:00
Località: Madrid

Messaggio da stetroi »

Il tag !important e' css2.1 valido, non preoccuparti di quanta, evidentemente non l'hanno messo nella lista...

ciao,

stefano

samiel
Staff
Staff
Messaggi: 5511
Iscritto il: ven 16 gen 2004, 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Messaggio da samiel »

In Quanta puoi anche aggiungere dei tag personalizzati

M.

Rispondi