CSS Element verbergen

FastEthernet · 1. Juli 2010

So, hier bin ich wieder. Fast alle Probleme sind gelöst, nur zwei Sachen sind noch zu tun.
Stand der Dinge:

CSS:

Code:

@charset "utf-8";
/* CSS Document */

/*Menu*/

.menu {
    background-color:#0C3;
	text-align:center;
	width:8em;
	float:left;
	}
	
span.tag {
	width:8em;
	background-color:#936;
	display: block;
    cursor: default;
	}	

.innen {
	display:none;
	width:8em;
	}
	
.menu:hover .innen {
	display:block;
	text-align:center;
	width:8em;
	background-color:#C39;
	}
	
/*Schachtelmenus*/

*span.stag {
	width:8em;
	background-color:white;
    cursor: default;
	height:1.25em;
	}	

.smenu {
    background-color:blue;
	text-align:center;
	width:8em;
	float:left;
	height:1.25em;
	}
	


.sinnen {
	display:none;
	width:8em;
	margin-left:8em;
	margin-top:-1.25em;
	padding-top:1.25em;
	z-index:200;
	}
	
.smenu:hover .sinnen,span.stag {
	display:block;
	text-align:center;
	width:8em;
	background-color:#999;
	z-index:200;
	}

HTML:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="design2.css" type="text/css" rel="stylesheet" />
</head>

<body>
<!-- MENU-->
    <div class="menu">
    	<span class="tag">1aaa</span>
        <a class="innen" href="#">Test1</a>
        <a class="innen" href="#">Test2</a>
        <a class="innen" href="#">Test3</a>
        <a class="innen" href="#">Test4</a>
	</div>
        
    <div class="menu">
        <span class="tag">2aaa</span>
        <a class="innen" href="#">Test1</a>
        <a class="innen" href="#">Test2</a>
        
            <div class="smenu">
                 <span class="stag">2.1aaa</span>
            	 
                     <a class="sinnen" href="#">Test1.1</a>
                     <a class="sinnen" href="#">Test2.1</a>
                     <a class="sinnen" href="#">Test3.1</a>
                     <a class="sinnen" href="#">Test4.1</a>
                 
        	</div>
        <a class="innen" href="#">Test3</a>
        <a class="innen" href="#">Test4</a>
    </div>
<!-- MENU END-->     

</body>
</html>

Nun gibt es folgendes Problem:

2.1aaa ist ein Unterlistenelement und soll im "eingeklappten" Status nicht angezeigt werden.

Die Elemente Test1.1 - Test1.4 sollen noch 1,25 em nach oben.(auf die Höhe von 2.1aaa)

Danke

XimeX · 1. Juli 2010

Das wird dir jetzt nich unbedingt helfen aber mach die menüs entweder mit einer liste <li> oder mit dem menü tag <menu> was eig auch eine liste ist!
Ich glaub sogar das man ein <a> nicht ausblenden kann sondern nur mit nen span etc drüber und hier wäre die liste sicher nicht schlecht! So vom ansatz her sollte es passen mit :hover etc
das mit dem verschieben müsstest du mit position:relativ etc machen

Edit: hab da 2 schöne zusammenfassungen im internet gefunden über css3 und html5! kann jeder webentwickler mal brauchen

FastEthernet · 1. Juli 2010

Du glaubst falsch, in meinem Code sind 12 ausgeblendete Links und das gemeinte Element ist in nem Span ;o
Und du hast recht, das hat nicht geholfen

NullPointer · 1. Juli 2010

Was passiert denn, wenn du den entsprechenden <span> standardmäßig auf display:none setzt?

FastEthernet · 1. Juli 2010

Dann passiert nix
Wenn ich aber es auch aus dem Hover unten lösche, wirds blau.
Wenn ich dann .smenu auf none setze, kommt das Element gar nicht mehr

ScoutX · 1. Juli 2010

Du hast Dir hier ein klassisches Problem geschaffen. Menüs und Untermenüs, die aus Überschriften bestehen. Also Elemente ohne href. 2.1aa hat einen eigenen Container, damit überschreibt es das Stylesheet von 2.aa. 2.1aa zeigt somit nur eine Überschrift an, die dem Inhalt Test 1.1 etc hat. Dazu noch ein horizontales Menu.

Ist Dir aufgefallen, dass dies nicht funktioniert:

Code:

.smenu {
background-color:blue

Ich guck mir dein Problem nochmal in Ruhe an, ob da etwas rettbar ist

p.s .sehe grade, zumindest ist Dir das Problem bewusst.

Edit: Hier mir die einzig bekannte Lösung ohne Javascript, bei deinem Ansatz sehe ich im Mopment nichts Rettbares.
http://www.cssplay.co.uk/menus/dd_valid.html

Du musst noch einiges umbauen.
Wenn Du auch mit JS leben willst, dann gibt es Superfish (und diverse andere jqueries).

Suche

CSS Element verbergen

FastEthernet

Cadet 4th Year

XimeX

Lt. Commander

Anhänge

FastEthernet

Cadet 4th Year

NullPointer

Lt. Commander

FastEthernet

Cadet 4th Year

ScoutX

Captain

Ähnliche Themen