Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]menu, .
b5000
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 12.12.2013

Ostrzeżenie: (0%)
-----

Witam jestem tutaj nowy więc prosze o wyrozumiałość. Nie bardzo znam się na CSS wiec ściągnałem sobie gotowca menu rozwijane, ale mam problem ponieważ menu zaczyna się od lewej strony a chciałbym zeby było centralnie pozatym, menu jest zbyt długie po prawej stronie ( zresztą sami zobaczcie )

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Darmowy Kurs CSS</title>
  6.  
  7.     <style>
  8.       /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */
  9.  
  10.       /* wygląd głównego elementu - ol */
  11.       ol {
  12.         list-style-type:none;
  13.         padding:0;
  14.         margin:0;
  15.         background-color:#FFF;
  16.         font-size:18px;
  17.         height:2em;
  18.         line-height:2em;
  19.         text-align:center;
  20.       }
  21.  
  22.       /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
  23.       ol a {
  24.         display:block;
  25.         text-decoration:none;
  26.         color:#000;
  27.         padding:0 10px;
  28.       }
  29.  
  30.       /* wygląd elementów - li - wszystkich dzieci elementu - ol */
  31.       ol > li {
  32.         float:left;
  33.         width:250px;
  34.         margin-left:1px;
  35.         background-color:#FDD700;
  36.         height:2em;
  37.       }
  38.  
  39.       /* wygląd elementu - li - pierwszego dziecka elementu - ol */
  40.       ol > li:first-child {
  41.         margin-left:0;
  42.       }
  43.  
  44.       /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
  45.       ol > li:hover {
  46.         background-color:#EEE;
  47.       }
  48.  
  49.       /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
  50.       ol > li:hover > a {
  51.         color:#09C;
  52.       }
  53.  
  54.       /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
  55.       ol > li:hover > ul {
  56.         display:block;
  57.       }
  58.  
  59.       /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */
  60.  
  61.       /* wygląd głównych rozwijanych elementów - ul */
  62.       ol > li > ul {
  63.         display:none;
  64.         list-style-type:none;
  65.         padding:0;
  66.         margin:0;
  67.       }
  68.  
  69.       /* wygląd elementu - li - w części rozwijanej */
  70.       ol > li > ul > li {
  71.         background-color:#EEE;
  72.       }
  73.  
  74.       /* wygląd elementu - a - w części rozwijanej */
  75.       ol > li > ul > li > a {
  76.         border-top:1px solid #FFF;
  77.       }
  78.  
  79.       /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
  80.       ol > li > ul > li:hover {
  81.         background-color:#DDD;
  82.       }
  83.  
  84.       /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
  85.       ol > li > ul > li:hover > a {
  86.         color:#09C;
  87.       }
  88.     </style>
  89.  
  90.   </head>
  91.  
  92. <body>
  93.  
  94.   <ol>
  95.     <li><a href="#">O mnie - </a>
  96.       <ul>
  97.         <li><a href="#">link - </a></li>
  98.         <li><a href="#">link - </a></li>
  99.         <li><a href="#">link - </a></li>
  100.         <li><a href="#">link - </a></li>
  101.         <li><a href="#">link - </a></li>
  102.       </ul>
  103.     </li>
  104.  
  105.     <li><a href="#">Serwis - </a>
  106.       <ul>
  107.         <li><a href="#">link - </a></li>
  108.         <li><a href="#">link - </a></li>
  109.         <li><a href="#">link - </a></li>
  110.       </ul>
  111.     </li>
  112.  
  113.     <li><a href="#">Kontakt - 3</a></li>
  114.  
  115.     <li><a href="#">Ftp - 4</a>
  116.       <ul>
  117.         <li><a href="ftp://">FTP</a></li>
  118.         <li><a href="#">link - 2</a></li>
  119.         <li><a href="#">link - 3</a></li>
  120.         <li><a href="#">link - 4</a></li>
  121.       </ul>
  122.     </li>
  123.   </ol>
  124.  
  125. </body>
  126. </html>
  127.  
[HTML] pobierz, plaintext


Chciałbym to menu jakoś wycentrować na srode strony i zmniejszyć troszeczke żeby z prawej strony nie było ubytku.
Go to the top of the page
+Quote Post

Posty w temacie
- b5000   [CSS]menu   12.12.2013, 20:01:49
- - usb2.0   pakujesz w diva dajesz mu margin: 0 auto i szeroko...   13.12.2013, 13:50:37
- - b5000   dodałem kawałek skryptu ale pewnie coś nie tak no ...   13.12.2013, 14:39:51
- - usb2.0   gosciu, przyjrzyj sie czy #nazwa w css czegos nie ...   13.12.2013, 15:20:55
- - b5000   juz czaje klamra niedomknięta, a pytanie mam cze...   13.12.2013, 16:38:25
- - Turson   Po prostu dokument HTML z plikiem css dołączonym w...   13.12.2013, 19:15:05
- - b5000   No juz kumam, no a jeśli chciałbym stworzyć sobie ...   13.12.2013, 19:55:37
- - Turson   [HTML] pobierz, plaintext <link rel="style...   13.12.2013, 20:42:01

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 19:49
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn