Zaloguj się

Dzonzi · Liczba postów: 1 Liczba wątków: 1 Dołączył: 01-02-2010 Reputacja: 0

Witam.
Mam problem z rozwijanym menu w IE w Viście. W operze na Xp dziala elegancko a IE menu wgl sie nie rozwija. Moja cierpliwośc sie skończyła. Proszę o pomoc.
Oto kod:

Kod PHP:
<html>

<head>

<style type="text/css">

body {
    background-color: #FFCC66;
        border-style: ridge;
        border-color: red;
        border-width: 5px;
 }

#menu_zawartosc {margin:100px 300px 15px; position:relative; width:735px; height:20px; z-index:100;}

#menu, #menu ul {padding:0; margin:0; list-style-type: none;}

#menu  a, #menu a:visited {display:block;width:120px; font-size:15px; color:white; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}

#menu li ul li a, #menu li ul li a:visited {border-width:0 1px 1px 1px;}

#menu li a.link, #menu li a.link:visited {border-width:1px;}

#menu li {float:left; background: black;}

#menu li:hover {position:relative;}

#menu li:hover > a {background: black
; color: #c00;}

#menu li ul {display:none;}

#menu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent; width:120px;}

#menu > li:hover > ul {left:-30px; top:16px;}

#menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

* html #menu li a:hover {position:relative; background:#dfd7ca; color:#c00;}

#menu li a:active, #menu li a:focus {background:#dfd7ca; color:#c00;}

* html #menu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent;}

#menu li a:hover ul ul{visibility:hidden;}

#menu li a:hover ul a:hover ul ul{visibility:hidden;}

#menu li a:hover ul a:hover ul a:hover ul ul{visibility:hidden;}

#menu li a:hover ul a:hover ul a:hover ul a:hover ul ul {visibility:hidden;}

#menu li a:hover ul {visibility:visible; left:-30px; top:14px;}

#menu li a:hover ul a:hover ul{visibility:visible; top:-11px; left:80px;}

#menu li a:hover ul a:hover ul a:hover ul {visibility:visible;}

#menu li a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}

#menu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}

#tekst li {float:left; background: red;}

#poletekstowe {margin:100px 210px 600px; position:relative; width:700px; height:25px; z-index:100;}

#tekst  a, #tekst a:visited {display:block;width:700px; font-size:15px; color:white; height:500px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}

#tekst li {float:left; background: black;}

b {font-size: 20px;}

</style>

     </head>

     <body>

<div id="menu_zawartosc">

<ul id="menu">

<li><a href="#">Strona Główna</a>

<li><a href="#">Forum Szkoly</a></li>
<li><a href="#">Gmina Harasiuki<!--[if IE 7]><!--></a>

<ul>         

<li><a href="#">Powierzchnia</a></li>
<li><a href="#">Liczba ludnosci</a></li>
<li><a href="#">Data Utworzenia</a></li>
 </ul>     

<li class=""><a href="#">Pomoc Naukowa<!--[if IE 7]><!--></a><!--<![rozzwija]-->
    <!--[if lte IE 6]>

<table>
 <tr>
<td><![rozzwija]-->

<ul>         

<li><a href="#">Jezyk Polski</a></li>
<li><a href="#">Matematyka</a></li>
 <li><a href="#">Informatyka</a></li>
</ul>

<li><a href="#">Gimnazjum<!--[if IE 7]><!--></a>
<ul>

<li><a href="#">Nauczyciele</a></li>
 <li><a href="#">Przedmioty</a></li>
<li><a href="#">Rozklad zajec</a></li>

                            <!--[if lte IE 6]></td>
 </li>         

</div>

<div id="poletekstowe">

<ul id="tekst">

<li><a><b>Gmina Harasiuki</b> (do 1954 gmina Huta Krzeszowska) - gmina wiejska w województwie podkarpackim, w powiecie niżańskim. W latach 1975-1998 gmina położona była w województwie tarnobrzeskim.

</body>

</html>

razorskate · 03-02-2010, 19:34

IE ma problem z obsługą pseudoklas, więc selektory potomka itp. są dla niego dość obce Wink

. Więc już chyba masz rozwiązanie ?

