Telefono: +39 392 33 73 731
Email: info@zod.it
Oggi ho dovuto correggere un menu orizzontale, nel sito ci sono 4 lingue (italiano, inglese, tedesco e francese). Le prime tre sono perfette mentre il francese, a causa delle voci più lunghe, non riesce a rimanere nello spazio assegnato.
Per farlo apparire nel modo giusto basterebbe cambiare il padding a sinistra e a destra delle voci, ma come si può fare? Il sito è montato in Contao, e per fortuna possiamo disporre dell'attributo "lang" in tag <html>.
Quindi possiamo usare il seguente css per intercettare le nostre voci del menu in francese.
html:lang(fr) #wrapper .navbar a, html[lang="fr"] #wrapper .navbar a {
padding: 15px;
}
I selettori per intercettare la lingua della pagina sono due perché funzionano in modo differente, e poi dipende da come vengono supportati dal browser.
In HTML si può definire la lingua della pagina tramite un attributo nel tag <html> (lang="it" oppure xml:lang="it"), tramite il doctype in XHTML, oppure anche tramite il Meta tag <meta name="language" content="it">.
La pseudo classe ":lang(C)" fa un controllo se l'elemento è nella lingua C. Non importa quale metodo sia stato usato. Mentre [lang="en"] segue le regole css secondo cui solo la corrispondenza dell'elemento con quell'attributo è valida.
Nel mio caso Contao 3 mi offre l'attributo lang in <html>: faccio il controllo se la lingua è francese, quindi entro nell'elemento #wrapper, poi nel menu di navigazione .navbar, ed infine nel collegamento ipertestuale <a> per cambiare padding.
Nel 2018 ho scelto Serverplan, leggi l'articolo "La mia esperienza con gli hosting" per conoscere la mia opinione sui servizi e le prestazioni di alcuni famosi provider italiani.
Aggiungi un commento