ik heb een spry-menubalk gemaakt. Best naar tevredenheid. Echter, ik heb 3 dingen waar ik niet zo uitkom. Mag ik jullie hulp?
Bij: over onze zwemlessen, wordt het 2e uitklapmenu net zo groot als het hoofdmenu. Met als gevolg dat je de rest niet meer ziet (tarieven, contact etc). What to do?- het 3e uitklapmenu bij die zwemlessen (A1, A2 etc): ik wil dat vak kleiner (=passend) hebben. Hoe doe ik dat.- hoe verander ik de kleur van de hele spry-menu? (I did, maar krijg t niet weer voor elkaar. zonnesteek???)
Dit is de codering: (andere tips en trucs hoor ik ook meer dan graag, natuurlijk!!!)
thanks
Iris
@charset "UTF-8";/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 *//* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. *//******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************//* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{/* [disabled]margin: 0; */padding: 0;list-style-type: none;font-size: 100%;cursor: default;width: 75%;border-top: 1px solid #666;margin-bottom: 15px;color: #33C;}/* 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 a fixed width */ul.MenuBarHorizontal li{margin: 0;padding: 0;list-style-type: none;font-size: 100%;position: relative;text-align: left;cursor: pointer;width: 15em;float: left;border-bottom: 1px solid #666;background-color: #4E5869;}/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul{margin: 0;padding: 0;list-style-type: none;font-size: 100%;z-index: 1020;cursor: default;width: 8.2em;position: absolute;left: -1000em;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{left: auto;color: #00C;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{width: 10em;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{position: absolute;margin: -5% 0 0 95%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{left: auto;top: 0;}/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************//* Submenu containers have borders on all sides */ul.MenuBarHorizontal ul{border: 1px solid #CCC;}/* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{display: block;cursor: pointer;background-color: #09F;padding: 0.5em 0.75em;color: #FFF;text-decoration: none;font-style: normal;}/* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{background-color: #06F;color: #FFF;}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{background-color: #33C;color: #FFF;}/******************************************************************************* 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.MenuBarHorizontal a.MenuBarItemSubmenu{background-image: url(SpryMenuBarDown.gif);background-repeat: no-repeat;background-position: 95% 50%;}/* 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.MenuBarHorizontal ul 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.MenuBarHorizontal a.MenuBarItemSubmenuHover{background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{background-image: url(SpryMenuBarRightHover.gif);background-repeat: no-repeat;background-position: 95% 50%;}ul.MenuBarHorizontal iframe{position: absolute;z-index: 1010;filter:alpha(opacity:0.1);}/* 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.MenuBarHorizontal li.MenuBarItemIE{display: inline;f\loat: left;background: #FFF;}}
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{/* [disabled]margin: 0; */padding: 0;list-style-type: none;font-size: 100%;cursor: default;width: 75%;border-top: 1px solid #666;margin-bottom: 15px;color: #33C;}/* 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 a fixed width */ul.MenuBarHorizontal li{margin: 0;padding: 0;list-style-type: none;font-size: 100%;position: relative;text-align: left;cursor: pointer;width: 15em;float: left;border-bottom: 1px solid #666;background-color: #4E5869;}/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul{margin: 0;padding: 0;list-style-type: none;font-size: 100%;z-index: 1020;cursor: default;width: 8.2em;position: absolute;left: -1000em;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{left: auto;color: #00C;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{width: 10em;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{position: absolute;margin: -5% 0 0 95%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{left: auto;top: 0;}
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */ul.MenuBarHorizontal ul{border: 1px solid #CCC;}/* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{display: block;cursor: pointer;background-color: #09F;padding: 0.5em 0.75em;color: #FFF;text-decoration: none;font-style: normal;}/* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{background-color: #06F;color: #FFF;}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{background-color: #33C;color: #FFF;}
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.MenuBarHorizontal a.MenuBarItemSubmenu{background-image: url(SpryMenuBarDown.gif);background-repeat: no-repeat;background-position: 95% 50%;}/* 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.MenuBarHorizontal ul 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.MenuBarHorizontal a.MenuBarItemSubmenuHover{background-image: url(SpryMenuBarDownHover.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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{background-image: url(SpryMenuBarRightHover.gif);background-repeat: no-repeat;background-position: 95% 50%;}
ul.MenuBarHorizontal iframe{position: absolute;z-index: 1010;filter:alpha(opacity:0.1);}/* 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.MenuBarHorizontal li.MenuBarItemIE{display: inline;f\loat: left;background: #FFF;}}
helemaal niemand die me kan helpen?? Please please!!
En nog een bijkomende vraag: ik plaats de totale website in public, en dat ziet er prima uit, maar de spry neemt ie niet mee. Krijg nu bullets te zien.
Heeft iemand een tip voor me?
grt
Ik maakte zelf een site met een verticale spry-menubalk. Heb ik er helemaal uitgegooid, omdat die raar bleef doen. Ongeveer zo raar als jij aangeeft.
Een horizontale balk (zoals jij kennelijk, al is het goed als we je site zouden kunnen zien) moet wel werken. Als je toch dingen gaat wijzigen, zoals kleur, bestudeer dan heeel goed de css-code die daarbij hoort. En bereid je erop voor dat je dat tot twee of drie niveaus diep moet doen. En na iedere wijziging: checken! Zo kun je zien wáár het fout loopt.
Waarschijnlijk is het 't beste om je balk nu eerst helemaal opnieuw te maken. Gooi dan via de propertybox alles eruit wat je niet nodig hebt (dus overbodige niveaus). Tja, en dan eerst studeren, en stapje voor stapje aanpassen.
Heb je de Adobe hulpsite al ingeroepen?
ik heb wat voorbeelden voor je gemaakt:zie:http://www.volta.nl/spryvoorbeeld/submenukleur.html(in menu's verschillende kleuren, vertikaal)
en:http://www.volta.nl/spryvoorbeeld/spry_menubalk/spry/sprymenu_algemeen.html(verschillende kleuren, horizontaal, en met 'vaste klik' bovenin)
Ik zou zeggen, kopieer de bestanden en kijk goed naar de css.Succes!
het gaat steeds beter met de balkjes. Lekker leren!! (in DW CS5)
Maar, nu weer een niet al te slimme vraag waarschijnlijk: Peter, hoe krijg ik je bestanden goed gekopieerd? Ik krijg de bronversie wel, maar de CSS niet.
hoor graag je tip.
Als je CS5 gebruikt dan kan je heel makkelijk met denavigatiebalk (zie Werkbalken) naar een website browsenen daar de bestanden van bekijken, openen en bewaren.Natuurlijk kan je andermans bestanden niet online wijzigenmaar je kan er zo wel heel makkelijk veel van leren !
Dick Dale gaf mij een aantal voorbeelden om te kopieren. Lukt me alleen niet (CSS).
grtn
Maar als je zelf een Spry-menubalk aanmaakt in een pagina, krijg je ze ook vanzelf cadeau, zodra je de pagina bewaart. Dus geef even duidelijk antwoord op de vraag of je zo'n Site-definitie hebt gedaan, want dat is niet alleen een vereiste voor de Spry-hulpbestanden, maar verklaart ook waarom je zo nodig die bestanden wil hebben (copiëren) van anderen. Waarschijnlijk mis je die steeds omdat ze god-weet-waar op je HD zwerven...