Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Problem z rozjeżdżające się menu w CSS - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Problem z rozjeżdżające się menu w CSS (/thread-problem-z-rozjezdzajace-sie-menu-w-css)

Problem z rozjeżdżające się menu w CSS - nikipiki - 22-05-2010

Witam

to jest moja pierwsza strona wiec prosze od razu nie krzyczec.. wszystko mniej więcej działa tak jak bym chciał.. ale menu ciągle mi się rozjezdza pod firefoxem wszystko jest ok ale pod IE nie wszystko rozjechane. Jest na to jakis sposob z góry dzięki.. http://teri.xtreemhost.com/

KOD STYLI.CSS
Kod:
BODY {
      background: url(Image/tlo.jpg);
      background-repeat: repeat;
      }

      
    IMG {border: 0px;}

      #top {
      position: relative;
      background-repeat: no-repeat;
      width: 800px;
      height: 500px;
      margin: 0 auto;
      }
      
      #top h2 {
      position: absolute;
      display: block;
      top: 150px;
      left: 350px;      
      }
      
      #b1{
      position: absolute;
      display: block;
      top: 90px;
      left: 110px;
      color: #e1941a;
      width: 480px;
      }
      
      #srodek {
      position: relative;
      background-repeat: no-repeat;
      width: 760px;
      height: 420px;
      margin: 0 auto;
      }
      
      #srodek h2 {
      position: absolute;
      display: block;
      top: 50px;
      left: 380px;      
      }
      
      #srodek h3 {
      position: absolute;
      display: block;
      top: 20px;
      left: 70px;      
      }
      

      /* menu    */
  
      #menu_gora ul
      {
      position: absolute;
      display: block;
      top: 330px;
      left: 230px;
      }
      
      #menu_gora ul li{ float: left;
      display: inline;
      white-space: nowrap;
      }
        
      #menu_gora ul li a
      {
      
      padding: 0px 25px;
      color: #ffffff;  
      font-size: 14px;
      font-family: Arial;    
      text-decoration: none;
      }


RE: Problem z rozjeżdżające się menu w CSS - nikipiki - 22-05-2010

i co nikt nie pomoze..

RE: Problem z rozjeżdżające się menu w CSS - R_Rafalsky - 24-05-2010

Image/kropka.png - obrazek nie wyświetla się.
Pod Operą też to będzie fatalnie wyglądać. Napraw lub usuń link do obrazka kropka.png i wszystko ładnie się ułoży. Przeglądarki poza FF wrzucają mały obrazek, który informuje o błędzie przy wczytywaniu obrazka (przykładowo krzyżyk) i to jest przyczyną rozchodzenia się menu.
Kod:
<div id="menu_gora">
  
          
          <ul>
          <li><a href="index.html">Główna </a></li>
          <li><a href="galeria.html">Galeria </a></li>
          <li><a href="kontakt.php">Kontakt </a></li>
          </ul>
          
  </div>

To mi się dobrze wyświetla.

RE: Problem z rozjeżdżające się menu w CSS - nikipiki - 24-05-2010

faktycznie tego nie zauważyłem.. ale i tak nie jest dobrze.. dlaczego tak się dzieje.. każda przeglądarka inaczej interpretuje pozycjonowanie..? teraz chodzi o odległość od góry.. pod Firefoxem może być ale pod IE np już jest rozjechane.. musi być na to jakiś sposób.. z góry dzięki

RE: Problem z rozjeżdżające się menu w CSS - R_Rafalsky - 24-05-2010

IE8 wyświetla prawidłowo, w IE7 jest problem. Nie wiem jak jest w IE6 ale tej przeglądarki nie pilnuję Smile
Rozwiązaniem jest tylko dodanie formatowania warunkowego skierowanego tylko do tej przeglądarki
Kod:
<!--[if lte IE 7]>
Tu wstawiamy style CSS skierowane do przeglądarek IE w wersji 7 i starszych
<![endif]-->
Obniż jeszcze trochę elementy H1. Ogólnie masz bardzo dziwną budowę strony. Dlaczego w H1 jest obrazek? H2 i H3 to samo. Tak się nie robi. Hn to nagłówek n-tego stopnia, nie powinno być tam żadnego obrazku tylko tekst nagłówkowy. Zamiast nagłówków Hn zamień je na DIV, dodaj do DIVów klasy lub id (w zależności od uznania) i wypozycjonuj te elementy w CSS. Możliwe, że taka struktura strony powoduje, że starsze przeglądarki źle je interpretują i widzisz takie cuda.
Cytat:Każda przeglądarka inaczej interpretuje pozycjonowanie?
Prawda, są różnice w interpretacji stylów przez przeglądarki. By te różnice usunąć korzysta się z tzw. Frameworków CSS (zestaw styli uogólniających widok wszystkich elementów). Jednak w Twoim przypadku raczej zaważyła nieprawidłowa budowa samej strony - przeglądarki starają się poprawiać te błędy na swój sposób - stąd te różnice.

RE: Problem z rozjeżdżające się menu w CSS - testw - 25-05-2010

dodaj margin, powinno pomoc Smile
Kod:
#menu_gora ul
{
position: absolute;
display: block;
top: 330px;
left: 230px;
margin:10px 230px;
}