Problem mit CSS File

A

akrenn

Mitglied
Liebe User, brauche Bitte eure Hilfe!


Habe ein Problem, wenn ich ohne css arbeite, dann erscheint unter Willkommen -> Wer ist TEST GmbH nach anklicken der versteckte Text, und was macht die TEST GmbH rückt nach unten. Wenn ich dann Was macht...., anklicke schliest sich das Wer ist und Was macht....öffnet sich,....

Wenn ich css verlinke, ist alles natürlich viel schöner, wie in z.b. in Kontakt zu sehen ist. Aber mit dem CSS File sehe ich unter Willkommen zwar die drei wer ist..., was macht..., ...und die Umwelt aber in einer nicht schönen wie es sich gehört Formatierung und auch wenn man nun eines anklickt gehen die anderen nicht runter, sondern SIe überlappen sich und es sieht nicht so aus wie es soll, es funktioniert nichts so als wie ohne css unter willkommen!

Bitte Bitte um Hilfe, Vielen, Vielen Dank!
akrenn

HTML: 
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>TEST GmbH</title>
<link href="site2c.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="masthead">
</div>
<div id="top_nav">
<div class="oe_wrapper">
			<div id="oe_overlay" class="oe_overlay"></div>
			<ul id="oe_menu" class="oe_menu">
				<li><a href="">Willkommen</a>
					<div>
						<ul>
							<li class="oe_heading">TEST GmbH</li>
						</ul>
			<dl class="v_show_hide">
  			<dt>Wer ist die TEST GmbH</dt>
  			<dd>These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping.  The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.  </dd>
  			<dt>Was macht die TEST GmbH</dt>
  			<dd>Start with a tube of premade sugar cookie dough.  Press a cookie-sized amount into mini-muffin pans and then bake as directed.  Dust the cookie cups with powdered sugar.  Microwave some jam (raspberry and mint) and spoon it into the cookie cups.  Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.</dd>
  			<dt>TEST GmbH und die Umwelt</dt>
  			<dd>These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.</dd>
			</dl>
				</div>	
				</li>
				<li><a href="">Produkte</a>
					<div style="left:-111px;"><!-- -112px -->
						<ul>
							<li class="oe_heading">Komposter</li>
							<li><a href="#">HAPPY</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Zubehör</li>
							<li><a href="#">Gehäuse</a></li>
							<li><a href="#">Kücheneinbausatz</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Hilfe</a>
					<div style="left:-223px;"><!-- -112px -->
						<ul>
							<li class="oe_heading">Anleitung</li>
							<li><a href="#">HAPPY Deutsch</a></li>
							<li><a href="#">HAPPY Englisch</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Kompostieren</li>
							<li><a href="#">Wie kompostiere ich Richtig</a></li>
							<li><a href="#">Wie reinige ich den HAPPY</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Neuigkeiten</a>
					<div style="left:-335px;">
						<ul>
							<li class="oe_heading">INFO 2011</li>
							<li><a href="#">Presse</a></li>
							<li><a href="#">Magazine</a></li>
							<li><a href="#">Auszeichnungen</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Blog</li>
							<li><a href="#">Aktuelles</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Kontakt</a>
					<div style="left:-447px;">
						<ul>
							<li class="oe_heading">Die vielen Möglichkeiten</li>
							<li><a href="#">Kontaktformular</a></li>
							<li><a href="#">Adresse</a></li>
							<li><a href="#">Mail</a></li>
							<li><a href="#">Wie finde ich die TEST GmbH</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Social Media</li>
							<li><a href="#">Facebook</a></li>
							<li><a href="#">Twitter</a></li>
						</ul>
					</div>
				</li>
			</ul>	
		</div>
        <div>
		</div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
				var $oe_menu		= $('#oe_menu');
				var $oe_menu_items	= $oe_menu.children('li');
				var $oe_overlay		= $('#oe_overlay');

                $oe_menu_items.bind('mouseenter',function(){
					var $this = $(this);
					$this.addClass('slided selected');
					$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
						$oe_menu_items.not('.slided').children('div').hide();
						$this.removeClass('slided');
					});
				}).bind('mouseleave',function(){
					var $this = $(this);
					$this.removeClass('selected').children('div').css('z-index','1');
				});

				$oe_menu.bind('mouseenter',function(){
					var $this = $(this);
					$oe_overlay.stop(true,true).fadeTo(200, 0.6);
					$this.addClass('hovered');
				}).bind('mouseleave',function(){
					var $this = $(this);
					$this.removeClass('hovered');
					$oe_overlay.stop(true,true).fadeTo(200, 0);
					$oe_menu_items.children('div').hide();
				})
            });
        </script>
        <script type="text/javascript">
   		$(document).ready(function(){

	//  Get height of all dds before hide() occurs.  Store height in heightArray, indexed based on the dd's position.
	heightArray = new Array();
	$("dl.v_show_hide dd").each(function(i) {
	  theHeight = $(this).height();
	  heightArray[i] = theHeight;
	});

	// Hide all dds
	$("dl.v_show_hide dd").hide();

	//  When a dt is clicked, 
	$("dl.v_show_hide dt").click(function () {
	  //  Based on the dt's position in the dl, retrieve a height from heightArray, and re-assign that height to the sibling dd.
	  $(this).next("dd").css({height: heightArray[$("dl.v_show_hide dt").index(this)]});
	  //  Toggle the slideVisibility of the dd directly after the clicked dt
	  $(this).next("dd").slideToggle("slow")
		//  And hide any dds that are siblings of that "just shown" dd.
		.siblings("dd").slideUp("slow");
	});

 }); </script>
