DIV-Container richtig positionien ...

tobm_knows_best · 1. Januar 2012

´n gesundes Neues hier mal in´s Forum geworfen...!

Folgende Frage für die Katerlosen unter Euch:
Ich habe eine Navi - gut lassen wir jetzt mal die Gestaltung ausser Betracht, denn ich habe mir nur die wichtigsten Code-Schnipsel rauskopiert - und über dieser Navi soll ein Div-Container positioniert werden (der dann beim Mouse-Over einer Navi-Rubrik *erscheinen* soll - darin sollte man dann eine Art handschriftlichen Text als *beschreibung* od. ähnliches sehen..)

Wenn ich richtig informiert bin ist ja ein DIV-Container gut für solche Dinge - ziemlich simple Positionierung etc.... ich versuche jetzt aber schon eine ganze Weile den Container so zu platzieren, dass er über dem ersten Navi-Punkt erscheint...und zwar (jetzt kommts) ausserhalb der horizontalen Linie (Klar - einfach den Div vor dem anderen setzen - aber so leicht isses ja nich - ich möchte das er an dem Navi-Punkt ausgerichtet ist)! ...vergebens

Jeder Menüpunkt sollte dann auch so nen DIV bekommen. Schlussendlich sollt´s dann so aussehen:

Irgendwie krieg ich das nich so recht hin mit dem Z-Index (welchen ich jetzt auch erst mal aus beiden DIVs entfernt habe)...Was mache ich falsch?

hier mal der Code:

HTML:

 <head>
<style type="text/css">
body {
	margin-top: 15px;
	margin-bottom: 0px;
}
#apDiv2 {
	position:relative;
	left:0px;
	top:5px;
	width:150px;
	height:25px;
	background-color: #DDD;
	overflow: hidden;
}
.div_top {
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 100%;
	padding-bottom: 12px;
	padding-top: 13px;
	top: 0px;
	background-image: url(pics/background_transp.png);
	left: auto;
	right: auto;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	z-index: 1000;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #999999;
}
.div_top_inner {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-size: 16px;
	color: #C7D725;
}
	.normal_grün_16px {
	color:#C7D725;
	font-size: 16px;
	font-weight: normal;
}
a.menu:link {
color:#C7D725;
text-decoration:none;
	font-size: 16px;
}
a.menu:visited {
color:#C7D725;
text-decoration:none;
	font-size: 16px;
}
a.menu:active {
color:#EEE;
text-decoration:none;
	font-size: 16px;
}

a.menu:hover {
	color:#EEE;
	text-decoration:none;
	font-size: 16px;

}
</style>  
</head>  
<div class="div_top" id="div_top">
   <div class="div_top_inner" id="div_top_inner">
   
<!-- ********************Hier der DIV der eingeblendet werden soll******************* --> 
    <div id="apDiv2"></div>
    <span class="normal_grün_16px"><a class="menu" href="#"><span class="normal_grün_16px">HOME</span></a><span class="normal_grün_16px"> / </span><a class="menu" href="vita.html">VITA</a> / <a class="menu" href="#">LEISTUNGEN</a> / <a class="menu" href="#">NEWS</a> / <a class="menu" href="#">KONTAKT</a> / <a class="menu" href="#">IMPRESSUM</a></span></div>
</div>

DIV-Container richtig positionien ...

tobm_knows_best

Erfahrenes Mitglied

Neue Beiträge