✔ Unsichtbare Box beim hovern sichtbar machen...Grundprinzip

Status
Nicht offen für weitere Antworten.
Peter Klein

Peter Klein

Erfahrenes Mitglied
Mal wieder ein kleines Problem, wo ich hänge.

Habe mir diverse Menus angeschaut nur habe ich es nicht ganz verstanden.

Beim hovern über LInks sollen auf der linken Seite jeweile für einen Link eine Box erscheinen mit nem Text drin, die sonst nicht sichtbar ist.

Sie muss absolut positioniert werden, stimmt doch, ne.

Wie muss ich die CSS schreiben, damit ich den gewünschten Effekt erziele?

Brauche nur eine Grundprinziperklärung.

Peter
 
Auf folgende Weise ließe sich sowas machen:
HTML: 
<div id="linkContainer">
    <a href="pfad/zum/ziel">Link-Text</a>
    <div id="box">
        Box-Inhalt
    </div>
</div>
CSS: 
#linkContainer:hover #box
 {
    display:block;
 }
Ich habs nicht getestet, kann also nicht sagen obs geht, soweit ich weiß müsste es aber funktionieren.
Man müsste die Box dann entweder absolut oder relative positionieren.
 
Zuletzt bearbeitet:
@michaelsinterface:

Oh, dieses Menu habe ich glaube ich übersprungen beim suchen. Hatte nicht alle getestet.

Danke Dir...

Ich immer mit meinen "Kinderproblemchen", ne
 
Also habe es jetzt so gelöst:

Code: 
<!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/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>www.klein-peter.eu</title>

<meta name="language" content="de" />

<meta name="author" content="root"/>

<meta name="copyright" content="(C) 2005 Peter Klein" />

<meta name="generator" content="Bluefish 1.0.7"/>

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta name="audience" content="all, alle" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta http-equiv="imagetoolbar" content="no" />

<meta name="robots" content="index,follow" />



<link rel="stylesheet" type="text/css" href="styles/main.css" />

<link rel="stylesheet" type="text/css" href="" media="screen, projection" />

<link rel="stylesheet" type="text/css" href="" media="print" />





</head>

												

<body>



<div id="header">
	<div id="nav">
		<ul class="menu">
			<li class="nav"><a href="#">Link 1
			<span class="pop">Hier steht ein Infotext f&uuml;r Link 1</span>
			</a>	
			</li>
			
			<li class="nav"><a href="#">Link 2
			<span class="pop">Hier steht ein Infotext f&uuml;r Link 2</span>
			</a>
			</li>
			
			<li class="nav"><a href="#">Link 3
			<span class="pop">Hier steht ein Infotext f&uuml;r Link 3</span>
			</a>
			</li>
			
			<li class="nav"><a href="#">Link 4
			<span class="pop">Hier steht ein Infotext f&uuml;r Link 4</span>
			</a>
			</li>
			
			<li class="nav"><a href="#">Link 5
			<span class="pop">Hier steht ein Infotext f&uuml;r Link 5</span>
			</a>
			</li>
			
			<li class="nav"><a href="#">Link 6
			<span class="pop">Hier steht ein Infotext f&uuml;r Link 6</span>
			</a>
			</li>
		</ul>
	</div>
	<div id="clear"></div>
</div>











</body>

</html>

CSS:

Code: 
* {
	color: #53881a;
	font-size: 1em;
	margin: 0;
	padding: 0;
}

#header {
	background-color: #FFFFFF;
	border-bottom:  1px solid #53881a;
	clear: both;
	padding-bottom: 4px;
}

#nav {
	text-align: right;
	float: right;
}
	
ul {
	padding-top: 7px;
}

li {
	float: left;
	list-style-type: none;
	padding: 0px 0px 0px 12px;
}

a:link,a:visited {
	color: #53881a;
	text-decoration: none;
	padding:7px 8px 4px 12px;
}
	
a:hover,a.nav {
	color: #0f0e0e;
	background-color: #53881a;
	padding:7px 8px 4px 12px;
}
	
a:active {
	color: #0f0e0e;
	background-color: #53881a;
}
	
.pop {
	background-color: #FFFFFF;
	font-size: 1em;
	visibility: visible;
	padding: 10px;
	position: absolute;
	top: 30px;
	left: 0px;
	border-right: 1px solid #53881a;
	border-bottom: 1px solid #53881a;
	-moz-border-radius-bottomright: 10px;
	}

#clear {
	clear: both;
}
	
#header a span {
  display: none;
}
  
 #header a:hover span {
	 display: inherit;
}

Es funtioniert schonmal, gibt es etwas was man verbessern könnte vom Code her?

Die Feinheiten werden später gemacht.

Peter
 
Man könnte den Code dahingehend optimieren, damit das Ein- und Ausblenden der Infoboxen auch im IE funktioniert ;)

Code: 
ul.menu {
        padding-top: 7px;
}

ul.menu li.nav {
        display: inline;
        list-style-type: none;
}

a.lnk:link,a.lnk:visited {
        color: #53881a;
        text-decoration: none;
        padding:7px 8px 4px 12px;
        margin-left: 12px;
}

a.lnk:hover,a.nav {
        color: #0f0e0e;
        background-color: #53881a;
        padding:7px 8px 4px 12px;
}

a.lnk:active {
        color: #0f0e0e;
        background-color: #53881a;
}

a.lnk .pop {
        background-color: #FFFFFF;
        font-size: 1em;
        visibility:hidden;
        padding: 10px;
        position: absolute;
        top: 30px;
        left: 0px;
        border-right: 1px solid #53881a;
        border-bottom: 1px solid #53881a;
        -moz-border-radius-bottomright: 10px;
        }

a.lnk:hover .pop {
         visibility:visible;
}
Code: 
<div id="header">
        <div id="nav">
                <ul class="menu">
                        <li class="nav"><a href="#" class="lnk">Link 1
                        <span class="pop">Hier steht ein Infotext für Link 1</span>
                        </a>
                        </li>

                        <li class="nav"><a href="#" class="lnk">Link 2
                        <span class="pop">Hier steht ein Infotext für Link 2</span>
                        </a>
                        </li>

                        <li class="nav"><a href="#" class="lnk">Link 3
                        <span class="pop">Hier steht ein Infotext für Link 3</span>
                        </a>
                        </li>

                        <li class="nav"><a href="#" class="lnk">Link 4
                        <span class="pop">Hier steht ein Infotext für Link 4</span>
                        </a>
                        </li>

                        <li class="nav"><a href="#" class="lnk">Link 5
                        <span class="pop">Hier steht ein Infotext für Link 5</span>
                        </a>
                        </li>

                        <li class="nav"><a href="#" class="lnk">Link 6
                        <span class="pop">Hier steht ein Infotext für Link 6</span>
                        </a>
                        </li>
                </ul>
        </div>
</div>
 
Hi, das hab ich eigenbtlich in die Feinheiten mit einbezogen gehabt.

Ich teste immer erst im Firefox und dann weitere Browser.

Sag mal, weisst du warum im FF unter Win manches anders dargestellt wird als im FF unter Ubuntu?
 
Ja habe nen nterscheid von einem px. Muss mich mal schlau machen wie ich beide darauf trimme das sie alles gleich darstellen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück