Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Rozjeżdżające sie menu
Forum PHP.pl > Forum > Przedszkole
badowl
Witam, kiedy zamiast obrazka w div'ie logo był normalny tekst wszystko było w porządku. Menu z logiem było wyśrodkowane i poinie i poziomie. Zmieniłem go jednak na tekst. Wtedy całe menu, bez loga zjechało w dół.

  1. <div name="menu" id="menu">
  2. <ul id="main_menu">
  3. <li id="logo"><img id="img_logo" src="scripts/logo.png" /></li>
  4. <li><a href="index.php">INFORMACJE</a></li>
  5. <li><a href="blog.php">BLOG</a></li>
  6. <li><a href="forum.php">FOFUM</a></li>
  7. <li><a href="about.php">O NAS</a></li>
  8. <li><form name="wyszukiwarka" method="post" action="szukaj.php"><input type="text" name="szukaj" id="szukaj" onkeyup="send(event)" /></form></li>
  9. </ul>
  10. </div>


  1. #menu {
  2. width:1400px;;
  3. height:45px;
  4. background-color:#1f1f1f;
  5. margin: 0 auto;
  6. text-align:center;
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. right: 0;
  11. z-index:99999999;
  12. vertical-align:middle;
  13. }
  14. ul#main_menu #logo {
  15. margin-left:5px;
  16. margin-right:5px;
  17. font-size:36px;
  18. }
  19. #szukaj {
  20. width:120px;
  21. height:20px;
  22. background-color:#2d65b8;
  23. border:0px;
  24. }
  25. form {
  26. display: inline;
  27. }
  28. ul#main_menu, ul#main_menu li {
  29. position:relative;
  30. display: inline;
  31. list-style: none;
  32. margin: 5px;
  33. padding: 0;
  34. font-family:"Century Gothic";
  35. font-size:20px;
  36. color:#2d65b8;
  37. vertical-align:middle;
  38. }
  39.  
  40. ul#main_menu li {
  41. display: inline;
  42. white-space: nowrap;
  43. }
  44. a {
  45. text-decoration:none;
  46. color:#2d65b8;
  47. }
  48. a:visited {
  49. text-decoration:none;
  50. color:#2d65b8;
  51. }
  52. a:hover {
  53. text-decoration:underline;
  54. }




Byłbym wdzięczny za pomoc smile.gif

Nikt nie wie?
gitbejbe
Twój problem najprawdopodobniej wynika z tego, że nie ustawiłeś rozmiarów dla wstawionego obrazka w <img>.
W stylu dodaj dla <li id="logo"> parametr width, height oraz dla <img> to samo. szerokość i wysokość obrazka nie może być większa niż ta w li id=logo.

Chyba, że źle Ciebie zrozumiałem bo napisałeś, że zanim wstawiłeś obrazek to był tekst i było ok, a później zmieniłeś na tekst i się rozsypało ;p przyjąłem, że chodzi Ci ciągle o problem ze wstawieniem obrazka.

EDIT:

np:
ul#main_menu #logo img{height:50px;width:50px;}

powinno pomóc : )
badowl
Niestety nie pomogło ;/
Najpierw był tekst w stylu
  1. <li id='logo'>LOGO</li>

Poźniej zamiast LOGO wstawiłem obrazek. Obraz loga był tam gdzie powinien ale reszta menu zjechała o kilkanaście pikseli w dół
Michasko
Możesz to wrzucić na jsFiddle ? Twój HTML i CSS. Oczywiście z obrazkiem.
badowl
http://jsfiddle.net/kXFXZ/6/
Michasko
http://jsfiddle.net/eRtg7/5/

Formularz wyśrodkuj sobie jakimś padding`iem albo top`em.
edit: aha, i pousuwaj sobie jakieś zbędne śmieci. Jeśli korzystasz z 'vertical-align' to musisz mieć zdefiniowane line-height, a nie height wink.gif ew. możesz traktować element macierzysty jako komórkę tabeli (display: table-cell).
badowl
Dzięki wielkie smile.gif
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.