Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Lista pozioma i określone szerokości
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
1010
28.03.2008, 20:55:01
Witam,
potrzebuję stworzyć menu poziome, ale żeby każdy li miał szerokość 100px... Gdy zrobię tak:
[HTML] pobierz, plaintext 
  1. #menu1
  2. {
  3.    font-size: 15px;
  4.    font-weight: bold;
  5.    width: 879px;
  6.    height: 34px;
  7.    background-image: url('img/menu1.jpg');
  8.    background-repeat: no-repeat;
  9.    text-align: center;
  10.    float: left;
  11.    display: inline;
  12. }
  13.  
  14. #menu1 ul
  15. {
  16.    width: 879px;
  17.    padding: 0;
  18.    margin: 9px auto 0 auto;
  19.    float: left;
  20.    display: inline;
  21. }
  22.  
  23. #menu1 li
  24. {
  25.    width: 100px;
  26.    margin: 0;
  27.    padding: 0;
  28.    border: 1px solid;
  29.    list-style-type: none;
  30.    float: center;
  31.    display: inline;
  32. }
[HTML] pobierz, plaintext


to szerokość dopasowywuje się do zawartości... Jak to poprawić?
ShadowD
28.03.2008, 21:12:41
Podaj pełny kod razem z html, to może pomogę... smile.gif
phpion
28.03.2008, 21:17:29
Zmień:
[HTML] pobierz, plaintext 
  1. float: center;
  2.    display: inline;
[HTML] pobierz, plaintext

na:
[HTML] pobierz, plaintext 
  1. float: left;
[HTML] pobierz, plaintext

dla #menu1 li - powinno pomóc.
1010
28.03.2008, 21:21:54
phpion: pomaga, ale w tym przypadku nie jest wyśrodkowane smile.gif

oto cały kod:
[HTML] pobierz, plaintext 
  1. #cotainer
  2. {
  3.    width: 984px;
  4.    min-height: 900px;
  5.    margin: 0 auto;
  6.    padding: 0;
  7.    text-align: left;
  8. }
  9.  
  10.  
  11. #txt
  12. {
  13.    width: 879px;
  14.    background-color: #fff;
  15.    margin: 0 0 0 0;
  16.    padding: 0px;
  17.    float: left;
  18.    display: inline;
  19.  
  20. }
  21.  
  22. #logo
  23. {
  24.    width: 879px;
  25.    height: 140px;
  26.    background-image: url('img/logo.jpg');
  27.    background-repeat: no-repeat;
  28.    float: left;
  29.    display: inline;
  30. }
  31.  
  32. #menu1
  33. {
  34.    font-size: 15px;
  35.    font-weight: bold;
  36.    width: 879px;
  37.    height: 34px;
  38.    background-image: url('img/menu1.jpg');
  39.    background-repeat: no-repeat;
  40.    text-align: center;
  41.    float: left;
  42.    display: inline;
  43. }
  44.  
  45. #menu1 ul
  46. {
  47.    width: 879px;
  48.    padding: 0;
  49.    margin: 9px auto 0 auto;
  50.    float: left;
  51.    display: inline;
  52. }
  53.  
  54. #menu1 li
  55. {
  56.    width: 100px;
  57.    margin: 0;
  58.    padding: 0;
  59.    border: 1px solid;
  60.    list-style-type: none;
  61.    float: left;
  62. }
[HTML] pobierz, plaintext


i html:
[HTML] pobierz, plaintext 
  1. <div id="cotainer">
  2.    <div id="txt">
  3.       <div id="logo"></div>
  4.       <div id="menu1">
  5.          <ul>
  6.             <li style="width: 150px;">Strona Główna</li>
  7.             <li>link</li>
  8.             <li>linki</li>
  9.             <li>Pfdsf</li>
  10.             <li>Forum</li>
  11.          </ul>
  12.       </div>
  13.    </div>
  14. </div>
[HTML] pobierz, plaintext
phpion
28.03.2008, 21:24:49 
[HTML] pobierz, plaintext 
  1. #menu1 ul
  2. {
  3.    width: 879px;
  4.    padding: 0;
  5.    margin: 9px auto 0 auto;
  6. }
[HTML] pobierz, plaintext
ShadowD
28.03.2008, 21:27:26
W IE nie zadziała chyba że zostanie przełączony na tryb zgodności z wc3... ;/
1010
28.03.2008, 21:30:45
Nic to nie dało...

Cytat(ShadowD @ 28.03.2008, 21:27:26 ) *
W IE nie zadziała chyba że zostanie przełączony na tryb zgodności z wc3... ;/

w firefoxie też nie działa...

Czy nagłówki mają coś wspólnego? Jakie powinny być?
ShadowD
28.03.2008, 21:38:39
To znaczy powiem tak jeśli chcesz napisze ci menu poziome bo nie mogę naprawić tego... ;p