<div id="container">
	<div id="right_col">
	</div>
	<div id="page_content">
	</div>
</div>
<div id="footer">
</div>

CSS File:

Code: 
/* CSS layout */
body {
	background:#000;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:15px;
	color: #fff;
	text-transform:uppercase;
	overflow-x:hidden;
	
	margin: 0;
    padding: 0;
    Background: #000 url('../images/FERTYNA.jpg') no-repeat fixed center;
   	-moz-background-size: cover;
   	background-size: cover;
   	color: #fff;
   	}
   	@media only all and (max-width: 1024px) and (max-height: 768px) { /* Important: 1024x768px has the same ratio as 1280x960px */
   	body {	
   	-moz-background-size: 1024px 768px;
   	background-size: 1024px 768px;
    		}
   			}
}
}
#masthead {
}

#top_nav {
}
.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
ul.oe_menu{
	list-style: none;
	position: relative;
	margin: 30px 0px 0px 40px;
	width: 700px;
	float: left;
	clear: both;
	table-layout: auto;
}
ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}
ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
	position: absolute;
	top: 103px;
	left: 1px;
	background: #fff;
	width: 498px;
	height: 180px;
	padding: 30px;
	display: none;
	color: #000000;
}
ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul.oe_full{
	width:100%;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}
ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}
li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

#container {
	min-width: 600px;
}

#right_col {
	width: 200px;
	float: right;
}

#page_content {
	margin-right: 100px;
}

#footer {
	clear: both;
}
 
Hi,

zunächst solltest du die Zeile im JavaScript auskommentieren, in dem die Höhe aus dem Höhenarray zugewiesen wird, da die Werte darin alle Null sind. Aus diesem Grund überlagern sich die Inhalte.
Code: 
//$(this).next("dd").css({height: heightArray[$("dl.v_show_hide dt").index(this)]});
Das CSS ergänzt du um folgende Definition. Damit wird der gewohnte Textfluss wieder hergestellt und die Inhalte erscheinen unterhalb des davor liegenden Elements.
Code: 
ul.oe_menu div dl{
  clear: both;
}
Da IEs vor Version 8 Probleme mit der Anzeige bzw. Positionierung der Definitionlist (DL) haben, wird die Definition nach dem bisherigen CSS-Bereich durch eine zusätzliche Angabe in einem bedingten Kommentar ergänzt.
Code: 
<!--[if lt IE 8]>
<style type="text/css">
ul.oe_menu div dl{
  height: 1%;
}
</style>
<![endif]-->
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück