Schatten hinter einem Rollover-Menu @ tutorials.de: Tutorials, Forum & Hilfe

Thalin · 04.10.07 14:00

Hallo,

Ich soll hinter einem Dropdown Menu einen Schatten zaubern, bin aber noch etwas neu auf dem Gebiet.
Leider hab Ich nichts gefunden, wie Ich das anstellen könnte.
Hab zwar was mit Filtern gefunden, aber die funktionieren ja nur beim IE, jedoch nicht beim FF. N Problem für mich ist auch, das der schatten komplett an allen Seiten sein soll und so halb transparent.
Ich hab im Anhang mal 2 Bilder. Zum einen, wie es aussehen soll und zum anderen, wie es im Moment aussieht. Leider kann Ich die Seite noch nicht Online stellen, aber Ich habe mal den Code hinzugefügt.
Für Hilfe wäre Ich dankbar

CSS-Datei

Code :

body 
{   
    background-color:#1F3F84;
    text-align:center;
    font-family:Arial;
}
 
/*
=================================
Skin sytles for TABLE-tags
=================================
*/
.tableup
{
    color:#FFFFFF;
    background-color:inherit;
    margin:60px 82px auto 76px;
    font-size:12px;
    
}
 
.maintable
{
    color:inherit;
    background-color:#FFFFFF; 
    margin-left:82px; 
    margin-right:82px;
    width:943px;    
    font-family: Arial;
    font-size:12px;
    
}
 
.middletable
{
    background-color:#E0F1FB;
    color:inherit;   
    font-size:12px;
    
}
 
.navtdleft
{
    color:inherit;
    background-color:inherit;
    text-align: left;
    width: 481px;
    height: 17px;
    font-family: 'Verdana', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
    font-size:12px;
    
}
 
.navtdright
{
    color:inherit;
    background-color:inherit;
    text-align: right;
    width: 481px;
    height: 17px;
    font-family: 'Verdana', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
    font-size:12px; 
    
}
 
/*Menu Design--------------------------------------------------------------------------*/
 
/**
  * Menü-Container:
  *  
  *****************************************************************************/
ul.menu {
    margin: 0;                 
    padding: 0;     
    font-size: 12px;                     
    list-style-type: none;
    font-weight:bold;
    
}
 
 
ul#menuleft {
    width: 420px;      
    float: left;
    
}
 
 
ul#menuright {
    width: 560px;             
    float: right;
    
}
 
 
/**
  * Menüeinträge in der Menüleiste:
  *  
  *****************************************************************************/
ul.menu li {
    margin: 0;               
    display: inline; 
            
}
 
 
ul#menuleft > li {
    float: left; 
    
}
 
ul#menuright > li {
    float: right;
 
}
 
 
ul.menu > li > a {
    color : #FFF;
    background-color:inherit;
    border-bottom:none;
    border-right:solid 1px #fff;
    
}
 
 
/**
  * Alle Untermenüs:
  *  
  *****************************************************************************/
 
ul.menu ul {
    margin: 0;                
    padding: .2em;           
    position: absolute;        
    list-style-type: none;     
    background-color:#a4c6eb;  
    display: none; 
    float:left;
    width:130px;    
    /* -moz-opacity:0.90; */ 
        
}
 
 
/**
  * Alle Menüeinträge der Untermenüs:
  *  
  *****************************************************************************/
ul.menu ul li {
    margin: 0;
    display:block;         
}
 
 
/**
  * Alle Links im Menü-Container:
  *  
  *****************************************************************************/
ul.menu a {
    padding: .5em;             
    text-decoration: none;
    color: #4b6da7; 
    cursor: default;              
    font-size: 11px;            
    text-align: left;           
    border-bottom: solid 1px #4b6da7;
    display: block; 
    margin:4px 4px 4px 4px;
    text-indent:-.5em;
    line-height:.3em;   
    
}
 
 
/**
  * Alle Links in Untermenüs beim Überfahren mit der Maus:
  *  
  *****************************************************************************/
