DW "Positionierung von horizontaler Spry Menüleiste" @ tutorials.de: Tutorials, Forum & Hilfe

flashmaus · 14.06.09 16:31

hallo
hab in ein "nav div" eine horizontale Spry Menüleiste eingebaut
einzige Veränderung:
“ul.MenuBarHorizontal li” : Float Right anstatt Left.
wie kann ich in diesem "nativen" Menü die Breite der Menüeinträge ändern ?
es handelt sich um 4 Menüpunkte.
danke

Maik · 14.06.09 16:38

Hi,

Zitat von flashmaus

wie kann ich in diesem "nativen" Menü die Breite der Menüeinträge ändern ?

das kann im Handbuch nachgelesen werden: Größe der Menüelemente ändern.

mfg Maik

flashmaus · 14.06.09 17:14

danke für die schnelle Antwort
hab das jetzt gemach, hat funktioniert bis auf eines:
das menu-item hat 6 em
das submenu-item hat 6,2 em
wenn man jetzt die submenus "überfährt" dann ist die hintergrundfarbe genauso breit wie die Hintergrundfarbe der Hauptmenu-items und sie müsste eigentlich etwas breiter sein (6.2 em)

Maik · 14.06.09 17:29

Aus der Beschreibung ist die Ursache nicht ersichtlich.

Steht die Seite irgendwo online zur Verfügung, um dort einen Blick drauf werfen zu können?

mfg Maik

flashmaus · 14.06.09 17:41

tut mir leid, leider nicht
hier der code der css

Code :

@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
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 90%;
    cursor: default;
    width: auto;
}
/* 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: 6em;
    float: right;
}
/* 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: 6.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;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    float: none;
}
/* 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: #FCF6E8;
    color: #333;
    text-decoration: none;
    text-align: left;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #F30;
}
/* 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: #F60;
    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: #F90;
    color: #FFF;
}
 
/*******************************************************************************
 
 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.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;
    }
}

Maik · 14.06.09 17:51

Erweiter mal das Stylesheet mit dieser Regel:

Code css:

1	ul.MenuBarHorizontal ul a { width:4.65em; }

mfg Maik

flashmaus · 14.06.09 18:06

vielen dank, hab das unter
ul.MenuBarHorizontal ul { width:4.65em; }
eingetragen
das meintest Du doch ?
nur, dann sind alle "hover" gleich gross
ich möchte aber dass die Untermenüs schon 6.2 em besitzen und dass das "Drüberfahren" auch diese 6.2 em bringt

Maik · 14.06.09 18:10

Die Regel soll für die Links der zweiten Menüebene (Submenüs) gelten - bei dir fehlt aber im Selektor am Ende das a-Element.

mfg Maik

flashmaus · 14.06.09 18:18

also, ich glaub' ich setz das nochmal auf und meld' mich dann wieder
ich verliere sonst den Überblick

Maik · 14.06.09 18:20

Das ist doch jetzt kein Hexenwerk:

Code :

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
        display: block;
        cursor: pointer;
        background-color: #FCF6E8;
        color: #333;
        text-decoration: none;
        text-align: left;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
        border-left-width: thin;
        border-left-style: solid;
        border-left-color: #F30;
}
 
[b]ul.MenuBarHorizontal ul a { width:4.65em; }[/b]

mfg Maik

flashmaus · 14.06.09 18:27

vielen dank
(für mich schon, ich bin Anfänger)
zum Verständnis: wie kommst Du auf diesen Wert von 4.65 em ?
hab das mal mit 6 em probiert und geht auch - warum gerade 4.65

Maik · 14.06.09 18:32

Ich hab hier lediglich das CSS-Boxmodell angewendet

Code :

1	6.2em - 2*.75em (padding-left /-right) - .05em (border-left) = [u]4.65em[/u]

mfg Maik

flashmaus · 14.06.09 21:56

vielen dank Maik
ich hab noch ein wenig "rumgespielt"
- und es funktioniert ALLES
eine letzte Frage dazu
das Menu liegt in einem div: nav
ul.MenuBarHorizontal li: float: right;
jetzt würde ich gerne das gesamte Menü um 20 Pixel nach links verschieben
Hab dazu gelesen dass man hierfür das übergeordnete div verschieben sollte
das will ich aber nicht, weil in diesem div ein Hintergrundbild liegt welches nicht verschoben werden soll.

Maik · 14.06.09 22:00

Brauchst das umschliessende DIV auch nicht zu verschieben

Code css:

ul.MenuBarHorizontal
{
        margin: 0 20px 0 0; /* Außenabstand oben - rechts - unten - links */
        padding: 0;
        list-style-type: none;
        font-size: 90%;
        cursor: default;
        width: auto;
}

mfg Maik

flashmaus · 14.06.09 22:20

tausend Dank nochmal
ich hatte das auch, nur bei "Anwenden" hatte er dies nicht gleich gezeigt und so dachte dass es wohl nicht richtig sei.
Man kann sich wohl darauf nicht verlassen
Gruss

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

ich weiß nicht wie ich es nennensoll "animation" spry?

[DW3] "spry Menue Bar" nach oben öffnen

Spry-Menüleiste

Nicht gleiche "absolute" Positionierung von Layern bei I.E. und Netscape

E-Mail:

Abonnieren Abbestellen