Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu CSS- Drop down - problem z dopasowaniem do layoutu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Tao
Witam!
Pobrałem z internetu kod menu w css. Wszystko ładnie pięknie menu działa jak należy lecz mam problem z edytowaniem jednego elementu w menu. Poniżej zamieszczę przykładowe menu i omówię gdzie znajduje sie mój problem.


kod html

Kod
<link rel="Stylesheet" type="text/css" href="test.css" />
<div id="wrap">
            <ul id="navbar">
                 <li><a href="#">&#187 Home</a>
                     <ul>
                        <li><a href="#">O Nas</a></li>
                        <li><a href="#">Ekipa</a></li>
                    </ul>
                 </li>
                <li><a href="#">Usługi</a>
                    <ul>
                       <li><a href="#">WWW</a></li>
                       <li><a href="#">Grafika</a></li>
                       <li><a href="#">Flash</a></li>
                       <li><a href="#">Cennik</a></li>
                    </ul>
                 </li>
                <li><a href="#">Realizacje</a>
                    <ul>
                       <li><a href="#">Strony www</a></li>
                       <li><a href="#">Grafika</a></li>
                       <li><a href="#">Flash</a></li>
                    </ul>
                 </li>
                <li><a href="#">Sklep</a>
                    <ul>
                       <li><a href="#">Strony www</a></li>
                       <li><a href="#">Layouty</a></li>
                       <li><a href="#">Skrypty</a></li>
                    </ul>
                 </li>
                <li><a href="#">Inne</a>
                    <ul>
                       <li><a href="#">Nasze portale</a></li>
                       <li><a href="#">Ventrilo</a></li>
                    </ul>
                 </li>
                 <li><a href="#">Kontakt</a></li>
            </ul>
        </div>


a tu CSS:

Kod
body {
   font: 62.5%/1.2 Verdana,  sans-serif;
    background-color: #161616;
}
#wrap {
   font-size: 13px;
   width: 960px;
   height: 30px;
   margin: 0 auto;
   background-color: white;
   position: relative; }

#navbar {
   margin: 0;
   padding: 0px;
   background-color: #3b3b3b; /*kolor tla pod menu*/
   height: 30px; }
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 5px 20px; /* odstepy w menu   top - right*/
   background-color: #3b3b3b; /* kolor tla menu*/
   color: white; /*kolor tekstu*/
   text-decoration: none;
   }
#navbar li ul {
   display: none;
   width: 10em; /* Width to help Opera out */
   background-color:#3b3b3b;
   }
#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    color: white; /*kolor tekstu w submenu  - mozna dodac  obramowaniania -    border-bottom: 1px solid white;*/
   }
#navbar li li a:hover {
   background-color: #ff4200; /*555555 kolor submenu po najechaniu mycha*/
   -moz-border-radius:5px; /*zaokraglone submenu*/
   }


Chce uzyskać efekt że jak najade myszka na napis Home to się podświetli jako zaokrąglony pomarańczowy prostokąt identycznie jak w submenu. Z góry dziekuje za wszelką pomoc bo mam problemy z css.(częsli kodu nie rozumiem w ogole ale jakimś cudem wy edytowałem go jako tako...) Przyklad: http://angryhornets.pl/test/css/menu.html
Damonsson
Nie możesz dać po prostu zamiast tego:
  1. #navbar li li a:hover {
  2. background-color: #ff4200; /*555555 kolor submenu po najechaniu mycha*/
  3. -moz-border-radius:5px; /*zaokraglone submenu*/
  4. }


to:

  1. #navbar a:hover {
  2. background-color: #ff0000; /*555555 kolor submenu po najechaniu mycha*/
  3. -moz-border-radius:5px; /*zaokraglone submenu*/
  4. }


albo jakbyś chciał inny kolor dla submenu to:

  1. #navbar a:hover {
  2. background-color: #ff0000; /*555555 kolor submenu po najechaniu mycha*/
  3. -moz-border-radius:5px; /*zaokraglone submenu*/
  4. }
  5.  
  6. #navbar li ul li a:hover {
  7. background-color: #00ff00; /*555555 kolor submenu po najechaniu mycha*/
  8. -moz-border-radius:5px; /*zaokraglone submenu*/
  9. }



PS. Moja Opera pozdrawia Twoje zaokrąglenia wink.gif

PS2. Suprise drop-down menu nie jest fajne wink.gif

PS3. Zleć to komuś skoro nie rozumiesz, no chyba, że strona ma być zapleczem pod firmę tworzącą strony, to byłoby trochę głupio wink.gif
Tao
dziękuję ci bardzo! smile.gif
Co do css ogolnie nie mam z nim "wielkich" problemów - nie rozumem tylko zapisów np.
#navbar li ul li a:hover - widze tu diva - znaczniki listy(i tu sie gubię) i i ze po najechaniu mychy ma się coś zmienić - jakbyś mógł wytłumaczyć ten zapis będę wdzięczny.

I drugie pytanko, czemu DD nie są fajne?
Damonsson
teoretycznie powinno być tak:
ul li ul li a:hover { bla bla bla }
czyli: element a, na który najedziemy myszką, znajdujący się w elemencie li, kolejno znajdujący się elemencie ul, kolejno znajdujący się w elemencie li, kolejno znajdujący się w elemencie ul.
Wszystkie te założenia muszą być spełnione.

Ale skoro pierwszemu ul nadałeś #id=navbar, to zamiast ul dajesz #navbar, czyli: #navbar(w domyśle ul) li ul li a:hover

można to łatwo sprawdzić w twoim kodzie HTML:

<ul id="navbar">
<li><a href="#">&#187 Home</a>
<ul>
<li>
<a href="#">O Nas</a>

Hmmm, dd nie są złe, po prostu służą do czego innego, ale żeby zgłębić dlaczego akurat tak, to musisz sam poszukać materiałów, bo ja się przyznam, że nie mam na to pytanie jednoznacznej i konkretnej odpowiedzi.
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.