Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Font-weight przesuwa wyrazy
Forum PHP.pl > Forum > Przedszkole
Joshio
12.02.2015, 00:56:39
Witam

Mam taki problem: Dotyczy on tylko przeglądarki Firefox - mam ustawione przykładowe menu ul li.
Na ul li mam :hover z font-weight: bold - i tu występuje problem ponieważ gdy najeżdżam kursorem na "Dwa" wyraz pogrubia się jednak słowo "Trzy" i "Cztery" delikatnie przesuwają się w prawo co psuje cały efekt. Co zrobić aby wyrazy nie przesuwały się w prawo?
Na Chrome jest wszystko ok.


[HTML] pobierz, plaintext 
  1. <style>
  2.  
  3. ul{
  4.  
  5. }
  6.  
  7. ul li{
  8. 	float: left;
  9. 	text-decoration: none;
  10. 	list-style-type: none;
  11. 	padding: 0 10px;
  12. 	font-weight: normal;
  13. }
  14.  
  15. ul li:hover{
  16. 	font-weight: bold;
  17. 	padding: 0 10px;
  18. }
  19. </style>
  20.  
  21.  
  22. <html>
  23. <head>
  24. 	<title></title>
  25. </head>
  26. <body>
  27.  
  28. 	<ul>
  29.  
  30. 		<li>Tekst</li>
  31. 		<li>Dwa</li>
  32. 		<li>Trzy</li>
  33. 		<li>Cztery</li>
  34.  
  35. 	</ul>
  36.  
  37. </body>
  38. </html>
[HTML] pobierz, plaintext
Jarma
12.02.2015, 07:22:07 
[CSS] pobierz, plaintext 
  1. ul{
  2.  
  3. }
  4.  
  5. ul li{
  6. 	float: left;
  7. 	text-decoration: none;
  8. 	list-style-type: none;
  9. 	padding: 0 10px;
  10. 	font-weight: normal;
  11.  
  12.  
  13. 	width: 50px;
  14. }
  15.  
  16. ul li:hover{
  17. 	font-weight: bold;
  18. 	padding: 0 10px;
  19. }
[CSS] pobierz, plaintext



Jak ustawisz stałą szerokość wszystko będize tak jak chcesz
Joshio
12.02.2015, 14:11:23
Właśnie problem jest w tym że nie może być stała szerokość bo strona ma mieć zainstalowanego CMS'a.
phpion
12.02.2015, 15:10:59
Nadając bold'a czcione zwiększasz jej "grubość" przez co dany tekst zajmuje więcej przestrzeni, więc przesuwa elementy obok siebie.
trueblue
12.02.2015, 15:24:57
http://jsfiddle.net/1em2xe84/
http://jsfiddle.net/1em2xe84/1/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.