✔ Schatten hinter einem Rollover-Menu

Thalin · 4. Oktober 2007

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 · 4. Oktober 2007

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 · 5. Oktober 2007

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 · 5. Oktober 2007

Hi,

Thalin hat gesagt.:
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 · 5. Oktober 2007

Maik hat gesagt.:
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 · 5. Oktober 2007

Versuch es mal auf diese Weise:

Code:

ul.menu ul {
        margin: 0;
        padding: .2em;
        position: absolute;
        list-style-type: none;
        background:url(schatten.png);
        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;
        margin:0px 4px 0px 4px;
        text-indent:-.5em;
        line-height:.3em;
        background:#a4c6eb;
}

Thalin · 5. Oktober 2007

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 · 5. Oktober 2007

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 · 5. Oktober 2007

Thalin hat gesagt.:
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 {
        padding: .8em .5em .8em .5em;
        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 {
        padding: .8em .5em .8em .5em;
        color: #fff;
        background-color:#1F3F84;
        display: block;
        cursor:pointer;
}

Thalin · 5. Oktober 2007

HuRaHoRRe hat gesagt.:
Du hast jetzt die 1*1px Variante genommen oder?

Ja hab Ich

Maik hat gesagt.:
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

✔ Schatten hinter einem Rollover-Menu

Thalin

Mitglied

Anhänge

HuRaHoRRe

Erfahrenes Mitglied

Thalin

Mitglied

Maik

Thalin

Mitglied

Maik

Thalin

Mitglied

HuRaHoRRe

Erfahrenes Mitglied

Maik

Thalin

Mitglied

Neue Beiträge