Jeśli chcesz zrobić menu rozwijalne, polecam takie:

Kod CSS:

Kod:
#drop_down_menus * {

    margin:0; padding:0; /* usunięcie marginesów */

    }

#drop_down_menus {

    behavior:url(../../lib/js_tools/csshover.htc);

    font-family:lucida, arial, sans-serif;

    border:1px solid #686;

    float:left; 

    }

#drop_down_menus ul  {   

    /* border:2px solid red; */   /*  ramka kontenera */

    float:left; /* ul otacza li */

    }

#drop_down_menus li  {   

    /* border:2px solid blue; */  

    border-left:2px solid #ACA; 

    list-style-type:none; /* usunięcie punktorów listy */

    float:left; 

     position:relative; 

    background-color:#DED;

    }

#drop_down_menus li:first-child  {

    border-left:none; 

    }

#drop_down_menus a {

    display:block; /* odpowiada za poprawne wyświetlenie podmenu (element pod elementem) */

    padding:.3em 6px; 

    color:#686;

    text-decoration:none;

    }

#drop_down_menus a:hover {

    color:#DED; 

    background-color:#464;

    }

#drop_down_menus li ul {

    position:absolute; 

    display:none; 

    width:7em; 

    left:-1px;

    }

#drop_down_menus li:hover ul {

    display:block; /* wyświetla podmenu po najechaniu myszką */

    }

#drop_down_menus li ul li {

    width:100%;  

    border-right:1px solid #686; /* obramowanie */

    border-bottom:1px solid #686;

    border-left:1px solid #686; 

    }

#drop_down_menus li ul li:first-child {

    border-left:1px solid #686; 

    border-top:1px solid #686; 

    }

/* a hack for IE 6 - doesn't understand first-child \*/

* html #drop_down_menus li ul {

    border-top:1px solid #686; /* dodanie górnego obramowania w submenu w IE6 */

    }

Kod HTML:

Kod:
<div id="drop_down_menus"> 

  <ul> 

    <li><a href="#">Item 1</a> 

         <ul> 

            <li><a href="#">Item 1a</a>    </li> 

            <li><a href="#">Item 1b</a></li> 

         </ul> 

      </li> 

    <li><a href="#">Item 2</a> 

         <ul> 

            <li><a href="#">Item 2a</a>    </li> 

            <li><a href="#">Item 2b</a></li> 

            <li><a href="#">Item 2c</a></li> 

         </ul> 

    </li> 

    <li><a href="#">Item 3</a> 

         <ul> 

            <li><a href="#">Item 3a</a>    </li> 

            <li><a href="#">Item 3b</a></li> 

         </ul> 

    </li> 

  </ul> 

</div>

Całą zabawa polega na odpowiednim zagnieżdżaniu list w html. To tyle jeśli chodzi o robienie rozwijanych menu w CSS Wink

. Dodaj do tego powyżej jakieś bajery graficzne i będzie w porządku. Jeśli przeanalizujesz budowę html tegoż menu, z łatwością poznasz zasadę jego działania Smile

Pawel18 · 05-02-2010, 06:06

Witam
To menu nie dziala w ie6. Mam problem z tym. przedstawie moje menu. Pomoze ktos poprawic? W firefoxie i operze dziala ok, a w IE juz nie.

__________________CSS____________________________

#menu {
position: relative; z-index: 2; top: 0px; right: 1px; bottom: 0px; left: 0px;
list-style-type: none;
}
#menu ul {
list-style-type: none;
}

#menu li {
float: left;
}

#menu li li {
float: none;
}
#menu li a {
display: block;
width: 127px;
text-align: center;
background-color: blue;
background-repeat: no-repeat;
color: black;
padding: 3px 0px;
text-decoration: underline;
}
#menu li a:hover {
background-color: blue;
background-repeat: no-repeat;
color: black;
text-decoration: none;
}

#menu li ul {
position: absolute;
height: 1px;
overflow: hidden;
}

#menu li:hover ul {
height: 150px;
}

.przerwa {
height: 1px;
}

__________________HTML____________________________

<ul id="menu">
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
</ul>

Z gory dzieki za pomoc. Najlepij odpisac na maila: [email protected]

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie