Hallo liebe User!
Ich habe ein Problem. Ich habe ein Html File und ein css file. Wenn ich das html file aufrufe ohne css, dann passt alles, mit dem CSS File sieht zwar alles so aus wie es soll aber die Funktion mit dem aufklappen und dem runtergehen funtinier nicht richtig, auch die Formatierung passt nicht, bin Anfänger und sehr verzweifelt. Bitte Bitte um Hilfe!
Liebe Grüße
Moby
CSS File mit dem was nicht stimmt!
Ich habe ein Problem. Ich habe ein Html File und ein css file. Wenn ich das html file aufrufe ohne css, dann passt alles, mit dem CSS File sieht zwar alles so aus wie es soll aber die Funktion mit dem aufklappen und dem runtergehen funtinier nicht richtig, auch die Formatierung passt nicht, bin Anfänger und sehr verzweifelt. Bitte Bitte um Hilfe!
Liebe Grüße
Moby
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 mit dem was nicht stimmt!
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;
}
![Junkee[]](/data/avatars/m/26/26576.jpg?1671603977){kind=avatar}