[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

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ą

[sowiq]

@Crozin,
masz rację, JS to chyba najlepszy sposób. Właśnie miałem wrzucić tutaj rozwiązanie, ale byłeś szybszy

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!