[FRAGE] Links in der navigation zu weit unten.

[Blodyman]

Hi, ich komm seit Tagen nicht weiter. Ich hab das Problem, dass die Links in meinem aufklappbaren Menü zu weit unten angezeigt werden. Ich hab ne Jquery Funktion die den Pfeil daneben anzeigt. Klappt wunderbar. Was ich nicht verstehe es sollte der Pfeil im "pfeilcontainer" angezeigt werden. Die Pfeile werden aber erst neben dem Link angezeigt, was auch eigtl wunderbar ist und sein sollte. Nur wundert es mit, weil der container für die Pfeile weiter oben ist. Ich würd gern den Link neben den Container haben, sodass die Pfeile auf wieder in diesem Container erscheinen. Ich hab schon alles mögliche rumprobiert über paddin margin top bottom angaben positionierungen floats. Hat alles nicht funktioniert.

Bitte nicht wundern. Das Menü klappt auch erst beim 2. Klick auf.

Hier die Seite: Meine Bewerbungsseite
Die nav:

<div id="nav">
		<ul>
			<li class="navli"><h2 onClick="location.href='index.html'">Startseite</h2></li>
			<li class="navli">
				<h2 onClick="verstecken('navlist', 0)">Bewerbungsunterlagen</h2>
					<ul class="navlist">
						<li class="invisibleli" onmouseover="hover(0)">

						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>

						 <a href="Lebenslauf.html">Lebenslauf</a>
						</li>				
					</ul>
			</li>
			<li class="navli">
				<h2 onClick="verstecken('navlist', 1)">zu meiner Person</h2>
					<ul class="navlist">
						<li class="invisibleli" onmouseover="hover(1)">
						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>
						 <a href="">Hobbys</a>
						</li>	
						<li class="invisibleli" onmouseover="hover(2)">
						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>
						 <a href="">Eigene Projekte</a>
						</li>
						<li class="invisibleli" onmouseover="hover(3)">
						 <div class="pfeilcontainer">
							<img src="pfeil.png" class="navpfeil">
						 </div>
						 <a href="">Kenntnisse</a>
						</li>					
					</ul>		
			</li>
		</ul>
	</div>

Die CSS datei:

html {
	height:100%;
	width: 100%;
}

* {
	margin: 0 auto;
	html body
}

h1 {
	color: red;
	font-style: italic;
	text-align: center;
}

#head {
  	position: absolute;
  	top: 0;
   	left: 0;
   	height: 120px;
   	width: 100%;
	background-color: rgb(200,200,200);
}

#head-left {
	position: absolute;
	left: 0;
	top: 0;
	height: 82%;
	width: 20%;
}

#head-right{
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 20%;
	padding-top: 1.5em;
}

.warning {
	color: red;
	font-size: 15pt;
}

#head-mid{
	height: 100%;
	width: 60%;
}

#location {
	position: absolute;
	top: 100px;
	left: 0;
	z-index: 1;
	background-color: rgb(150,150,150);
	width: 100%;
	height: 20px;
	-moz-box-shadow: 2px 2px 2px 2px #666;
	-webkit-box-shadow: 2px 2px 2px 2px #666;
	box-shadow: 2px 2px 2px 2px #666;

}

#site {
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: silver;
}

#nav {
	position: absolute;
        top: 25px;
	left: 6px;
	width: 15%;
	z-index: 2;
	background-color: silver;
	margin: 0 0 25px 0;
}

#nav ul {
	list-style: none;
	padding: 0 0 0 0;
}

.navli {
	border-left: 0.1em red solid;
	border-top: 0.1em red solid;
	background-color: rgb(105,105,105);
	padding: 0 0 0 0;
	margin: 0 0 0.1em 0;
}

.navli h2{
        font-size: 8pt;
	color: black;
	cursor: pointer;
}

.navli a{
        text-decoration: none;
        color: black;
        font-size: 8pt;
}

.navli a:hover{
        text-decoration: underline;

}

.navlist {
        border: 0 0 0 0;
        display: none;
}

.invisibleli{
	height: 15px;
}

.invisibleli a{
        text-decoration: none;
        color: black;
        font-size: 8pt;
	margin-top: 0;
}

.pfeilcontainer{
	height: 10px;
	width: 10px;
	float: left;
	background-color: grey;
	margin: 2px 2px 0 0;

}

.navpfeil{
	display: none;
	height: 100%;
	width: 100%;
}

#content{
	position: absolute;
	top: 25px;
	left: 16%;
	width: 84%;
	z-index: 3;
	background-color: silver;
}

#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15px;
	background-color: black;
	-moz-box-shadow: 2px 2px 6px 12px #666;
	-webkit-box-shadow: 2px 2px 6px 12px #666;
	box-shadow: 2px 2px 6px 12px #666;
	color: red;
	font-size: 7pt;
	padding: 1px 0 0 0;
	text-align: center;
}

/* eigene Projekte */
#projectlistcontainer{
	postion: absolute;
	height: 100px;
	width: 100%;
}

#projectlist{
	position: absolute;
	left: 30%;
	width: 300px;
	height: 100%;
}

#projectframe{
	position: absolute;
	top: 110px;
	width: 100%;
	height: 400px;
	overflow: auto;
}

#chat{
    height: 300px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

#schreiben{
    width: 100%;
}

#chatbeenden{
    position: absolute;
    right: 50%;
    top: 50%;
}

Mein scripts:

$(function(){
  $('.navlist > li').hover(function(){
    $('.navpfeil', this).show();
  },function(){
    $('.navpfeil', this).hide();
  });
});

function verstecken(className, id){
  if(document.getElementsByClassName(className)[id].style.display == "none"){
    document.getElementsByClassName(className)[id].style.display = "block";
  }
  else{
    document.getElementsByClassName(className)[id].style.display = "none";
  }
}

 

[LikeStar]

gib deiner Klasse .navlist Folgendes hinzu:

min-height: 60px

 

[Blodyman]

Danke für deine Antwort. Das löst mein Problem aber leider nicht. Aber ich nehme das falls ich das nicht gelöst bekomme mit 20px für die invisibleli's. Sieht gewollter aus dann =)

 

[LikeStar]

Dein Titel:

Links in der navigation zu weit unten.


Mein Code nutzen -> Problem gelöst


Edit:

bekomme mit 20px für die invisibleli's.

Das macht's doch noch schlimmer ; - ) Wenn du es z.B. auf 30 pixel erhöhst,