Anwählen eines Elements verrückt das Element rechts daneben

mj23 · 29. Juli 2009

Hallo alle zusammen,

folgendes Problem, wenn ich in der Navigation ein Element an wähle wird das Untermenü ausgefahren und das Element das rechts daneben steht verrückt. Ich habe es schon mit dem z-index probiert und verschiede display-optionen wie inline, inline-block usw. aber hat alles nichts gebracht.
Daher nun die Frage an euch ob mir jemand einen Rat zu dem Problem geben kann.

Vielen Dank!

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Startseite</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>
		<script type="text/javascript"></script>
	</head>




	<body>
		<div id="Tmenu">
			<ul id="Navigation">    
				<li><a id="aktuell" href="#Beispiel">WILLKOMMEN</a></li>		
				<li><a href="#Beispiel">xxxxxx</a>
					<ul>
						<li><a href="#Beispiel">Seite 3</a></li>
						<li><a href="#Beispiel">Seite 3a</a></li>
						<li><a href="#Beispiel">Seite 3b</a></li>
						<li><a href="#Beispiel">Seite 3c</a></li>
					</ul>
				</li>
				<li><a href="#Beispiel">xxxxxxxxx</a>
					<ul>
						<li><a href="#Beispiel">Seite 3</a></li>
						<li><a href="#Beispiel">Seite 3a</a></li>
						<li><a href="#Beispiel">Seite 3b</a></li>
						<li><a href="#Beispiel">Seite 3c</a></li>
					</ul>
				</li>
				<li><a href="#Beispiel">xx</a>
					<ul>
						<li><a href="#Beispiel">Seite 3</a></li>
						<li><a href="#Beispiel">Seite 3a</a></li>
						<li><a href="#Beispiel">Seite 3b</a></li>
						<li><a href="#Beispiel">Seite 3c</a></li>
					</ul>
				</li>
				<li><a href="#Beispiel">xxxxxxxxxxx</a></li>		
				<li><a href="#Beispiel">xxxxxxxxxxxxxx</a></li>			
			</ul>
			<div></div>
		</div>
   		<div id="inhaltsbox_1"><img class="img150" src="108.jpg"></div>
		<img class="img151" src="dsc_0029.jpg">
		<div id="inhaltsbox_2"><img class="img152" src="dsc_0029.jpg"></div>

		<div id="textfeld_1"> <p>yyyyyyyy</p></div>
		<div id="textfeld_2"> <p>yyyyyyyyyy</p></div>
		<img class="img153" src="karo_groß.gif">
  </body>
</html>

Alles anzeigen

Code

body {
	margin:0px;
	padding:0px;
}




  div#Tmenu {
    font-size: 14px;
    padding: 33px;
    border-bottom:3px solid white;
    background-color: #000000;
	background-image:url(schwarzerbalken.gif);
	background-repeat:no-repeat;
	height:38px;
  }  
  * html div#Tmenu {
    width: 100%;
    w\idth: 100%;  /* IE 6 in standards-compliant mode */
  }

  div#Tmenu div {
    clear: left;
  }

  ul#Navigation {
    margin: 20px 0px 0px 240px;
	padding: 0px;	/* oben, rechts, unten, links */
    text-align: left;
	z-index:2;
	position:absolute;
  }




  ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0em;
	padding: 0em;
  }  
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }




  ul#Navigation li ul {
    margin: 0;
	padding: 0;
    top:2.1em;
	position:relative;
	border:1px solid white;	
	display:none;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
    margin: 0em;
	border-bottom:1px solid white;
  }




  ul#Navigation a, ul#Navigation span {
    display: block;
    width:auto;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    margin: 0px 0px 0px 5px;
	padding: 0.23em 0.97em 0.16em 1.03em; /* oben, rechts, unten, links */
	color: white;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9.2em;
    w\idth: 7em;  /* IE 6 in standards-compliant mode */
  }

  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    width:7em;
	padding: 0.16em 1.03em 0.23em 0.97em;
	color: #E8D5A0;
  }

  ul#Navigation li ul a:hover {
    border-color: white;
	color: #E8D5A0;
  }

  li a#aktuell {
    color: #E8D5A0;
  }

  ul#Navigation li ul span {
    color: #E8D5A0;
  }

  ul#Navigation li a:active, ul#Navigation li:hover a:active {
    color: #E8D5A0;
	background-color: black;
  }