ul.menu a:hover {                                 
    padding: .5em;            
    color: #fff;
    background-color:#1F3F84;
    display: block;
    cursor:pointer;     
}
 
 
/**
  * Alle ungeordnete Listen in Untermenüs beim Überfahren der Menüeinträge in
  * der Menüleiste mit der Maus:
  *  
  *****************************************************************************/
ul.menu li:hover> ul{
    display: block;
    
}
 
ul.menu li:hover > ul li ul 
{
    margin-top:-23px; 
    left: 70px;
    text-align:left;    
}

HTML-Datei

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Hover_menu</title>
     <link rel="stylesheet" type="text/css" href="Hover_menu.css" />
     
    <link rel="stylesheet" type="text/css" href="ie.css" />
     
</head>
<body>
<table align="center">
    <tr>
        <td>
         <table class="tableup">
                <tr>
                    <td>                                                            
                      <ul class="menu" id="menuleft" >
                        <li><a title="Startseite">Home</a>
                            <ul>
                                <li><a title="PT-Nova">PT-Nova</a></li>
                                <li><a title="Download">Download</a></li>
                                <li><a title="Profil">Profil</a></li>
                            </ul>
                        </li>
                        <li><a title="Unternehmen">Unternehmen</a>
                            <ul>
                                <li><a title="Motto">Motto</a></li>
                                <li><a title="Philosophie">Philosophie</a></li>
                                <li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
                                <li><a title="Profil">Profil</a></li>
                                <li><a title="Referenzen">Referenzen</a></li>
                                <li><a title="Partner">Partner</a></li>
                            </ul>
                        </li>
                        <li><a title="News">News</a></li>
                        <li><a title="Termine">Termine</a></li>
                        <li><a title="Jobs">Jobs</a></li>
                        <li><a title="Presse">Presse</a></li>                       
                      </ul>                  
                      </td>
                      <td>
                      <ul class="menu" id="menuright">
                        <li><a title="Kundenlogin">Kundenlogin</a></li>
                        <li><a title="Kontakt">Kontakt</a>
                         <ul>
                                <li><a title="Motto">Motto</a></li>
                                <li><a title="Philosophie">Philosophie</a></li>
                                <li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
                                <li><a title="Profil">Profil</a></li>
                                <li><a title="Referenzen">Referenzen</a></li>
                                <li><a title="Partner">Partner</a></li>
                            </ul>
                        </li>
                        <li><a title="Sitemap">Sitemap</a></li>
                        <li><a title="Impressum">Impressum</a>
                         <ul>
                                <li><a title="Motto">Motto</a></li>
                                <li><a title="Philosophie">Philosophie</a></li>
                                <li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
                                <li><a title="Profil">Profil</a></li>
                                <li><a title="Referenzen">Referenzen</a></li>
                                <li><a title="Partner">Partner</a></li>
                            </ul>
                        </li>
                        <li><a title="Download">Download</a></li>                      
                      </ul>                                           
                    </td>                   
                 </tr>
            </table>
            <table class="maintable">
                <tr>
                    <td width="10"></td>
                    <td width="943"></td>
                    <td width="10"></td>
                </tr>
                <tr>
                    <td height="82"></td>
                    <td valign="middle" align="center"><img src="logo.jpg" width="963" height="82" alt="HanseCom GmbH"/></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td height="500"></td>
                    <td class="middletable" align="center">Content</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

HuRaHoRRe · 04.10.07 16:29

Du könntest es mit einem oder mehreren halbtransparenten PNG(s) realisieren.

Die Dropdowns sind warscheinlich unterschiedlich hoch, hoffentlich nicht unterschiedlich breit...(obwohl es auch so möglich wäre)

Du machst dir z.B ein bild mit einem verlauf(schattenartig, z.b 200px * 1px), legst das mit repeat-y als hintergrund fest.
Darüber legst du dann die Links mit anderen Hintergrundfarben(z.b weniger breites div).
dann musst du dem grösseren layer einen Abschluss in form eines weiteren pngs geben.

Da ich jetzt nicht viel Zeit habe, konnte ich den Code leider nicht gross anschauen.

geht vielleicht auch mit einem 1px*1px PNG mit repeat-y und repeat-x (hoffe beide repeats in kombination funktionieren)

Thalin · 05.10.07 11:00

