Noch nicht viel geschrieben
Juten Tach,
og Thema macht mir einiges Kopfzerbrechen obwohl in den Kommentaren ja eigentlich alles drin steht.
Ich habe in einem vertikalen Spry Menu bei den Untermenüs selbstgebaute transparente Kästen mit abgerundeten Ecken. Soweit so gut. Wo mache ich nun folgendes:
- Untermenü-Kasten inklusive Einträge nach unten zu verschieben
- vertikale Abstände der Wörter nur im Untermenü verändern
- Abstand NUR des obersten Eintrags vom Kastenrand verändern
?
Die Kommentare sind natürlich inzwischen falsch, am liebsten wäre mir ja wenn ein edler Spender diese durch sinnvolle ersetzen würde...
".unten" ist mein Ansatz die untere Kante des Kastens richtig anzulegen.
Die Z- Indexe sind überflüssig und müssen hier nicht beachtet werden, das war ein fehlgeleiteter Versuch den IE in den Griff zu bekommen...
Ich denke dass es mir am grundsätzlichen Verständnis der Hierarchien bei css mangelt, würde die Nuss gerne gleich anhand meiner Versuchsseite knacken.
Wer Lust hat ist eingeladen
og Thema macht mir einiges Kopfzerbrechen obwohl in den Kommentaren ja eigentlich alles drin steht.
Ich habe in einem vertikalen Spry Menu bei den Untermenüs selbstgebaute transparente Kästen mit abgerundeten Ecken. Soweit so gut. Wo mache ich nun folgendes:
- Untermenü-Kasten inklusive Einträge nach unten zu verschieben
- vertikale Abstände der Wörter nur im Untermenü verändern
- Abstand NUR des obersten Eintrags vom Kastenrand verändern
?
Code:
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
list-style-type: none;
font-size: 18px;
cursor: default;
width: 100px;
font-family: "Comic Sans MS", cursive;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-style: italic;
}
/* 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
{
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 100px;
z-index: 2;
}
/* 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
{
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 100px;
width: 220px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 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;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 100px;
z-index: 5;
}
/* untermenu groeße und abstände */
ul.MenuBarVertical ul li
{
width: 220px;
font-size: 14px;
font-family: "Comic Sans MS", cursive;
margin-top: -36px;
margin-right: 0px;
margin-left: -2px;
margin-bottom: 0px;
top: 18px;
padding-top: 15px;
padding-right: 0px;
padding-bottom:0px;
padding-left: 0px;
font-style: italic;
z-index: 5;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* menu container */
ul.MenuBarVertical
{
z-index: 5;
}
/* untermenu kasten */
ul.MenuBarVertical ul
{
background-image: url(../images/oben2.png);
background-repeat: no-repeat;
background-position: left top;
margin-right: 0px;
margin-bottom: 0px;
margin-left:0px;
margin-top: 0px;
background-attachment: scroll;
z-index: 5;
}
/* abstaende hauptmenu */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
color: #FFF;
text-decoration: none;
top: 10px;
padding-top: 2px;
margin-top: 8px;
margin-right: 0px;
margin-left: 0px;
padding-left: 10px;
bottom: 1011px;
padding-bottom: 10px;
z-index: 5;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
color: #FFF;
z-index: 6;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
color: #00F;
z-index: 7;
.unten {
background-image: url(../images/unten.png);
background-repeat: no-repeat;
background-position: left bottom;
}
/*******************************************************************************
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-repeat: no-repeat;
background-position: left top;
z-index: 8;
}
/* 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(../images/button1.png);
background-repeat: no-repeat;
background-position: left top;
z-index: 9;
}
".unten" ist mein Ansatz die untere Kante des Kastens richtig anzulegen.
Die Z- Indexe sind überflüssig und müssen hier nicht beachtet werden, das war ein fehlgeleiteter Versuch den IE in den Griff zu bekommen...
Ich denke dass es mir am grundsätzlichen Verständnis der Hierarchien bei css mangelt, würde die Nuss gerne gleich anhand meiner Versuchsseite knacken.
Wer Lust hat ist eingeladen