Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] zle dziala menu
Forum PHP.pl > Forum > Po stronie przeglądarki
terabit
1.10.2008, 17:47:41
Może ktoś mógłby pomóc winksmiley.jpg
coś nie działa.. kombinuje od dłuższego czasu i zamiast 446px jest okolo 400, nie wiem czemu po bokach zostaja takie wolne miejsca...

oto kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <link rel="stylesheet" type="text/css" href="test.css">
  5.   <title></title>
  6.   </head>
  7.   <body>
  8.         <div id="menu">
  9.           <div class="m">
  10.             <ul>
  11.               <li><a href="" title=""><img src="images/menu/home.gif" border="0"></a></li>
  12.               <li><a href="" title=""><img src="images/menu/about.gif" border="0"></a></li>
  13.               <li><a href="" title=""><img src="images/menu/how.gif" border="0"></a></li>
  14.               <li><a href="" title=""><img src="images/menu/startups.gif" border="0"></a></li>
  15.               <li><a href="" title=""><img src="images/menu/become.gif" border="0"></a></li>
  16.               <li><a href="" title=""><img src="images/menu/services.gif" border="0"></a></li>
  17.             </ul>
  18.           </div>
  19.         </div>
  20.   </body>
  21. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #menu {
  2.   width:446px;
  3.   height:24px;
  4.   float:left;
  5.   margin-top:7px;
  6.   text-align:left;
  7.   background:red;
  8.   display: inline;
  9. }
  10.  
  11. .m{
  12.   width:446px;
  13.   height:24px;
  14.   float:left;
  15.   margin-left:0px;
  16.   display: inline;
  17. }
  18.  
  19. .m ul{ 
  20.   margin:0px;
  21.   width:446px;
  22.   height:24px;
  23.   float:left;
  24.   text-align:left;
  25.   display: inline;
  26. }
  27.  
  28. .m ul li{
  29.   display:block;
  30.   width:auto;
  31.   float:left;
  32.   padding: 0 9 0 9;
  33.   text-align:left;
  34.   background-color:#ffffff;
  35.   display: inline;
  36. }
  37.  
  38. .m ul li a:hover{
  39.   width:auto;
  40.   float:left;
  41.   height:24px;
  42.   background-image:url(images/menu-background.gif);
  43.   background-repeat:repeat-x;
  44.   text-align:left;
  45.   display: inline;
  46. }
  47.  
  48.  
  49. .m ul li img{
  50.   margin-top:4px;
  51.   display: inline;
  52. }
[HTML] pobierz, plaintext
nrafal
1.10.2008, 19:50:16
Cytat(terabit @ 1.10.2008, 18:47:41 ) *
[HTML] pobierz, plaintext 
  1. #menu {
  2.   width:446px;
  3.   height:24px;
  4.   float:left;
  5.   margin-top:7px;
  6.   text-align:left;
  7.   background:red;
  8.   display: inline;
  9. }
  10. .m{
  11.   width:446px;
  12.   height:24px;
  13.   float:left;
  14.   margin-left:0px;
  15.   display: inline;
  16. }
  17.  
  18. .m ul{ 
  19.   margin:0px;
  20.   width:446px;
  21.   height:24px;
  22.   float:left;
  23.   text-align:left;
  24.   display: inline;
  25. }
  26.  
  27. .m ul li{
  28.   display:block;
  29.   width:auto;
  30.   float:left;
  31.   padding: 0 9 0 9;
  32.   text-align:left;
  33.   background-color:#ffffff;
  34.   display: inline;
  35. }
  36.  
  37. .m ul li a:hover{
  38.   width:auto;
  39.   float:left;
  40.   height:24px;
  41.   background-image:url(images/menu-background.gif);
  42.   background-repeat:repeat-x;
  43.   text-align:left;
  44.   display: inline;
  45. }
  46.  
  47.  
  48. .m ul li img{
  49.   margin-top:4px;
  50.   display: inline;
  51. }
[HTML] pobierz, plaintext


A co tam robią te wszystkie display:inline? Float + inline to chyba niezbyt szczęśliwy pomysł, podobnie jak nadawanie wymiarów elementom inline... Albo decydujesz się na float, albo display: inline. Poza tym np. ul ma domyślnie oprócz marginesów jeszcze padding, musisz go wyzerować. W pozostałych elementach podobnie - ustalasz marginesy te które są Ci potrzebne, reszte zostawiasz. Przeglądarka natomiast może mieć jakiś swój domyślny styl, przez który otrzymujesz dodatkowe paddingi i marginesy...
Gdybyś jeszcze to wrzucił w net i dał link to byłoby w ogóle super.
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.