Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu w CSS
Forum PHP.pl > Forum > Po stronie przeglądarki
Spykaj
18.07.2008, 14:39:38
Hmmm, normalnie używałem w menu tabel, ale przeczytałem, że lepiej menu się robi w CSS ;d no to spróbowałem i wynikły z tego same problemy tongue.gif oto kod:

[HTML] pobierz, plaintext 
  1. <html>
  2.  <head>
  3.    <title>Moje projekty PHP + MySQL</title>
  4.    <style type="text/css">
  5.    <!--
  6.      #menu .border{border-top: black 1px solid; border-left: black 1px solid;  padding: 0px margin: 0px;}
  7.      #menu .header{font-family: Tahoma; font-weight: bold; font-size: 10pt; border-right: black 1px solid; border-bottom: black 1px solid; color: blue;}
  8.      #menu .element{font-family: Tahoma; font-size: 8pt; text-align: left; border-right: black 1px solid; border-bottom: black 1px solid; padding-left: 3px;}
  9.    -->
  10.    </style>
  11.  </head>
  12.  <body>
  13.  
  14.  <div id="menu">
  15.  <div class="border">
  16.    <div class="header">Menu</div>
  17.    <form action="nieważne">
  18.    <div class="element">Link 1</div>
  19.    <div class="element">Link 2</div>
  20.    <div class="element">Link 3</div>
  21.    </form>
  22.  </div>
  23.  </div>
  24.  
  25.  </body>
  26.  </html>
[HTML] pobierz, plaintext


W Fx jest wszystko ok, ale IE 6 traktuje <form> i </form> jako tekst sleep.gif przez co efekt jest niezadowalający. Czy ten kod w ogóle jest dobry ? ;d zastanawiam się w tym przypadku nad powrotem do tabelek ;p ma ktoś jakiś pomysł ja kto poprawić, zmienić ten kod, czy coś ? Najlepiej ktoś, kto się zna. Dzięki z góry.
Shili
18.07.2008, 15:00:30
Nie wiem co chcesz osiągnąć, ale po kolei. Pierwszą rzeczą jest to, że menu buduje się na listach (na przykład ul, u Ciebie divy to nadużycie semantyczne). Druga sprawa jest taka, że forma tam nie powinno być. Form służy do wyświetlania formularzy, a u Ciebie żadnego formularza nie widzę.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Moje projekty PHP + MySQL</title>
  4. <style type="text/css">
  5. <!--
  6. * {padding: 0; margin: 0;}
  7. ul li {list-style-type: none;}
  8. #menu {margin: 10px;}
  9. #menu ul {border-top: black 1px solid; border-left: black 1px solid; padding: 0px margin: 0px;}
  10. #menu ul h4 {font-family: Tahoma; font-weight: bold; font-size: 10pt;color: blue;}
  11. #menu ul li {font-family: Tahoma; font-size: 8pt; text-align: left; border-right: black 1px solid; border-bottom: black 1px solid; padding-left: 3px;}
  12. #menu ul li a {color:#000000; text-decoration: none;}
  13. -->
  14. </style>
  15. </head>
  16. <body>
  17.  
  18. <div id="menu">
  19.  
  20. <ul>
  21.     <li><h4>Menu</h4></li>
  22.     <li><a href="#">Link1</a></li>
  23.     <li><a href="#">Link2</a></li>
  24.     <li><a href="#">Link3</a></li>
  25. </ul>
  26.  
  27. </div>
  28.  
  29. </body>
  30. </html>
[HTML] pobierz, plaintext
To jest semantyczny kod, być może troszkę nadmiarowy css, ale efekt jest albo ten sam, albo bardzo podobny (nie chciało mi się liczyć dokładnie marginesów.

@down
Stworzyłaś tongue.gif
Spykaj
18.07.2008, 17:58:12
O dzięki, formularza mi się nie chciało całego tworzyć, po prostu mógłby tam być.

U ciebie nie ma tego problemu i tak, czy siak działa.

Bardzo ładny kod stworzyłeś, oczywiście plusik dla ciebie. O to mi chodziło.
Kreton
18.07.2008, 20:17:18
WTF ? Nie powinnaś przypadkiem <h4> wyrzucic przed samą listę. IMO h4 nijak ma się do składników menu. Jest nagłówkiem.

To tak jakbym napisał: <p><h4>Nagłówek</h4> bla bla bla lubie bzdurzyć</p>
Czyli bez sensu. Może się mylę - przepraszam w takim razie smile.gif
Shili
18.07.2008, 20:30:47
Zrozumiałam po div class="header" że ma być to nagłówek, a skoro nagłówek, na co nazwa wskazuje to trzeba zrobić nagłówek, miast sztucznych tworów. Czemu h4? Można i h6, można h5.

To co napisałeś poniżej faktycznie jest bez sensu, z tego względu że p nie może przyjmować jako dzieci elementów blokowych i tym się różni od li, które jak najbardziej może. Gdyby zamiast p było div miałoby to jak najbardziej sens.
Kreton
18.07.2008, 20:40:31
Źle mnie zrozumialaś.
Kod
<ul>
<li><h4>Menu</h4></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>

Chodzi mi o ten fragment kodu. Nieważne czy jest tam h3 czy h5. Zastanawia mnie miejsce h4 w środku listy. Z logicznego punktu widzenia ( mojego ) to jest bez sensu bo <hx> służy do czego innego. Brnąc dalej, w moim mniemaniu elementy w liście na tym samym poziomie mają jadnakową wartość co już dyskfalifikuje jakiekolwiek hx. Czyli teraz w ogromnym skruciem, imo h4 powinno być przed listą. smile.gif
Shili
18.07.2008, 20:50:47
Uważam, że jak najbardziej może być przed listą i z tym trudno się nie zgodzić winksmiley.jpg ale nie musi. W3C z jakiegoś powodu zezwala na umieszczanie nagłówków, moim zdaniem wie co robi.

hx służy do nagłówków (co w końcu nie jest dziwne), element listy również może być nagłówkiem, ba, każdy element może być oddzielnym nagłówkiem (można tutaj rozmawiać o sensowności takiego rozwiązania, jednak jest to rozwiązanie poprawne z punktu widzenia gramatyki języka przynajmniej xhtml - nie wiem jak definiuje to html).

Jeśli chodzi o wartość list i ich poziom - idąc tym samym tropem w liście nie powinien się pojawić również strong, em czy inne znaczniki wskazujące na większą wartość treści (chociaż fakt, hx wkazuje najbardziej winksmiley.jpg)

Także to już naprawdę jak kto woli, ale podążając za consortium i jedno i drugie jest poprawne składniowo.
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.