a:hover - imi impinge si celelalte elemente

Problema imi apare atunci cand as vrea ca la hover sa fac textul boldit. Motiv pentru care, in css, adaug font-weight: bold, intr-o sectiune noua: .jos a:hover { } (nu apare in codul de mai jos)

Fiind mai gros, imi impinge si restul de elemente (celelalte linkuri text si bara verticala de separate |) si se deplaseaza nitel; or eu as vrea sa ramana fixe, la locul lor si doar elementul de la hover sa devina mai gros si atat. Ce gresesc?

Multumsc


In HTML:

...
...
<div class="jos">
	 <a href="DespreNoi.php">Laboratoare</a> |
	 <a href="Consiliu.php">Consiliu</a> |
	 [i]si alte <a>-uri similar[/i]
</div>
...
...

In CSS:

...
...
.jos {
text-align: center;
padding-bottom: 5%;
}
.jos a {
margin: 0 2%;
font-size: 12px;
}
...
...

Edited by colombo2003, 25 March 2015 - 15:03.

http://stackoverflow...st-when-a-hover

Vezi, poate ajuta. Nu am acum timp sa documentez mai bine problema ta.

Nu gresesti nimic dar ce vrei tu sa faci e o contradictie - adica sa ai si latime dinamica (display: inline) dar container-ul sa-si pastreze latimea indiferent de latimea/dimensiunea textului.
Solutia e sa pui latimi fixe la fiecare text (evident cu display: inline-block pe ele) care sa fie cel putin cat latimea textului boldat. Eventual pui si text-align: center pe fiecare container sa arate mai bine.

<div class="link">
    <a href="#">Foo</a>
</div>
<div class="link">
    <a href="#">Foo</a>
</div>
<div class="link">
    <a href="#">Foo</a>
</div>

.link {
  display: inline-block;
  width: 100px;
  text-align: center;
}

.link a:hover {
  font-weight: bold;
}

Vezi ca pe stackoverflow se discuta si de o varianta cu display: table, dar e mai complicat de inteles.

Aham, vad ca tu ai pus fiecare ancora (link) separate intr-un div din aceeasi clasa (si nu toate la un loc).

Nu prea am inteles ce ai zis tu pe acolo cu chestia aia cu inline... In fine, de functionat functioneaza, dar nu inteleg o chestie. Ca test, am obiceiul sa pun si un border elementului, ca sa vad exact cat tine, cum se pozitioneaza si incadreaza etc.
Revenind, problema acum e ca, fiecare link are numar diferit de litere (deci lungime diferita), si cum am dimensionat astfel incat sa incapa, boldit, sirul cel mai lung, celelalte, cum sunt centrate toate, au distante diferite fata de separatorul |

De functionat functioneaza, dar mi se pare ca se vede un pic aiurea... Adica ceva de genul  link1  |    link doi      |    trei     | al patrulea link | cinci    | etc   

Cred ca am sa renunt la chestia cu hoover-ul si gata. Ma gandeam sa o pun, doar ca sa atrag atentia unde e mouse-ul, cumva ca optiune curenta.

Multumesc pentru raspunsuri.