Hi,

also die Dropdowns sind unterschiedlich hoch, das is richtig.
Sie haben allerdings eine fixe Breite.

Ich hab mir schon so ne halbtransparente png Grafik angefertigt.
Wenn ich die allerdings in den <ul> tag einbinde und dem gleichzietig noch die Hintergrundfarbe gebe,

background: #a4c6eb url('schatten.png') repeat-y top right;

liegt die grafik am rechten Rand direkt über der Hintergrundfarbe, was mir wenig bringt.
Wenn ich aber die Hintergrundfarbe den <li> tags zuweise, ist immer nur bei den einzelnen Listenpunkten die Hintergrundfarbe und dazwischen ist dann nichts. Also auch nicht so wie es sein soll...
Mit repeat-x und repeat-y gleichzeitig funktioniert es nicht, jedenfalls habe Ich es nicht hinbekommen.

MfG

Maik · 05.10.07 11:05

Hi,

Zitat von Thalin

Mit repeat-x und repeat-y gleichzeitig funktioniert es nicht, jedenfalls habe Ich es nicht hinbekommen.

wenn ein Hintergrundbild in der X- und Y-Achse wiederholt werden soll, lautet die Wertangabe repeat.

Dies entspricht aber der Voreinstellung in den Browsern zur Bildwiederholung, und somit ist diese Eigenschaftsdeklaration nicht erforderlich.

Thalin · 05.10.07 11:28

Zitat von Maik

Hi,

wenn ein Hintergrundbild in der X- und Y-Achse wiederholt werden soll, lautet die Wertangabe repeat.

Danke, so funktionierts

Allerdings wird das PNG komplett über der Hintergrundfarbe angezeigt. Es sollte aber eigentlich dahinter sein und natürlich ein bisschen größer...
Wie gesagt, wenn Ich den <li> tags die Hintergrundfarbe zuweise, wird nur ein geringer Teil des Dropdowns ausgefüllt...

Maik · 05.10.07 11:33

Versuch es mal auf diese Weise:

Code :

ul.menu ul {
        margin: 0;
        padding: .2em;
        position: absolute;
        list-style-type: none;
        [b]background:url(schatten.png);[/b]
        display: none;
        float:left;
        width:130px;
}
 
ul.menu a {
        padding: .5em;
        text-decoration: none;
        color: #4b6da7;
        cursor: default;
        font-size: 11px;
        text-align: left;
        border-bottom: solid 1px #4b6da7;
        display: block;
        [b]margin:0px 4px 0px 4px;[/b]
        text-indent:-.5em;
        line-height:.3em;
        [b]background:#a4c6eb;[/b]
}

Thalin · 05.10.07 11:42

Ich bin begeistert! Es funktioniert

Allerdings stehen die einzelnen Links jetzt ein wenig dicht beisammen...
Gibt es da irgendeine Möglichkeit das zu ändern, ausser mi margin? Weil dann isses ja so wie vorher...

HuRaHoRRe · 05.10.07 11:52

Mhh weis zwar nicht wie das dann aussieht... aber mit nem border top und bottom mit der selben Farbe wie der Hintergrund funktionierts vielleicht :/

Du hast jetzt die 1*1px Variante genommen oder?

Maik · 05.10.07 11:59

Zitat von Thalin

Allerdings stehen die einzelnen Links jetzt ein wenig dicht beisammen...
Gibt es da irgendeine Möglichkeit das zu ändern, ausser mi margin? Weil dann isses ja so wie vorher...

Erhöh doch einfach den vertikalen padding-Wert für die Links:

Code :

ul.menu a {
        [b]padding: .8em .5em .8em .5em;[/b]
        text-decoration: none;
        color: #4b6da7;
        cursor: default;
        font-size: 11px;
        text-align: left;
        border-bottom: solid 1px #4b6da7;
        display: block;
        margin:0px 4px 0px 4px;
        text-indent:-.5em;
        line-height:.3em;
        background:#a4c6eb;
}
 
ul.menu a:hover {
        [b]padding: .8em .5em .8em .5em;[/b]
        color: #fff;
        background-color:#1F3F84;
        display: block;
        cursor:pointer;
}