Pomysł nr 1 bez formatowania:

[HTML] pobierz, plaintext 
  1. <style>
  2.  
  3. li   {width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
  4.  
  5. </style>
  6.  
  7.  
  8.  
  9. <center>
  10. <ul>
  11. <li>Strona Główna</li>            
  12. <li>Szkoły</li>            
  13. <li>Znajomi</li>            
  14. <li>Poczta</li>            
  15. <li>Forum</li>         
  16. </ul>
  17. </center>
[HTML] pobierz, plaintext




Pomysł nr 2 zgodny z standardami wc3:

[HTML] pobierz, plaintext 
  1. <style>
  2.  
  3. ul   {text-align:center;}
  4.  
  5. li   {width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
  6.  
  7. </style>
  8.  
  9.  
  10.  
  11.  
  12. <ul>
  13. <li>Strona Główna</li>            
  14. <li>Szkoły</li>            
  15. <li>Znajomi</li>            
  16. <li>Poczta</li>            
  17. <li>Forum</li>         
  18. </ul>
[HTML] pobierz, plaintext


Ps Jak coś nie działa to pisz nawet na pw...
1010
28.03.2008, 21:46:08
No i mam to tak i nie śmiga...


Mam aktualnie tak: 
[HTML] pobierz, plaintext 
  1. #menu1
  2. {
  3.    font-size: 15px;
  4.    font-weight: bold;
  5.    width: 879px;
  6.    height: 34px;
  7.    background-image: url('img/menu1.jpg');
  8.    background-repeat: no-repeat;
  9.    text-align: center;
  10.    float: left;
  11. }
  12.  
  13. menu1 ul
  14. {
  15.    text-align: center;
  16. }
  17.  
  18. #menu1 li
  19. {
  20.    width: 100px;
  21.    margin: 0;
  22.    padding: 0;
  23.    border: 1px solid;
  24.    list-style-type: none;
  25.    display: inline;
  26. }
[HTML] pobierz, plaintext



Cały czas albo center albo szerokość
ShadowD
28.03.2008, 21:52:56 
[HTML] pobierz, plaintext 
  1. #menu1
  2. {
  3. font-size: 15px;
  4. font-weight: bold;
  5. width: 879px;
  6. height: 34px;
  7. background-image: url('img/menu1.jpg');
  8. background-repeat: no-repeat;
  9. text-align: center;
  10. float: left;
  11. }
  12.  
  13. menu1 ul                        <<<<<<<<<<<<< BŁĄD MASZ BEZ "#"
  14. {
  15. text-align: center;
  16. }
  17.  
  18. #menu1 li
  19. {
  20. width: 100px;
  21. margin: 0;
  22. padding: 0;
  23. border: 1px solid;
  24. list-style-type: none;
  25. display: inline;
  26. }
[HTML] pobierz, plaintext


i nadałeś id li i ul questionmark.gif

Działający skrypt link http://85.31.230.167/2.php masz kod źródłowy możesz sprawdzić...
1010
28.03.2008, 22:41:10
Dopisanie # nic nie daje... Nie mam już pojęcia co to może być...
ShadowD
29.03.2008, 09:04:32
Napisz tak jak ci tu napisze:

[HTML] pobierz, plaintext 
  1. <style>
  2.  
  3. ul   {text-align:center;}
  4.  
  5. li   {font-weight: bold; width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
  6.  
  7. </style>
  8.  
  9.  
  10.  
  11.  
  12. <ul>
  13. <li>Strona Główna</li>            
  14. <li>Szkoły</li>            
  15. <li>Znajomi</li>            
  16. <li>Poczta</li>            
  17. <li>Forum</li>         
  18. </ul>
[HTML] pobierz, plaintext


Jeśli chcesz dodać id to musisz dodać i wiliście i w stylu proszę kod przykładowy: 

[HTML] pobierz, plaintext 
  1. <style>
  2.  
  3. #lista   {text-align:center;}
  4.  
  5. #menu   {font-weight: bold; width:100px; margin:0; padding:0; border:1px solid; list-style-type:none; display:inline;}
  6.  
  7. </style>
  8.  
  9. <ul id='lista'>
  10. <li id='menu'>Strona Główna</li>            
  11. <li id='menu'>Szkoły</li>            
  12. <li id='menu'>Znajomi</li>            
  13. <li id='menu'>Poczta</li>            
  14. <li id='menu'>Forum</li>         
  15. </ul>
[HTML] pobierz, plaintext


I nie ma prawa nie działać... ;p

wujko_thc
13.04.2008, 21:19:04 
[HTML] pobierz, plaintext 
  1. li {
  2. float:left;
  3. display:block;
  4. width:100px;}
[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.