zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Overeffect soll im SubMenü statisch bleiben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.05.2008, 17:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2007
Beiträge: 23
omex befindet sich auf einem aufstrebenden Ast
Unglücklich Overeffect soll im SubMenü statisch bleiben

Hallo liebe Community, hoffe mir kann jemand weiterhelfen.

Problem:

Ich habe ein schönes Menü, was sich vertikal als sub Menü öffnet. Jetzt möchte ich das die grüne Button-Grafik gehighlitet bleibt, wenn ich im Menü herunterfahre.

Als erste Hilfe habe ich euch eine Grafik erstellt, die euch bildhaft erklären soll, was ich meine.





Anbei nun der Quellcode der Xhtml Datei:

Code:
<ul class="nav">
<li><a href="#" class="home" style=" margin-left:4.5em;"><b></b><span style="margin-left:0.6em;">Home</span></a> <span style="color:#FFFFFF; line-height:2.7em; width:23em;">|</span></li>
<li><a href="#" class="suchmaschinenoptimierung" style="margin-right:10em;"><b></b><span style="margin-left:0.6em;">Suchmaschinenoptimierung
</span>
	<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
 <div></div>
</a>
<ul>
<li><a href="#12">&Uuml;bersicht</a></li>
<li><a href="#13">Vorteile</a></li>
<li><a href="#13"> Link Management</a></li>
<li><a href="#15">SEO International
	<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

</a>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	
	</li></ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

Jetzt der Quellcode der Css Datei:

