Forum PHP.pl > [CSS]Problem z rozmiarami rozuswanego menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Problem z rozmiarami rozuswanego menu

kosa351

4.01.2009, 16:42:52

Witam serdecznie w Nowym Roku,
mam pewien problem z rozsuwanym menu. Na stronie postanowiłem skorzystać z tego rozwiązania http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm
Wszystko jest niby OK, ale mam problem z automatyczną wysokością rozsuwanego menu w zależności od treści.
W części kodu

Kod

.subItem
       {
       height:450px;
       width:auto;
       color:#FFFFFF;
       text-decoration:none;
       border-bottom:none 0px;
       }

Ustalamy sobie stałą wysokość. Aktualnie mam ustawione 450px. Niestety w jednym menu mam więcej treści, a w drugim mniej więc chciałbym aby to przycinał.
Przykład

Chciałem to przyciąć więc ustawiłem zamiast 450px - auto lecz niestety efekt tej zamiany jest taki:

Ponadto jak widać na ostatnim screenie IE7 się wykrzacza i nie działa nawet rozwijane menu.

Czy ktoś doradzi jak rozwiązać ten problem?

Pozdrawiam

Kod całego CSS

Kod

.navbar
   {
   }

   .mainDiv
   {
     width:auto;
   }

   .topItem
   {
   width:300px;
   height:auto;
   color:#E21015;
   cursor:pointer;
   padding-bottom:5px;
   }

   .topItemOver
   {
       height: auto;
       width:300px;
       color:#E21015;
       cursor:pointer;
       padding-bottom:5px;
       background-color:#F00;
       color:#FF0;
       background-image:url(images/arrow_up.png);
       background-position:right;
       background-repeat:no-repeat;
   }

   .topItemClose
   {
   height: auto;
   width:300px;
   color: #E21015;
   cursor:pointer;
   padding-bottom:5px;
   text-decoration:none;
   border-bottom:dashed 1px;
   }


   .topItemCloseOver
   {
   height: auto;
   width: 300px;
   color: #E21015;
   cursor:pointer;
   padding-bottom:5px;
   text-decoration:none;
   border-bottom:dashed 1px;
   background-color:#000;
   color:#FF0;
   background-image:url(images/arrow_down.png);
   background-position:right;
   background-repeat:no-repeat;
   }



   .dropMenu
   {
   background-color: #000;
   color: #000;
   border: 1px solid #000;
   border-width: 1px 1px 1px 1px;
   filter:alpha(opacity=100);
   padding-top:5px;
   padding-left:8px;
   }

   .subMenu
   {
   display:block;
   }

   .subItem
   {
   height:450px;
   width:auto;
   color:#FFFFFF;
   text-decoration:none;
   border-bottom:none 0px;
   }

   .subItem a
   {
   border-bottom:none 0px;
   }

   .subItemOver
   {
   height:auto;
   color: #FFFFFF;
   }

   .subItemOver  a
   {
   cursor:pointer;
   color: #E21015;
   color:#FFFFFF;
   border-bottom:none 0px;
   }


   .drop
   {
   border-left:1px solid black;
   border-right:1px solid black;
   }

kod html

Kod

<div class="mainDiv" >
<div class="topItem" >- system LUX</div>
<div class="dropMenu" >
     <div class="subMenu" style="display:inline;">
         <div class="subItem">
         <a href="../images/wisniowski/system_lux/aw_10_31.jpg" rel="lytebox[System LUX]" title="AW.10.31"><img src="../images/wisniowski/system_lux/aw_10_31.jpg" width="210" height="110" alt="aw_10_31" /></a>
         <a href="../images/wisniowski/system_lux/aw_10_33.jpg" rel="lytebox[System LUX]" title="AW.10.33"><img src="../images/wisniowski/system_lux/aw_10_33.jpg" width="210" height="110" alt="aw_10_33" /></a>
.......................................pozostałe zdjęcia.........................................
     </div>
</div>
</div>

erix

4.01.2009, 17:34:05

spróbuj dać dla class="dropMenu" własność overflow: hidden
do Twojego zastosowania proponowałbym użycie jQuery, wtedy wyglądałoby to mniej więcej tak:
Kod
<a href="" onclick="$('#elementy').slideToggle()">pokaż/ukryj</a>
<div id="elementy" style="display: none"></div>

kosa351

5.01.2009, 20:15:09

proponowane przez Ciebie rozwiązanie nie zatrybiło. Skorzystałem z rady i przesiadłem się na http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

erix

6.01.2009, 20:36:53

Cytat

proponowane przez Ciebie rozwiązanie nie zatrybiło.

Bo coś - widocznie - zepsułeś.

A jeśli chodzi o skrypt, do którego zalinkowałeś - jest to praktycznie to samo, tylko więcej kodu.

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.