Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Problem z menu - przesuwanie elementu w prawo.
ats2008
post 30.06.2009, 20:13:59
Post #1





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 11.06.2009
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Witajcie,

Postawiłem sobie za zadanie utworzenie menu, którego elementy listy, po najechaniu myszką, będą przesuwały się w prawą stronę. Jego próbkę wstawiłem tutaj: http://www.ats2008.cba.pl/xyz/relative2.html.

Oto kod (html + css):

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css">

#menu {width:200px; height:auto;
        padding:10px;
        margin:10px;
        float:left;
        }
#menu ul, li {margin:0px;
        padding:0px;
        display:block;
        }
        
#menu ul {
        list-style:none;
        width:200px;
        height:auto;
        background-color:#00FFFF;}

#menu ul li {
        margin-bottom:2px;}

#menu ul li a:link, #menu ul li a:visited {
        
        padding-left:15px;
        color: #ffffff;
        text-decoration:none;
        
        display:block;
        width:140px;
        height:30px;
        
        background-image:url(tlo.gif);
        background-repeat:no-repeat;
        }

#menu ul li a:hover {
        text-decoration:none;
        color:#0000CC;
        
        display:block;
        width:180px;
        height:30px;
        padding-left:60px;
        
        background-image:url(tlo2.gif);
        
        background-repeat:no-repeat;
        }
        
#prawy {float:left;
        height:200px;
        width:auto;
        border:1px solid #FF9900;
        margin-top:20px;
        position: static;
        padding:10px;
        }
</style>
</head>

<body>

<div id="menu">
    
    <ul>
        <li style="position:relative; left:84px;"><a href="">Jeden </a></li>
        <li style="position:relative; left:70px;"><a href="">Dwa</a></li>
        <li style="position:relative; left:56px;"><a href="">Trzy</a></li>
        <li style="position:relative; left:42px;"><a href="">Cztery</a></li>
        <li style="position:relative; left:28px;"><a href="">Pięć</a></li>
        <li style="position:relative; left:14px;"><a href="">Sześć</a></li>
        <li><a href="">Siedem</a></li>
    </ul>

</div>
<div id="prawy">Prawy</div>

</body>
</html>


Problem pojawia się oczywiście z IE6, w innych działa wzorowo.

Wyświetlijcie sobie, żeby zobaczyć, o co chodzi.

Div "prawy" przesuwa się w prawo, a cała lista (co widać dzięki tłu) poszerza się. Przy stronie całość się rozjedzie oczywiście.

Użyłem tutaj posiostion: relative, choć wiem, że IE ma problemy z jego obsługą.
Czy macie jakieś pomysły, żeby poprawić kod i zachować podobny efekt schodków?

Z góry dzięki.
Go to the top of the page
+Quote Post
Andaramuxo
post 30.06.2009, 20:41:47
Post #2





Grupa: Zarejestrowani
Postów: 150
Pomógł: 15
Dołączył: 18.03.2009

Ostrzeżenie: (10%)
X----

Cytat
Niestety, Internet Explorer 6 i poniżej nie rozpoznaje pseudo :hover na każdy element, z wyjątkiem <a> tag. To get around IE's crappulence we have to add a bit of JavaScript for the poor souls that are still blind to the future . Aby obejść IE's crappulence musimy dodać trochę JavaScript dla biednych dusz, które są jeszcze ślepe do przyszłości.

Skopiowałem to z angielskiej strony i przetłumaczyłem wtyczka, musisz to zrobić JS, tam był taki kod:
[HTML] pobierz, plaintext 
  1. <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquer...3/jquery.min.js" type="text/javascript"></script>
  2. <!--[if gte IE 5.5]>
  3. <script language="JavaScript" type="text/JavaScript">
  4. $(document).ready(function(){
  5. $("#navmenu-h li,#navmenu-v li").hover(
  6. function() { $(this).addClass("iehover"); },
  7.  function() { $(this).removeClass("iehover"); }
  8. );});
  9.  </script>
  10. <![endif]-->
[HTML] pobierz, plaintext

Tu masz linka:
http://qrayg.com/learn/code/cssmenus

Ten post edytował Andaramuxo 30.06.2009, 20:42:15


--------------------
Go to the top of the page
+Quote Post
ats2008
post 2.07.2009, 18:17:23
Post #3





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 11.06.2009
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Dzięki, hmmm, problem w tym, że chciałbym uniknąć javy.

Wolę już raczej pójść w php i zapisać mu osobny css, bez tych fajerwerków pod IE.

Pozdro.

Nasunęło mi się jeszcze pytanko.

Jestem początkujący w JS - wybaczcie...

IE ma standardowo wyłączoną obsługę JS. Czy ten skrypt zadziała?

Pozdro
Go to the top of the page
+Quote Post
Pawel_W
post 2.07.2009, 18:18:22
Post #4





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----


to tak nawiasem ;p
Go to the top of the page
+Quote Post
ats2008
post 3.07.2009, 17:18:49
Post #5





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 11.06.2009
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Witajcie,

Po próbach i błędach w końcu udało mi się rozwiązać problem z IE w moim przykładzie. Można go już śmiało używać.

Chodzi o to, żeby przesunięcie nie wychodziło poza szerokość listy - u mnie <div id="menu">. Poszerzyłem i wszystko działa.

Tak oto się teraz prezentuje: http://www.ats2008.cba.pl/xyz/relative3.html..

Z góry dzięki.

P.S. Przecież każdy w miarę rozgarnięty wie, że JS to nie to samo co JAVA. Ale różne so ludzie...

pozdro
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 4.05.2025 - 06:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn