Forum PHP.pl

EDIT całego:


Zrobiłem sobie menu na podstawie przykładu znalezionego na googlu. Dodam, że robie menu kolorystycznie i w sposobie działania takie jak na http://www.sonystyle.com/is-bin/INTERSHOP....torefront-Start

(Warto zobaczyć, żeby wiedzieć co chce uzyskać)
Już prawie jest dobrze ale mam 3 problemy...

1. Mam główne przyciski (wycięte grafiki). Problem w tym, że każdy przycisk jest innej długości i troszke się różni, więc mój kod (który jest poniżej) odpada.. Odpada bo stosuje tego samego buttona do wszystkich a ja mam 6 różnych. Jak mógłbym to zmienić?

2. Nie wiedziałem jak zrobić podmiane grafik za pomocą css, więc użyłem kodu:


ale nie wiem czy to jest zgodne z XHTML? Może jest lepszy sposób całkowicie oparty o css?

3. Menu rozwijane po najechaniu na button jest szerokości 10em (tak było w tym przykładzie ze strony). Jest równej szerokości co dany buton a ja chciałbym żeby było troszke szersze (tak jak na stronie sony). Ale niezależnie jaką szerokość ustawie to jest zwiększane o szerokośc sąsiedniego butoona.

Jak sobie z tym poradzić?

HTML:

[HTML] pobierz, plaintext 
<div id="bloknawigacji">
                 <ul id="nav">
                     <li><!--<a href="#" onMouseOver="document.obrazek.src='layout/odziez.gif'" onMouseOut="document.obrazek.src='layout/odziez2.gif'"><img src="layout/odziez.gif" style="width:75px; height:39px; border:0;" /></a>-->
						 <a href="#" onMouseOver="document.obrazek.src='layout/odziez2.gif'" onMouseOut="document.obrazek.src='layout/odziez.gif'"><img src="layout/odziez.gif" width="?" height="?" name="obrazek" border="0"></a>                         
						 <ul>
                             <li><a href="#">Test 00000000001</a></li>
                             <li><a href="#">Test 00000000002</a></li>
                             <li><a href="#">Test 00000000003</a></li>
                             <li><a href="#">Test 00000000004</a></li>
                         </ul>
	                 </li>
 
                     <li><a href="#"><img src="layout/odziez.gif" style="border:0;" /></a>
		                 <ul>
                             <li><a href="#">Test 00000000001</a></li>
                             <li><a href="#">Test 00000000002</a></li>
                             <li><a href="#">Test 00000000003</a></li>
                             <li><a href="#">Test 00000000004</a></li>
                             <li><a href="#">Test 00000000005</a></li>
                         </ul>
                     </li>
                 </ul>
			 </div>
[HTML] pobierz, plaintext 

CSS:

Cięzko to przerzucić do CSS, zwłaszcza, że obrazki to zwykłe <img />, a nie CSS'owe background-image. Jest jedna metoda, którą jak narazie supportuje jednak tylko Opera. Zawsze możesz ją jednak dodać - niech sobie będzie zarówno CSS jak i JS :-)



Eh, o ileż prostsze byłoby życie z samymi porządnymi przeglądarkami :-|


Dodano:
W xhtml prawie wszystko piszemy z małej litery. Dlatego powinno być onmouseover.

Ten post edytował Zajec 16.03.2006, 07:11:42

Bez JS i tak się nie obejdzie ze względu na IE :|
Tak z czystej ciekawości jaka to metoda, którą wspiera tylko Opera?


Kod, który podałeś dotyczy się pierwszego problemu? Możesz go trochę objaśnić bo nie za bardzo rozumiem.. szczególnie tego "a + a +a" (elementy przyległe?) i "content:" ...

A z tym xhtml to wiem, że z małej ale ten kod wklejałem i nie zdążyłem poprawić.


Ps. natomiast jeszcze pytanie numer 3.

Chciałbym móc mieć możliwość definiowania różnych (w zależności od potrzeby) szerokości rozwiniętych elementów:

zdjęcie