Forum PHP.pl > dynamiczne menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Jarod

16.03.2006, 00:53:24

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:

Kod

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:

Kod

.bloknawigacyjny {
                  background-color: red;
                  width: 100%;
}

#nav, #nav ul {
               padding: 0;
               margin: 0;
               list-style: none;
               font-size: 14px;
               font-weight: bold;
}

#nav a {
        display: block;
}

#nav li {
         float: left;
         width: 75px;
         background-image: url(../layout/odziez.gif);
}

#nav li ul {
      position: absolute;
            width: 10em;
            left: -999em;
}

#nav li ul li {
               background-image: none;
               background-color: #F9F9F9;
}

#nav li ul li:hover {
                     background-color: #99CC33;
}

#nav li:hover ul {
                  left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
                                      left: auto;
}

Zajec

16.03.2006, 07:11:11

Cytat(J4r0d @ 2006-03-16 00:53:24)

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

Kod

ale nie wiem czy to jest zgodne z XHTML? Może jest lepszy sposób całkowicie oparty o 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 :-)

Kod

#nav a:hover img { content: url(layout/pierwszy2.gif); }
#nav a + a:hover img { content: url(layout/drugi2.gif); }
#nav a + a + a:hover img { content: url(layout/trzeci2.gif); }

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.

Jarod

16.03.2006, 09:57:53

Cytat(Zajec @ 2006-03-16 06:11:11)

Kod

#nav a:hover img { content: url(layout/pierwszy2.gif); }
#nav a + a:hover img { content: url(layout/drugi2.gif); }
#nav a + a + a:hover img { content: url(layout/trzeci2.gif); }

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.

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

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.