/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }

  ul#Navigation li:hover ul {
    display:block;
    background: black;
  }




.img150 {
	height:222px;
	width:320px;
	position:absolute;
	z-index:1;
	margin-top:50px;
	margin-left:65px;
	border:3px solid #000000;
	border-bottom: 40px solid #000000;
}




.img151 {
	height:222px;
	width:320px;
	position:absolute;
	z-index:1;
	margin-top:50px;
	margin-left:415px;
	border:3px solid #000000;
	border-bottom: 40px solid #000000;
}




.img152 {
	height:222px;
	width:320px;
	position:absolute;
	z-index:1;
	margin-top:50px;
    margin-left: 190px;
	border:3px solid #000000;
	border-bottom: 40px solid #000000;
}




#inhaltsbox_1 {
	width:50%;
	height:84%;
	background-color:#7F0E0E;
	position:absolute;
	margin-left:0%;
    margin-top:0%;
	background-image:url(karo1.gif);
	background-repeat:repeat;
}




#inhaltsbox_2 {
	width:50%;
	height:84%;
	background-color:#654829;
	position:absolute;
	margin-left:50%;
	margin-top:0%;
	background-image:url(karo2.gif);
	background-repeat:repeat;
}




#textfeld_1 {
	position:relative;
	margin-left:155px;
	margin-top:275px;
	color:white;
	z-index:2;
	font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
	font-size: 30px;
	letter-spacing:30px;
}




#textfeld_2 {
	position:relative;
	margin-left:785px;
	margin-top:-67px;
	color:white;
	z-index:2;
	font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
	font-size: 30px;
	letter-spacing:30px;
}




.img153 {
	width:300px;
	height:20px;
	position:absolute;
	z-index:2;
	margin-top:-60px;
    margin-left: 427px;
}

Alles anzeigen

Janguste · 29. Juli 2009

Also zuerst einmal:

Code

<div></div> 
         <div id="inhaltsbox_1"><img class="img150" src="108.jpg"></div> 
      <img class="img151" src="dsc_0029.jpg"> 
      <div id="inhaltsbox_2"><img class="img152" src="dsc_0029.jpg"></div> 

      <div id="textfeld_1"> <p>yyyyyyyy</p></div> 
      <div id="textfeld_2"> <p>yyyyyyyyyy</p></div>

Semantik: Div-Tags sind zur Gruppierung mehrerer verschiedener Elemente gedacht. Das was du haben willst kannst du auch mit <p id="textfeld_1">yyyyyyy</p> erreichen, genauso bei den imgs. Und leere Div-Tags gehen gar nicht, falls du Zwischenraum zwischen zwei Elementen haben willst nimm das CSS-Attribut Margin.

Dann zu deinem Problem, du koenntest den Links eine Klasse zuweissen und ihnen ein Margin-left und ein Margin-right geben und dann fuer die Klasse DeineKlasse:hover ein Margin-left und ein Margin-right das etwas kleiner ist.

Kann sein, dass es elegantere Loesungen gibt, aber es sollte funktionieren...

HTML

Code

<a href="yyyyy" class="MenuLink">blablabla</a>

CSS

Code

.MenuLink{
          margin-left:50px;
          margin-right:50px;
}




.MenuLink:Hover{
          margin-left:35px;
          margin-right:35px;
}

Alles anzeigen

Musst etwas mit den Zahlen rumexperimentieren bis es passt, aber insgesamt sollte es so gehen.

Anwählen eines Elements verrückt das Element rechts daneben

Jetzt mitmachen!

Teilen