a:hover - imi impinge si celelalte elemente
Last Updated: Mar 25 2015 23:04, Started by
colombo2003
, Mar 25 2015 14:49
·
0
#1
Posted 25 March 2015 - 14:49
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. |
#2
Posted 25 March 2015 - 16:13
http://stackoverflow...st-when-a-hover
Vezi, poate ajuta. Nu am acum timp sa documentez mai bine problema ta. |
#3
Posted 25 March 2015 - 16:37
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. |
#4
Posted 25 March 2015 - 23:04
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. |
Anunturi
Bun venit pe Forumul Softpedia!
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users