Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]menu
Forum PHP.pl > Forum > Przedszkole
b5000
12.12.2013, 20:01:49
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.
usb2.0
13.12.2013, 13:50:37
pakujesz w diva dajesz mu margin: 0 auto i szerokosc? ...
http://jsfiddle.net/WjLG2/2/
b5000
13.12.2013, 14:39:51
dodałem kawałek skryptu ale pewnie coś nie tak no nie trybi sad.gif
skrypt dodany pod "body" tak jak było na stronie z linku 



[HTML] pobierz, plaintext 
  1.  
  2.     <style>
  3.       /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */
  4.  
  5.       /* wygląd głównego elementu - ol */
  6.  
  7.  #nazwa{
  8.     margin: 0 auto;
  9.     width: 1024px;
  10.  
  11.        ol {
  12.         list-style-type:none;
  13.         padding:0;
  14.         margin:0;
  15.         background-color:black;
  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:white;
  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:grey;
  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 - 
  45.  
  46. li */
  47.       ol > li:hover {
  48.         background-color:green;
  49.       }
  50.  
  51.       /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu 
  52.  
  53. kursorem myszki na element - li */
  54.       ol > li:hover > a {
  55.         color:white;
  56.       }
  57.  
  58.       /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu 
  59.  
  60. kursorem myszki na element - li */
  61.       ol > li:hover > ul {
  62.         display:block;
  63.       }
  64.  
  65.       /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */
  66.  
  67.       /* wygląd głównych rozwijanych elementów - ul */
  68.       ol > li > ul {
  69.         display:none;
  70.         list-style-type:none;
  71.         padding:0;
  72.         margin:0;
  73.       }
  74.  
  75.       /* wygląd elementu - li - w części rozwijanej */
  76.       ol > li > ul > li {
  77.         background-color:green;
  78.       }
  79.  
  80.       /* wygląd elementu - a - w części rozwijanej */
  81.       ol > li > ul > li > a {
  82.         border-top:1px solid white;
  83.       }
  84.  
  85.       /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
  86.       ol > li > ul > li:hover {
  87.         background-color:#DDD;
  88.       }
  89.  
  90.       /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
  91.       ol > li > ul > li:hover > a {
  92.         color:#09C;
  93.       }
  94.     </style>
  95.  
  96.   </head>
  97.  
  98. <body>
  99.  
  100. <div id="nazwa">
  101.  
  102.   <ol>
  103.     <li><a href="#">O mnie - </a>
  104.       <ul>
  105.         <li><a href="#">link - </a></li>
  106.         <li><a href="#">link - </a></li>
  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="#">Serwis - </a>
  114.       <ul>
  115.         <li><a href="#">link - </a></li>
  116.         <li><a href="#">link - </a></li>
  117.         <li><a href="#">link - </a></li>
  118.       </ul>
  119.     </li>
  120.  
  121.     <li><a href="#">Kontakt - 3</a></li>
  122.  
  123.     <li><a href="#">Ftp - 4</a>
  124.       <ul>
  125.         <li><a href="ftp://www.serwer.pl">ReTSat</a></li>
  126.         <li><a href="#">link - 2</a></li>
  127.         <li><a href="#">link - 3</a></li>
  128.         <li><a href="#">link - 4</a></li>
  129.       </ul>
  130.     </li>
  131.   </ol>
  132. </div>
  133. </body>
  134. </html>
  135.  
[HTML] pobierz, plaintext
usb2.0
13.12.2013, 15:20:55
gosciu, przyjrzyj sie czy #nazwa w css czegos nie brakuje..
b5000
13.12.2013, 16:38:25
juz czaje klamra niedomknięta, a pytanie mam

czemu raz jest strona gdzie jest plik html i osobno np style.css a czasem style css sa wpisane w kod źródłowy, czym to się rózni ?
Turson
13.12.2013, 19:15:05
Po prostu dokument HTML z plikiem css dołączonym w zewnętrznym pliku jest czytelniejszy, ponadto jak jeden css jest dla wielu podstron to prościej jak zmienić coś w pliku style.css i zmiana będzie tyczyła wszystkich stron niż potem wszędzie edytować po kolei.
b5000
13.12.2013, 19:55:37
No juz kumam, no a jeśli chciałbym stworzyć sobie osobny plik style.css to muszę powiązac dokument html z plikiem css tylko jak to uczynić ?
Turson
13.12.2013, 20:42:01 
[HTML] pobierz, plaintext 
  1. <link rel="stylesheet" type="text/css" href="ścieżka/do/pliku/css">
[HTML] pobierz, plaintext
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.