Code:
.nav {padding:0 0 0.8em 0; margin:0; list-style:none; height:3em; background:url(../../grafiken/menue/back.png) repeat-x; font-family:verdana, arial, sans-serif; font-size:0.75em; color:#FFFFFF; width:84em;}
.nav li {float:left; height:3em;}
.nav li a {display:block; height:3em; width:7em; margin: 0 0.3em 0 0.3em; float:left; line-height:2.7em; color:#FFF; font-weight:700; text-decoration:none; text-align:center;}
.nav li a:hover {position:relative; visibility:visible; line-height:2.7em; z-index:50; }


.nav li a.suchmaschinenoptimierung:hover {position:relative; visibility:visible; line-height:2.7em; z-index:500; color:#FF0000; height:17em; width:7em; }


.nav li:hover > a.home:hover b {display:block; width:6em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.suchmaschinenoptimierung:hover b {display:block; width:14em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.suchmaschinenmarketing:hover b {display:block; width:14em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.services:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.know-how:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.ueber:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.karriere:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow2.png);}







.nav li a:hover span {display:block; width:6em; height:3em; position:absolute; left:0; top:0; cursor:pointer;}
.nav li ul, .nav li div  {position:absolute; left:-9999px;}
.nav li:hover {position:relative;}


.nav li:hover > a {line-height:2.7em; color:#000;}
.nav li:hover > a.home:hover b {display:block; width:6em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.suchmaschinenoptimierung:hover b {display:block; width:16em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.suchmaschinenmarketing:hover b {display:block; width:15em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.services:hover b {display:block; width:5.8em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.know-how:hover b {display:block; width:7em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.ueber:hover b {display:block; width:7em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.karriere:hover b {display:block; width:7em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow2.png);}



.nav table {border-collapse:collapse; margin:o.07320em;}

.nav :hover div {left:0.3em; top:3.3em; width:16.6em; height:12.2em; padding:0.732em 0; background:url(../../grafiken/menue/sub_back.png); z-index:100;}

.nav :hover ul {padding:0; margin:0; list-style:none; left:0; top:2.7086em; width:14.641em; height:10.541em; padding:0.7320em 0; z-index:120;}
.nav :hover ul li {height:1.9765em;}
.nav :hover ul li a {height:1.9765em; line-height:1.9765em; color:#fff; width:14.3484em; text-align:left; text-indent:20px;}

.nav :hover ul li a:hover {background: url(../../grafiken/menue/subtab_over.png); color:#000;}
.nav :hover ul li:hover > a {background: url(../../grafiken/menue/subtab_over.png); color:#000;}

.nav :hover ul ul, .nav :hover ul div {position:absolute; left:-9999px;}
.nav :hover ul :hover {z-index:200;}
.nav :hover ul :hover div {left:10.9809em; top:o.2928em; width:14.6412em; height:10.5417em; padding:0.7320em 0; background:url(../../grafiken/menue/sub_back.png); z-index:200;}
.nav :hover ul :hover ul {padding:0; margin:0; list-style:none; left:10.9809em; top:0.2928em; width:14.6412em; height:10.5417em; padding:10px 0; z-index:250;}
.nav :hover ul :hover ul li a {background:transparent;}
.nav :hover ul :hover ul li a:hover {background: url(../../grafiken/menue/subtab_over.png); color:#000;}



		/* Formatierung Menü Ende */

so hoffe ich hoffe, mir kann jemand weiterhelfen.

Geändert von omex (09.05.2008 um 17:29 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.05.2008, 17:38
Neuer Benutzer
neuer user
 
Registriert seit: 09.05.2008
Beiträge: 13
~WS~ befindet sich auf einem aufstrebenden Ast
Standard

hier so etwa ? Unbenanntes Dokument
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.05.2008, 17:51
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

Zitat:
Zitat von ~WS~ Beitrag anzeigen
hier so etwa ? Unbenanntes Dokument
Speichers doch als .html!
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
  #4 (permalink)  
Alt 11.05.2008, 17:37
Benutzer
neuer user
 
Registriert seit: 02.03.2008
Beiträge: 44
Solacanea befindet sich auf einem aufstrebenden Ast
Standard

Irgendwie hab ich grad das selbe Problem und steh auf dem Schlauch.

Ich möchte, dass bei diesem Menü "works" auch hervorgehoben bleibt, wenn man über das Submenü fährt. Nur ich hab grad keine Idee, wie ich den dazu passenden Selektor aufbauen soll.

Hier ist das HTML

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="de">
<head>
<title> TITEL DER SEITE </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
	<div id="header">
	<div id="navi"> 
  <ul>
  	<li id="home"><a href="#"><span></span> home </a></li>
  	<li id="works"><a href="#"><span></span> works </a>
  		<ul><li id="w0708"><a href="#"><span></span> 2007-2008 </a></li>
  				<li id="w0607"><a href="#"><span></span> 2006-2007 </a></li>
  		</ul>
  	</li>
  	<li id="about"><a href="#"><span></span> about </a></li>
    <li id="up"><a href="#"><span></span> up </a></li>
    <li id="contact"><a href="#"><span></span> contact </a></li>
  </ul>
</div>
</div>
	
	
</body>

</html>
und hier das CSS

Code:
* {
	padding : 0;
	margin  : 0;
}

body {
	height: 600px;
	width: 1000px;
}

#header {
	position: relative;
	width: 100%;
	height: 54px;
	background-color: #4a4a72;
}

#navi {
	position: absolute;
	top: 35px;
	left: 700px;
	
	font-size: 8px;
}

#navi ul {
	height: 16px;
	
	list-style-type: none;
}

#navi ul li {
	float: left;
}

#navi ul li ul li{
	clear: left;
}

#navi li a {
	text-decoration: none;
}

#navi ul ul {
	position: absolute;
	top: 16px;
	visibility: hidden;
	z-index: 100;
}

#navi ul li:hover ul {

	visibility: visible;
}

/* ---------------------------------------------------- */

#home {
	position: relative;
	height: 16px;
	width: 60px;
}

#home span{
	background: url(home.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#home a:hover span{
	background: url(home_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#works {
	position: relative;
	height: 16px;
	width: 60px;
}

#works span{
	background: url(works.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#works a:hover span{
	background: url(works_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#about {
	position: relative;
	height: 16px;
	width: 60px;
}

#about span{
	background: url(about.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#about a:hover span{
	background: url(about_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#up {
	position: relative;
	height: 16px;
	width: 35px;
}

#up span{
	background: url(up.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#up a:hover span{
	background: url(up_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#contact {
	position: relative;
	height: 16px;
	width: 80px;
}

#contact span{
	background: url(contact.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#contact a:hover span{
	background: url(contact_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#w0708 {
	position: relative;
	height: 20px;
	width: 150px;
}

#w0708 span{
	background: url(0708_2.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#w0708 a:hover span{
	background: url(0708_2_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#w0607 {
	position: relative;
	height: 20px;
	width: 150px;
}

#w0607 span{
	background: url(0607_2.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}

#w0607 a:hover span{
	background: url(0607_2_h.gif) no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;
}
Danke schonmal im Voraus.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.05.2008, 19:49
Benutzer
neuer user
 
Registriert seit: 02.03.2008
Beiträge: 44
Solacanea befindet sich auf einem aufstrebenden Ast
Standard

Ok, zumindest mein Problemchen ist gelöst. Den spans in den Links des Submenüs eine eigene Klasse gegeben, diese im CSS explizit mit ansprechen und das Hervorheben von
Code:
#works a:hover span
zu
Code:
#works:hover span
geändert.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
ie6/ie7 statisch ok, dynamisch nicht dj pogo (X)HTML 1 29.05.2009 16:06
bild statisch anzeigen lassen playaz CSS 3 01.12.2006 11:59
2-spalten Design (beide statisch) Thorin CSS 2 02.06.2006 16:22
Tabellenkopf statisch während Tabellenkörper scrollt? sender CSS 4 24.03.2005 16:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:59 Uhr.