spazio tra parole

[remixe]

ciao a tutti,
ho realizzato un menù orizzontale e l'ho messo tra i tag

.



home servizi chisiamo dove siamo contatti</p>

ora... vorrei sapere quale regola devo dare affinchè io possa regolare lo spazio bianco tra le parole (esempio tra home e servizi...tra servizi e chi siamo etc)
una regola che poi inserira all'interno di

come class mi permetta dunque di
allargare il menù a mio piacimento.

GRAZIE

[pierofix]

La proprietà CSS per regolare lo spazio tra parole è word-spacing:

- http://www.w3.org/TR/CSS21/text.html...f-word-spacing
- http://htmldog.com/reference/cssprop.../word-spacing/

Il problema più grosso invece è dato dalla struttura che hai deciso di dare al menù. Ti interessa approfondire?

[remixe]

ciao Pierofix,
innanzitutto grazie per i consigli e i riferimenti che mi hai dato.
che intendi per struttura che devo dare al menu?
si mi interessa approfondire, anche perchè sto facendo un restyling ad un sito
e ho deciso di passare dalle tabelle ai css anche perchè mi è sembrato di capire
che il codice ottimizzato con i css sia ad hoc anche per la fase successiva che intendo intraprendere e cioè il posizionamento sui motori di ricerca che necessita appunto di un codice ottimizzato con tag h1

etc, cosa che i css offrono all grande.
se ti colleghi al seguente indirizzo puoi vedere il sito di cui dovrei fare il restyling e quindi ti puoi fare un idea del tutto.
in realtà il cliente non mi ha chiesto un restyling grafico (premetto che la grafica esistente non l'ho fatta io :-)) )ma un posizionamento sui motori di ricerca ed io ho deciso di ricostruire lo stesso layout però eliminando le tabelle con i soli css
in maniera tale da poterlo poi ottimizzare per i motori:


www.artedelverde.com

fammi sapere

ciao e GRAZIE

[pierofix]

Allora, per progettare nel "nuovo modo" la prima cosa che serve è guardare ad un documento web in modo diverso: occorre innanzitutto concentrarsi sul contenuto.

Concentrarsi sul contenuto significa analizzarlo, organizzarlo in aree logiche e strutturarlo con i giusti marcatori di (X)HTML.

Per quanto riguarda i menù, l'abitudine ormai più diffusa è quella di pensare ad essi come ad una lista di link. Ecco un classico esempio:

<ul id="navigazione">[*]Blog[*]Informazioni[*]Fotografie
<ul>

Perchè non usare una soluzione tipo la tua?

   Blog 
   Informazioni 
   Fotografie
</p>

La motivazione principale è da ricercare nella materia dell'accessibilità ai contenuti web, la quale insegna che tutti i link consecutivi devono essere separati da almeno un carattere stampato (punto 10.5):

- http://www.aib.it/aib/cwai/WAI-trad....-accessibility

E' infatti noto che gli screen-reader potrebbero leggere come uno solo tutti i link del menù, rendendolo di fatto inutilizzabile. Rendere poi orizzonate una lista è semplicissimo con i CSS, ma questo è il passo successivo.

Spero sia chiaro il concetto.

[remixe]

sei stato perfetto Piero,
ho infatti realizzato il menu come mi hai indicato tu mi sembra semplice ma efficace.
In generale mi sembra di capire che la difficoltà principale dei css non sia tanto nella applicazione di stili tipografici, quanto poi nel posizionare le divese aree (gabbie) in un layout nel quale ogni elemento influenza gli altri è come se le gabbie fossero immerse in un liquido fluttuante...comunque credo basti provare e riprovare.

Ah, dimenticavo, mi hai fatto notare giustamente che poi si pone anche il problema relativo all'accessibilità, volevo chiederti se mi sai indicare
testio o dispense ufficiali circa le regole da seguire per l'accessibilità dei siti, io tempo fa avevo dato un occhiata alla legge stanca ma mi era sembrato si capire che era tutto ancora in alto mare, non c'era nulla di definitivo ancora...

[pierofix]

Ecco le risorse principali per tuffarsi nel fantastico mondo dell'accessibilità ai contenuti web:

• DOCUMENTI UFFICIALI W3C
  
  1. lingua inglese: www.w3.org/TR/wcag10/
  2. traduzione italiana non ufficiale (ma ottima): www.aib.it/aib/cwai/WAI-trad.htm
• SITI DI RIFERIMENTO
  
  1. www.webaccessibile.org
  2. www.webaim.org
• LIBRI ONLINE
  
  1. Building Accessible Websites (te lo super consiglio): http://joeclark.org/book/sashay/serialization/
  2. Affrontare l'Accessibilità per un sito più accessibile in 30 giorni: www.francocarcillo.it/dive/
• FORUM
  
  1. http://forum.diodati.org

Ti consiglio di iniziare da questi documenti e poi lanciarti nella lettura del documento ufficiale W3C:

- www.webaim.org/intro/
- www.webaim.org/info/asdvideo/

[remixe]

GRAZIE Piero,

inizierò a buttarmi a capofitto...full immersion in queste documentazioni

quando incontro dubbi o perplessità non esiterò a contattarti

ciao GRAZIE ancora

[pierofix]

Originariamente inviato da remixe
quando incontro dubbi o perplessità non esiterò a contattarti

Certo: siamo qua apposta!

[remixe]

ops...mi sono accorto di una cosa, nella regola per il menù ho messo word-spacing, prima quando il menu era solo testuale mi funzionava all agrande ora che ho aggiunto gli href di collegamento quella regola non me la prende più pur continuando a prendere tutte le altre.

la regola è:

.barra {
text-align: left;
front size: 0em;
font-size: 11px;
font-weight: bold;
margin-top: inherit;
word-spacing: 500px;

}


l'HXTML a cui è indirizzata la regola invece:

<div id="Header">
<p class="motto">'Da oltre vent'anni al servizio del vostro giardino!'</p>


<p class="barra">
Home
|Chisiamo
|Servizi
|Referenze
|Contattaci
|PhotoGallery
</p>
</div>

praticamente i links funzionano bene, ma non mi applica il famoso word-spacing, che invece mi applicava alla stessa lista senza gli href.

[pierofix]

Strano. Ma come mai ha continuato ad usare il paragrafo e i link consecutivi privi di caratteri stampati non linkati frapposti?

Ma hai capito quel che ti ho detto prima? E in più: dai nomi agli id e alle classi con la semantica in mente.