Forum PHP.pl > [HTML][CSS]Problem z menu - przesuwanie elementu w prawo.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Problem z menu - przesuwanie elementu w prawo.

ats2008

30.06.2009, 20:13:59

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.

Andaramuxo

30.06.2009, 20:41:47

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 
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquer...3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
 function() { $(this).removeClass("iehover"); }
);});
 </script>
<![endif]-->
[HTML] pobierz, plaintext

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

ats2008

2.07.2009, 18:17:23

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

Pawel_W

2.07.2009, 18:18:22

to tak nawiasem ;p

ats2008

3.07.2009, 17:18:49

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

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.