[solved] :hover -> bold i poziome menu, czyli jak zapobiec rozszerzaniu elementu po najechaniu Opcje

[sowiq]

Witam,
pytanie może wydawać się głupie, zwłaszcza jeśli pochodzi od kogoś zajmującego się tematem od jakiegoś czasu, ale kto pyta, nie błądzi.

Mam proste menu:

[HTML] pobierz, plaintext 
<ul class="menu">
	<li><a href="#">menu 1</a></li>
	<li><a href="#">menu 2</a></li>
	<li><a href="#">menu 3</a></li>
	<li><a href="#">menu 4</a></li>
</ul>
[HTML] pobierz, plaintext 

i CSS:

[HTML] pobierz, plaintext 
ul.menu{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.menu li{
	display: block;
	float: left;
	padding: 3px;
}
ul.menu li a{ font-weight: normal; }
ul.menu li a:hover{ font-weight: bold; }
[HTML] pobierz, plaintext 

Czyli ni mniej, ni więcej, tylko menu w układzie poziomym.

Moje pytanie brzmi: co muszę zrobić, żeby menu nie rozszerzało się po najechaniu kursorem na jakiś element? Chodzi o to, że jeśli link zostanie pogrubiony, to zmienia swoją szerokość 'rozpychając' na boki swojego rodzica, a ten sąsiednie elementy.

Od razu powiem, że nie mogę nadać elementom stałej/min/max szerokości, bo nie wiem co w nich będzie (różne języki menu definiowane z panelu admina).

Z góry dzięki za wszelkie podpowiedzi (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował sowiq 22.12.2008, 12:32:33

[piotrooo89]

ja bym próbował nadawać paddingi i/lub magriny...

[sowiq]

No ok, ale paddingi i marginy zostają takie same po najechaniu kursorem. Zmienia się tylko szerokość czcionki i 'rozpycha' element na szerokości. Trzeba by zmniejszyć paddingi poziome po najechaniu, ale o ile, skoro treść linków może mieć różną długość (czyli różne 'wydłużenia')?

[piotrooo89]

ustaw jednakowy padding dla elementu bez hovera i z hoverem.

[sowiq]

Nie, to nie pomaga. Tak jak pisałem wyżej. Problem jest w innym miejscu. Zobacz to na poniższym przykładzie:

[HTML] pobierz, plaintext 
<ul class="menu">
	<li><a href="#">menu 1</a></li>
	<li><a href="#">menu 2</a></li>
	<li><a href="#">menu 3</a></li>
	<li><a href="#">menu 4</a></li>
</ul>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
ul.menu{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.menu li{
	display: block;
	float: left;
	padding: 3px;
	background-color: #f00;
}
ul.menu li a{
	display: block;
	font-weight: normal;
	padding: 5px;
	background-color: #0f0;
}
ul.menu li a:hover{
	display: block;
	font-weight: bold;
	padding: 5px;
}
[HTML] pobierz, plaintext 

W przypływie desperacji miałem już zamiar ustawić coś w stylu 'lewego tła', tzn zrobić przezroczystą czcionkę /czcionkę w kolorze tła, wyboldowaną, która ustawi szerokość elementu, a nad nią (odpowiednia wartość position) prawdziwy link. Ale to średnio elegancki sposób...

[Crozin]

jakimś tam rozwiązaniem jest dodanie w JS do zdarzenia mouseover funkcji, która ustawi elementowi szerokość równą offsetWidth - padding i do zdarzenia mouseout funkcje, która poprostu wywali właściwość width.

Użycie tutaj JS nie stworzy żadnych problemów - w przypadku jego braku co najwyżej "poskacze".
W samym CSS raczej ciężko będzie to uzyskać nie mając możliwości ustawienia stałej szerokości elementu - może jakaś zabawa z wywalaniem tekstu poza documentFlow przy :hover, ale to IMHO przerost formy nad treścią (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[sowiq]

@Crozin,
masz rację, JS to chyba najlepszy sposób. Właśnie miałem wrzucić tutaj rozwiązanie, ale byłeś szybszy (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ja to robię trochę inaczej. Za pomocą JS przechodzę przez wszystkie elementy menu, ustawiam im font-weight na bold, zapamiętuję offsetWidth, czcionkę zmieniam na normal, a jako width ustawiam zapamiętaną wartość. Dzięki temu tylko raz wykonuję JS, bez zbędnych obliczeń.

Dzięki za pomoc!