@sheel, entschuldigung, aber wenn sich was gravierendes ändert, darf man schon, oder?
Hallo an alle, danke für eure Hilfe,
Nun gibt es wirklich nur noch 2 Dinge auf die ich einfach nicht hinbekomme:
Internet Explorer:
Alles funktioniert, bis auf wenn man im Menü Willkommen -> auf Wer ist Test GmbH klickt, sich das versteckte Fenster öffnet, ist das nächste Untermenü zu nahe wird vom Fenster teilweise verdeckt.
Firefox: die größe des Containers pass sich nicht der größe des Textes an, bis auf im Menü Willkommen, da past alles bis auf, das was ich oben schon geschrieben habe.
Safari: das selbe wie bei Firefox!
Wenn ich nun ul.oe_menu div so umstelle das die größe aller Containers funktioniert mit mind-height= 170px; dann ist in allen Browsern alles in Ordnung. Nur im Menü willkommen, sind die Abstände , wenn die Fenster durch klick auf die Untermenüs ausgeklappt sind mit einem Abstand von 180px entfernt.
Wie trenne ich die beiden von einander anscheinend abhängigen Werte und was muss ich machen, um die Untermenüs bei ausgeklappten Content das u Untermenü nicht teilweise verdecken.
Herr kkapsner, oder irgend ein Lieber User bitte um Hilfe!
Vielen Dank
akrenn
CSS
Hallo an alle, danke für eure Hilfe,
Nun gibt es wirklich nur noch 2 Dinge auf die ich einfach nicht hinbekomme:
Internet Explorer:
Alles funktioniert, bis auf wenn man im Menü Willkommen -> auf Wer ist Test GmbH klickt, sich das versteckte Fenster öffnet, ist das nächste Untermenü zu nahe wird vom Fenster teilweise verdeckt.
Firefox: die größe des Containers pass sich nicht der größe des Textes an, bis auf im Menü Willkommen, da past alles bis auf, das was ich oben schon geschrieben habe.
Safari: das selbe wie bei Firefox!
Wenn ich nun ul.oe_menu div so umstelle das die größe aller Containers funktioniert mit mind-height= 170px; dann ist in allen Browsern alles in Ordnung. Nur im Menü willkommen, sind die Abstände , wenn die Fenster durch klick auf die Untermenüs ausgeklappt sind mit einem Abstand von 180px entfernt.
Wie trenne ich die beiden von einander anscheinend abhängigen Werte und was muss ich machen, um die Untermenüs bei ausgeklappten Content das u Untermenü nicht teilweise verdecken.
Herr kkapsner, oder irgend ein Lieber User bitte um Hilfe!
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">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="file:///C:/Users/akrenn/Desktop/jquery.min.js"></script>
<script type="text/javascript" src="file:///C:/Users/akrenn/Desktop/jquery-ui.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();
})
});
$(document).ready( function() {
$('.toggle_container').hide();
$('.trigger_active').next('.toggle_container').show();
$('.trigger').click( function() {
if ( $(this).hasClass('trigger_active') ) {
$(this).next('.toggle_container').slideToggle('slow');
$(this).removeClass('trigger_active');
} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');
$(this).next('.toggle_container').slideToggle('slow');
$(this).addClass('trigger_active');
};
return false;
});
});
</script>
</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><br><br><br>
<p class="trigger">Wer ist die Test GmbH</p>
<div class="toggle_container">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<p class="trigger">Was macht die Test Gmbh</p>
<div class="toggle_container">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<p class="trigger"> Titel zu Thema</p>
<div style="display: none;" class="toggle_container">
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
</div>
</div>
<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 id="container">
<div id="right_col"></div>
<div id="page_content"> </div>
</div>
<div id="footer"></div>
</body>
</html>CSS
Code:
/* CSS layout */
body {
background:#000;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:15px;
color: #fff;
text-transform:uppercase;
overflow-x:hidden;
}
#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:560px;
float:left;
clear:both;
}
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: relative;
top: 0px;
left: 1px;
background: #fff;
width: 498px;
height: 180px;
padding: 30px;
display: none;
color: #222;
font-size: 11px;
text-decoration: none;
}
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;
color: #222;
font-size: 11px;
text-decoration: none;
font-weight: normal;
}
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}
.trigger {
color: #222;
padding: 5px 10px;
margin-top: -10px;
margin-bottom: 5px;
margin-left: 35px;
background-repeat: no-repeat;
font-size: 12px;
text-decoration: none;
}
.trigger:hover {
background-position: 0px -22px;
background:#000;
color:#fff;
}
.trigger_active {
color: #FFF;
background-color: #000000;
}
.toggle_container {
width: 300px;
margin-left:-31px;
}
.toggle_container p {
padding: 9px 9px 9px 9px;
border-left: 1px dashed #CCC;
border-right: 1px dashed #CCC;
border-bottom: 1px dashed #CCC;
font-size: 11px;
margin-left:35px;
margin-top: -30px;
margin-bottom: -20px;
}
.toggle_container img {
float: left;
padding: 2px;
border: 3px solid #333;
margin: 3px 10px 0px 0px;
}
.toggle_container img:hover {
float: left;
padding: 2px;
border: 3px solid #C00;
margin: 3px 10px 0px 0px;
}
#container {
min-width: 600px;
}
#right_col {
width: 200px;
float: right;
}
#page_content {
margin-right: 200px;
}
#footer {
clear: both;
}
Zuletzt bearbeitet:
