[CSS] First-letter problema!

Ciao a tutti, ho un problema con first-letter, il quale non funziona.

Codice PHP:

---

#links ul { padding: 0; margin: 0; }
#links li { list-style-type: none; display: inline; margin-right: 40px; font: normal 13px "Arial"; color: #555; }
#links a { color: #666; text-decoration: none; border-bottom: 5px solid #222; padding-bottom: 2px; }
#links a:hover { color: #cdf14e; border-bottom: 1px dashed #cdf14e; }
#links a:first-letter { font-weight: bold; }


---

Grazie mille. Ciao Davide! *___*

Tu vuoi che tutti div links abbiano il first-letter applicato con il bold?

Perchè puoi scrivere semplicemente così:

Codice:

---

#links:first-letter {
    font-weight: bold;
}

---

Ed automaticamente anche i caratteri linkati avranno il bold nella prima lettera.

Comunque dai un'occhiata qui => http://www.w3schools.com/CSS/pr_pseudo_first-letter.asp

Ehm...il tuo codice è sbagliato secondo me infatti neanche funziona.
Aspettiamo qualcuno più esperto magari! :wink:
Grazie mille.

sIm, la sintassi è giusta, non è bisogno di essere "esperti" per vedere e sapere come scrivere queslla pseudo proprietà.

Controlla non abbia qualche !important negli a, altrimenti prova ad aggiungerlo al selettore #links a:first-letter.

Senza html, si può dire ben poco. Puoi mettere su una pagina di esempio e linkarla qua?

Si..ecco i codici! XD

Codice PHP:

---

<div id="links">
<ul>
<li><a href="#">Links nome</a></li>
<li><a href="#">Links nome</a></li>
<li><a href="#">Links nome</a></li>
<li><a href="#">Links nome</a></li>
<li><a href="#">Links nome</a></li>
<li><a href="#">Links nome</a></li>
</ul>
</div>


---

Codice css invece:

Codice PHP:

---

#links { height: 30px; padding: 5px 0; text-align: center; width: 100%; background: #222; border-bottom: 1px solid #444; }
#links ul { padding: 0; margin: 0; }
#links li { list-style-type: none; display: inline; margin-right: 40px; font: normal 13px "Arial"; color: #555; }
#links a { color: #666; text-decoration: none; border-bottom: 5px solid #222; padding-bottom: 3px; }
#links a:hover { color: #cdf14e; border-bottom: 1px dashed #cdf14e; }
#links a:first-letter { font-weight: bold; }


---

In pratica vorrei che tutte le iniziali (L e n) in questo caso siano in grassetto (bold) ad esempio! XD
Solo che su Firefox non funziona almeno...io sto provando tutto il locale! *__*
Grazie mille.

La L è possibile con il codice postato prima mentre per la n è impossibile, a meno che non la metta dentro un tag.

first-letter è per la prima lettera della prima parola nel tag, non per tutte le parole.

Ok...ma non funziona comunque! XD

Prova

Codice:

---

#links :first-letter { font-weight: bold; }

---

oppure:

Codice:

---

#links li:first-letter { font-weight: bold; }

---

Allora con il primo codice diventa grassetto solo la prima lettera del primo li! XD
Con il secondo, niente.

Prova ad eliminare text-decoration: none; da #links a.

Mi sembra molto strano non funzioni :roll:

Citazione:

---

Originalmente inviato da sIM

Ehm...il tuo codice è sbagliato secondo me infatti neanche funziona.
Aspettiamo qualcuno più esperto magari! :wink:
Grazie mille.

---

Non funziona perchè non hai specificato nemmeno l'html e quindi come faccio a sapere cosa vuoi fare? ma se metti solo:

Codice:

---

<div id="links">Blaaaa</div>

---

funziona. :wink:

Comunque...

Codice:

---

#links { height: 30px; padding: 5px 0; text-align: center; width: 100%; background: #222; border-bottom: 1px solid #444; }

#links ul li:first-letter {
        font-weight: bold;
}
#links ul { padding: 0; margin: 0; }
#links li { list-style-type: none; display:inline; margin-right: 40px; font: normal 13px "Arial"; color: #555; }

#links a { color: #666; text-decoration: none; border-bottom: 5px solid #222; padding-bottom: 3px; }
#links a:hover { color: #cdf14e; border-bottom: 1px dashed #cdf14e; }

---

Il problema è il display:inline che hai impostato nel #link li
infatti se aggiungi il primo pezzo che ho marcato e togli momentaneamente il secondo pezzo, avrai la prima lettera in bold.
Ovviamente se togli il display inline, i link non saranno più allineati, ma cadranno uno sotto l'altro. Ma questo è facile da risolvere.

PRIMA
http://i33.tinypic.com/313ncbo.png

DOPO
http://i38.tinypic.com/8xr5s1.png

Ricapitolando:
Prendi questo pezzetto e lo metti nel css

Codice:

---


#links ul li:first-letter {
        font-weight: bold;
}

---

togli display:inline; da #links li

Infine fai in modo che i link non cadino uno sotto l'altro e si allineino senza usare il display.

#links ul li:first-letter può essere benissimo #links li:first-letter poichè li è un elemento che deve stare obbligatoriamente dopo ul. E' come scrivere sempre body img, body a, body div ecc :wink:

Citazione:

---

Originalmente inviato da musicanapoli

togli display:inline; da #links li

Infine fai in modo che i link non cadino uno sotto l'altro e si allineino senza usare il display.

---

E così è finita la lista allora! XD
Ci sarà un modo credo... O___o
Perché mi sembra strano che li non assuma il first-letter....mooolto strano devo dire.
Altri consigli da dare? XD
PS. Il tuo l'ho provato ma non funziona.

il display: inline; puoi sostituirlo con float: left;.

Leggi alcune guide su come creare menù orizzontali con il css su Internet, troverai metodi molto più semplici :wink:

Ok Grazie comunque...ho adottato una soluzione più semplice: mettere <b> a tutte le prime lettere e dopo gestirlo con il css naturalmente! =D
Ciao Grazie mille...

Usa <strong>, non <b> :wink:

Perché? XD E' tanto bello <b> :lolloso:

Devo cercare la pagina, ma lessi di usare <strong> al posto di <b> per vari motivi! Poi non so :roll:

@sim per mettere la prima lettera maiuscola a tutte le parole si usa la proprietà 'text-transform' con il valore capitalize
quindi il codice sarà simile a

Citazione:

---

#link li a {
text-transform: capitalize;
}

---

Grazie mille Federico...ho dato un lettura, XD ma preferisco <b> :wink:
Riguardo al codice di acsomel grazie comunque ma io cercavo di fare la prima lettera in grassetto, non maiuscola! ^^"

Citazione:

---

Originalmente inviato da sIM

Grazie mille Federico...ho dato un lettura, XD ma preferisco <b> :wink:
Riguardo al codice di acsomel grazie comunque ma io cercavo di fare la prima lettera in grassetto, non maiuscola! ^^"

---

ti ho suggerito quella soluzione perchè mi sembra la più leggera da implementare e la più vicina al tuo problema, l'altro modo dipende molto dal doctype che usi e dallo user-agent di destinazione
se usi html 4.01 oppure xhtml meglio strong che b
se usi una versione precedente di html b va bene

in ogni caso amdare a farcire la pagina di codice per fare una presentazione particolare, che sappiamo sarà molto differente da browser a browser, mi sembra (ma è soltanto il mio personalissimo giudizio) una perdita di bit :wink:

Ok, Grazie mille! *__*