Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Daniel

Poziome menu z tłem :)

Promowane odpowiedzi

Witam dzisiaj wam pokaże jak zrobić poziome menu z tłem :)

1.Robimy nowy index.html i tworzymy menu

       <div class="menu"> 
           <ul> 
               <li><a href="#" title=""><span>Stona Główna</span></a></li> 
               <li><a href="#" title=""><span>O Mnie</span></a></li> 
               <li><a href="#" title=""><span>Portfolio</span></a></li> 
               <li><a href="#" title=""><span>Cennik</span></a></li> 
               <li><a href="#" title=""><span>Kontakt</span></a></li> 
               <li><a href="#" title=""><span>Polecam</span></a></li> 
               <li><a href="#" title=""><span>Cmsszablony</span></a></li> 
               <b></span></a></li> 
           </ul> 
       </div>


 i Zapisujemy :)

Teraz gotowe tło do menu robimy
http://speedfile.xpag.pl/upload/meni.png
Moje tło.

Teraz tworzymy nowy plik .css i w pliku

Piszemy

/* MENU*/ 

.menu{ 
   background: transparent url(meni.png) no-repeat; 
   height:60px; 
} 
.menu ul{ 
   list-style:none; 
   margin:0 auto; 
} 
.menu li{ 
   float:left; 
   list-style:none; 
   margin-right:15px; 
} 
.menu li a{ 
   float:left; 
   display:block; 
   color:#fff; 
   text-decoration:none; 
   font:14px Myriad Pro; 
   font-weight:bold; 
   padding:0 0 0 7px; 
   text-align:center; 
   height:37px; 
   line-height:62px; 
   cursor:pointer;    
   text-transform:center; 
} 
.menu li a span{ 
   float:left; 
   display:block; 
   padding:0 10px 0 4px; 
} 

.menu li a:hover{ 
   background: #034b60; 
       padding: 10px; 
        
} 

i teraz tak

background: transparent url(meni.png) no-repeat; (odpowiada za tło zamiast meni.png wpisujemy własne tło "no-repeat" Żeby to się nie powtarzało)
height:60px; (Wysokość naszego tła)

.menu li a:hover{
background: #034b60; (tło po najechaniu myszką)
padding: 10px; (wielkość tła)

Jeżeli macie z czym problem proszę pisać w temacie lub na PW :)
Zyczę miłej zabawy 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

C4 wl0dz!u, To znajdz takie :) Tylko twój .css przebiłem lekko i dodałem tło obrazkowe

Moja własna praca :)

[ Dodano: 2011-10-29, 14:58 ]

Dekke,To co ja zrobię to Tobie się wogule nie podoba. Zero Jesteś

Arth, Opisz dokładnie o co ci chodzi :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×