Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Problem z menu
Forum PHP.pl > Forum > Przedszkole
Szymoneks12
31.07.2010, 10:02:01
Mam menu:

[HTML] pobierz, plaintext 
  1.     <!-- Menu -->
  2.  
  3. <div id="menu_tabela">
  4.     <ul class="menu">
  5.  
  6.     <li><a href="XY" class="nawigacja">XY</a></li>
  7.  
  8.     <li><a href="YX" class="nawigacja">YX</a></li>
  9.  
  10.     <li><a href="ZW" class="nawigacja">ZW</a></li>
  11.  
  12.     <li><a href="WZ" class="nawigacja">WZ</a></li>
  13.  
  14.     </ul>
  15. </div>
  16.  
  17.     <!-- Koniec Menu -->
  18.  
[HTML] pobierz, plaintext


i CSS:

[CSS] pobierz, plaintext 
  1.  
  2. /* Menu */
  3.  
  4. div#menu_tabela {
  5.  
  6.     background: url(tlo_menu.png);
  7.     height: 90%;
  8.     width: 75%;
  9.     margin: auto;
  10.     border: 5px ridge;
  11.     border-color: #99BF33;
  12. }
  13.  
  14. ul.menu li.nawigacja {
  15.  
  16.     text-align: center;
  17.     font-size: 100%;
  18. }
  19.  
  20.  
  21. /* Koniec Menu */
  22.  
[CSS] pobierz, plaintext


Tyle, że chciałbym, aby elementy menu wyświetlały się w jednej linii.
shark121
31.07.2010, 10:15:03 
[HTML] pobierz, plaintext 
  1. div#menu_tabela {
  2.  
  3.     background: url(tlo_menu.png);
  4.     height: 90%;
  5.     width: 75%;
  6.     margin: auto;
  7.     border: 5px ridge;
  8.     border-color: #99BF33;
  9. }
  10.  
  11. ul.menu li {
  12.     text-align: center;
  13.     font-size: 100%;
  14. 	display: inline-block;
  15. }
  16.  
  17. /* Koniec Menu */
[HTML] pobierz, plaintext
malminiart
31.07.2010, 10:15:07
napisałeś klase dla listowania <li> a dodałeś do anchor'a <a>

[HTML] pobierz, plaintext 
  1. <body>
  2. <style type="text/css">
  3. div#menu_tabela {
  4.     background: url(tlo_menu.png);
  5.     height: 90%;
  6.     width: 75%;
  7.     margin: auto;
  8.     border: 5px ridge;
  9.     border-color: #99BF33;
  10. }
  11.  
  12. ul.menu li.nawigacja {
  13.  	float:left;
  14. 	margin:0;
  15. 	padding:10px;
  16.     text-align: center;
  17.     font-size: 100%;
  18. }
  19. </style>
  20. <div id="menu_tabela">
  21.     <ul class="menu">
  22.  
  23.     <li class="nawigacja"><a href="XY" >XY</a></li>
  24.  
  25.     <li class="nawigacja"><a href="YX" >YX</a></li>
  26.  
  27.     <li class="nawigacja"><a href="ZW" >ZW</a></li>
  28.  
  29.     <li class="nawigacja"><a href="WZ" >WZ</a></li>
  30.  
  31.     </ul>
  32. </div>
  33. </body>
[HTML] pobierz, plaintext

przyda się też float:left; i padding

pozdrawiam
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.