Thalin · 05.10.07 12:14

Zitat von HuRaHoRRe

Du hast jetzt die 1*1px Variante genommen oder?

Ja hab Ich

Zitat von Maik

Erhöh doch einfach den vertikalen padding-Wert für die Links:

Das geht wunderbar

danke
Hätte nicht gedacht, das das ganze so fix zu lösen ist. Naja, ich muss mich in die ganze Materie erstmal richtig reindenken.

Wo wir gerade dabei sind

Ich weiß nicht, ob es oben auf den Bildern zu erkennen ist, aber bei den Links in der Überschrift ist rechts ein weißer border. Auf der Vorlage ist es allerdings vorgesehen, das
hinter dem letzten Link kein weißer Strich mehr ist. Gibt es eine Möglichkeit das für das letzte Element extra zu regeln?
Ich weiß, das Ich dem <li> tag ne extra ID geben könnte. Allerdings wird das Menu zur Laufzeit erst erstellt, da Ich mit einem cms arbeite. Ich kann also nicht direkt auf einzelne li elemnte eingehen...
Das gleiche "Problem" wäre bei bei den Links des Dropdown. Da sieht die Vorlage vor, das über dem ersten Link auch noch ein Strich ist...

MfG

HuRaHoRRe · 05.10.07 12:27

Wieso du nicht auf einzelne listen eingehen kannst verstehe ich nicht ganz... kommen die Dropdown Einträge aus einer Datenbank oder wieso?

Bei dem Dropdown wäre es vielleicht möglich dem <ul> einen border top zuzuweisen, allerdings ist der in deinem Fall warscheinlich dann zu breit.

Thalin · 05.10.07 12:33

Das Menu ist eigentlich ein Modul und wird erst zur Laufzeit erstellt.
Je nach dem, ob ich beim cms dann einträge hinzufüge oder entferne, werden diese auch aus der Liste hinzugefügt oder entfernt. Den HTML-Code, den Ich oben habe ist nur der Skin und die Liste steht normalerweise nicht in der Datei. Ich hab sie mir nur aus dem Seitenquelltext gezogen, damit Ich den Skin lokal anpassen kann und nicht jedes mal den Skin in mein cms zu laden um zu sehen wie es aussieht.

Das mit dem Border-top geht nicht, da der Strich dann über dem oberen Schatten liegt. :/

Maik · 05.10.07 12:34

Du wirst nicht darum herum kommen, für das äußere / obere Element eine gesonderte Klasse einzusetzen, um so den rechten Rahmen zu deaktivieren bzw. den oberen Rahmen hinzufügen.

Ansonsten stell in der horizontalen Navigation den rechten Rahmen generell auf links um, und deaktiviere ihn für das erste Element, denn das wird wohl existieren bzw. bekannt sein.

Wenn der obere Rahmen im Bereich des Schattens liegt, kannst du doch den oberen Innenabstand des ul-Elements erhöhen, damit die Links ein Stück nach unten wandern.

Thalin · 05.10.07 13:18

nein, das erste element ist auch nicht bekannt.
das Menu an sich ist in eienr c#-datei hinterlegt.
Dort wird es dann mittels einer for-schleife generiert. Ich könnte dort dem <li> tag eine klasse geben, allerdings hätten dann alle <li> tags diese klasse. Wird also nichts. Das ist aber auch nicht so tragisch, wenn das nicht geht

Dank euch hab Ich ja glücklicherweise das mit dem Schatten hinbekommen.
Danke dafür.
Dann ist das hier erstmal erledigt. Wenn Ich wieder nicht weiter weiß, melde Ich mich

MfG

HuRaHoRRe · 05.10.07 13:21

vlt kannst du ja ein leeres Listenelement hinzufügen und dem ne id geben ... das sollte ja wohl gehen rein vom generieren her.

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

Dropdown-Menu im IE liegt hinter anderen Elementen

Schatten hinter Bild

Schatten hinter Bildern

dhtml-menu klappt hinter dem flash-movie auf, nicht darüber: warum?

Verschwomene Schatten hinter einem halb durchsichtigen Flies

E-Mail:

Abonnieren Abbestellen