Autor | Zpráva | ||
---|---|---|---|
Salab Profil |
V Opeře a Firefoxu se menu zobrazí v pořádku, ale u IE to je tak, že druhý sloupec překryje polovinu prvního sloupce a touto cestou bych Vás chtěl požádat o radu, jaký kód změnit/přidat.... Podle mne je to tím IE hackem, ale v kódu ho mám pro IE 5.0 ... Je možné, že problém bude v něčem jiném, každopádně je to dělané přes SpryMenuBarVertical v Dreamweaver CS3 . Děkuji za každý tip
Ukázka http://show.studio14.cz/salab/menu Kód pro .html <ul id="MenuBar1" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#">Sortiment</a> <ul> <li><a href="#" class="MenuBarItemSubmenu">Děrované plechy</a> <ul> <li><a href="#">Typy děrování</a></li> <li><a href="#">materiál</a></li> <li><a href="#">základní výrobní možnosti</a></li> <li><a href="#">skladové pozice</a></li> </ul> </li> <li><a href="#">Rošty</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">Aktuálně</a> <ul> <li><a href="#">Nabídka skladových zásob</a></li> <li><a href="#">Novinky</a></li> <li><a href="#">Reference</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">Formuláře</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Všeobecné obchodní podmínky</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Dotaz</a></li> <li><a href="#">Poptávka</a></li> <li><a href="#">Doprava</a></li> <li><a href="#">Objednávka</a></li> </ul> </li> <li><a href="#">Kontakt</a></li> </ul> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> CSS : @charset "UTF-8"; /* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /********************************************************************* ********** LAYOUT INFORMATION: describes box model, positioning, z-order ********************************************************************** *********/ /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 12px; cursor: default; width: 8em; font-family: Tahoma; color: #00FF00; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are same fixed width as parent */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 12px; position: relative; text-align: left; cursor: pointer; width: 153px; font-family: Tahoma; font-weight: normal; color: #FFFFFF; height: 30px; background-image: url(../bg.jpg); margin-bottom: 1px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { margin: 0% 0 0 102%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 210px; margin-bottom: 1px; } /********************************************************************* ********** DESIGN INFORMATION: describes color scheme, borders, fonts ********************************************************************** *********/ /* Outermost menu container has borders on all sides */ ul.MenuBarVertical { } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { background-image: url(../bg2.jpg); display: block; cursor: pointer; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } /* změna při najetí */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-image: url(../bg2.jpg); } /* stylování položky menu bez podsekcí */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { color: #FFF; background-image: url(../bg.jpg); } /********************************************************************* ********** SUBMENU INDICATION: styles if there is a submenu under a given menu item ********************************************************************** *********/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /********************************************************************* ********** BROWSER HACKS: the hacks below should not be changed unless you are an expert ********************************************************************** *********/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarVertical iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; background-image: url(../bg2.jpg); } } ul.MenuBarVertical ul.MenuBarItemIE { margin: 0% 0 0 102%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } |
||
Měsíček Profil |
#2 · Zasláno: 11. 3. 2008, 17:21:30
Proč tady házíš tuny kódu? My si to dokážeme z dokumentu vyndat neboj.
|
||
Salab Profil |
#3 · Zasláno: 12. 3. 2008, 17:06:10
Já vim .... poradíte mi prosím někdo ?
|
||
Plaváček Profil |
#4 · Zasláno: 12. 3. 2008, 19:09:11
Salab
V které verzi IE toto menu dělá problém? V IE 6 je všechno v pořádku. |
||
Salab Profil |
#5 · Zasláno: 12. 3. 2008, 20:08:32
V IE 7 .
|
||
Časová prodleva: 3 dny
|
|||
Salab Profil |
#6 · Zasláno: 15. 3. 2008, 16:47:23
Poradí mi prosím někdo ?
|
||
Davex Profil |
#7 · Zasláno: 16. 3. 2008, 23:21:03
Obalovací elementy jsou nadefinovány užší než vložené, které potom přetékají. Stačí sjednotit jejich šířky.
ul.MenuBarVertical, ul.MenuBarVertical li { width: 153px; } ul.MenuBarVertical ul, ul.MenuBarVertical ul li { width: 210px; } |
||
Časová prodleva: 16 let
|
0