ugrás a tartalomhoz

gyerek div szélessége nagyobb, mint a szülőé?

Pal_ur · 2010. Jan. 4. (H), 15.22
Üdv,

olyanon küzdöm, hogy dinamikusan változó szélességű menüpontok alá almenüpontokat illesszek.
  1. <li class="menuitem"><a href="#">Elem</a>  
  2. <div id="menu-outer">  
  3. <ul><li>Szöveg</li></ul>  
  4. </div>  
  5. </li>  
A "menuitem" listaelemnek nem szeretnék (és nem is tudok) width értéket megadni, mert abban változó tartalmak vannak. Viszont szeretném, ha a menu-outer szélesebb lenne, mint a listaelem. Width érték sehol nincsen megadva, a releváns css mindössze ennyi:
  1. li.menuitem {  
  2. height: 60px;  
  3. }  
  4. li.menuitem a {  
  5. padding: 15px 25px 20px 20px;  
  6. line-height: 50px;   
  7. }  
  8. li #menu-outer {  
  9. display: block;  
  10. }  
Hogyan tudnám megvalósítani?

Köszönöm,

P.
‹ Egyszerű képváltó script keresése CSS öröklési hiba ›
 ■
1

position

gphilip · 2010. Jan. 4. (H), 17.59
Hali!

Én most egy position: relative-ra gondolok az elmenü div-jében, de nem vagyok ebben biztos, mert nem látom,, hogy pontosan mit és hogy szeretnél. :)
2

nekifutok újra :)

Pal_ur · 2010. Jan. 4. (H), 18.16
Szóval,

van egy menüm. UL-ben elhelyezett LI-k, akiknek nem tudok width-ot adni. Emellett hogy normálisan nézzen ki, meg úgy, ahogy a designer megrajzolta, padding-gel oldom meg.

A főmenüelemekhez tartozó almenüket egy alapból
  1. display: none;  

div-ben helyezem el, amelynek a megjelenését a
  1. li a:hover {  
  2. display: block;  
  3. }  
biztosítja. A normális megjelenéshez persze mindegyik elem még rengeteg plusz formázással rendelkezik.

A baj az, hogy jelen állapotban a megjelenő almenü a főmenü elemeknél szélesebb is lehet, viszont ilyenkor a főmenü elemei "ugrálnak", vagyis amikor az almenü megjelenik, akkor szélesebbek lesznek, mint amikor nem jelenik meg. Ezt szeretném úgy kiküszöbölni, hogy az almenü div-je lehessen szélesebb, mint a főmenü (nem ismert szélességű) li-je.

Talán így érthetőbb.
3

Float

gphilip · 2010. Jan. 4. (H), 18.57
Hali, még midnign nem látom magam lőtt ezt a menüt, de ha azt szeretnéd, hogy a gyerek elem mérete ne befolyásolja a szülőét, akkor a gyerek elemre float-ot kell alkalmatnod, míg a szülő elemre ezt nem teheted.
4

rövid html

Pal_ur · 2010. Jan. 4. (H), 19.21
Rövidített példát csináltam:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2.   
  3. <html>  
  4. <head>  
  5.     <style>  
  6.     #kulso {  
  7.         margin: 0 auto;   
  8.         width: 700px;  
  9.     }  
  10.   
  11.     #belso {  
  12.         border: 1px solid #000000;  
  13.     }  
  14.   
  15.     ul {  
  16.         height: 60px;  
  17.     }  
  18.   
  19.     li {  
  20.         float: left;  
  21.         border: 1px solid #FF6633;   
  22.     }  
  23.   
  24.     li #almenu {  
  25.         display: none;  
  26.     }  
  27.   
  28.     li a {  
  29.         padding: 15px 25px 20px 20px;  
  30.         line-height: 50px;   
  31.     }  
  32.   
  33.     li:hover #almenu {  
  34.         display: block;  
  35.         border: 1px solid #000000;   
  36.         width: 280px;  
  37.     }  
  38.   
  39.     li ul {  
  40.         height: auto;  
  41.     }  
  42.   
  43.     li ul li {  
  44.         border: none;  
  45.     }  
  46.   
  47.     </style>  
  48. </head>  
  49.   
  50. <body>  
  51.     <div id="kulso">  
  52.         <div id="belso">    
  53.             <ul>  
  54.                 <li><a>szöveg</a>  
  55.                     <div id="almenu">  
  56.                         <ul>  
  57.                             <li>szöveg 2 szöveg 2 szöveg 2 szöveg 2 szöveg 2</li>  
  58.                         </ul>  
  59.                     </div>  
  60.                 </li>  
  61.                 <li><a>másik szöveg</a>  
  62.                 </li>  
  63.             </ul>  
  64.         </div>  
  65.     </div>  
  66. </body>  
  67. </html>  
És már "csak" annyi lenne a feladat, hogy amikor az li fölé megy az egér, akkor az egész li körüli piros box ne ugorsjon szélesre attól, hogy megjelenik az almenü.
5

absolute

gphilip · 2010. Jan. 4. (H), 22.43
  1. li #almenu {    
  2.     display: none;  
  3.     border: 1px solid #000000;     
  4.     width: 280px;  
  5.     position: absolute;  
  6. }    
  7.    
  8. li a {    
  9.     padding: 15px 25px 20px 20px;    
  10.     line-height: 50px;     
  11. }    
  12.    
  13. li:hover #almenu {    
  14.     display: block;  
  15. }    
position: absolute, illetve átírtam a kódot az eredeti osztályhoz.
Az li:hover nem minden böngészőben fog menni szerintem, pl a régebbi explorerek csak az A tag hoverjét támogatják, így lehet, h azt kívülre kell tenni.
6

és valóban

Pal_ur · 2010. Jan. 4. (H), 23.07
Örök hálám. A
  1. position: absolute;  
mentett meg.

Nagyon köszönöm!