Nicht mehr ganz neu hier
Hi leute habn problem erstmal der Code:
index.htm:
--
default.css
--
dropdown.js
Problem ist sichtbar wenn man auf den Navigationspunkt Leistung geht, die li's sind zu klein und ich bekomms nicht hin das nur die li's des untermenus breiter werden auf ca. 180px
evtl. kann ja jemand helfen.
index.htm:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xthml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml1" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="title" content="Eisbehandlung" />
<meta name="author" content="Administrator" />
<meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>test</title>
<script type="text/javascript" src="/4d/guette_neu/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/4d/guette_neu/media/system/js/caption.js"></script>
<link rel="stylesheet" href=css/joomla.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/joomla-ie6.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" language="javascript" src="js/dropdown.js"></script>
</head>
<body>
<div id="container">
<h1 id="header">h1</h1>
<div id="navigation">
<div id="navheight">
<div class="moduletable">
<ul class="menu"><li class="parent item3"><a href="http://localhost/4d/guette_neu/"><span>Praxis</span></a><ul><li class="item14"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=3&Itemid=14"><span>Geschichte</span></a></li><li class="item15"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=4&Itemid=15"><span>Persönliche Note</span></a></li><li class="item16"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=5&Itemid=16"><span>Therapiespektrum</span></a></li><li class="item17"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=6&Itemid=17"><span>Entspannungsangebot</span></a></li><li class="item18"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=7&Itemid=18"><span>Praxisräume</span></a></li></ul></li><li class="parent active item8"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=1&Itemid=8"><span>Leistung</span></a><ul><li class="item19"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=8&Itemid=19"><span>Atemterapie</span></a></li><li class="item20"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=9&Itemid=20"><span>Bewegungstherapie</span></a></li><li class="item21"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=10&Itemid=21"><span>Bindegewebsmassage</span></a></li><li class="item22"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=11&Itemid=22"><span>Bobath - Methode</span></a></li><li class="item23"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=12&Itemid=23"><span>Brügger - Therapie</span></a></li><li class="item24"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=13&Itemid=24"><span>Cyriax - Therapie</span></a></li><li id="current" class="active item25"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=14&Itemid=25"><span>Eisbehandlung</span></a></li><li class="item26"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=15&Itemid=26"><span>Elektrotherapie - Übersicht</span></a></li><li class="item27"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=16&Itemid=27"><span>Entstauungstherapie</span></a></li><li class="item28"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=17&Itemid=28"><span>Inhalationstherapie</span></a></li><li class="item29"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=18&Itemid=29"><span>Kurzwellentherapie</span></a></li><li class="item30"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=19&Itemid=30"><span>Lymphdrainage, manuell</span></a></li><li class="item31"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=20&Itemid=31"><span>Manuelle Therapie</span></a></li><li class="item32"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=21&Itemid=32"><span>Massage</span></a></li><li class="item33"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=22&Itemid=33"><span>Infrarottherapie</span></a></li><li class="item34"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=23&Itemid=34"><span>PNF - Techniken</span></a></li><li class="item35"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=24&Itemid=35"><span>Schlingengeräte- behandlung</span></a></li><li class="item36"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=25&Itemid=36"><span>Trainingstheraphie- medizinisch</span></a></li><li class="item37"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=26&Itemid=37"><span>Traktionsbehandlung</span></a></li><li class="item38"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=27&Itemid=38"><span>Wärmetherapie mit Fangopackung</span></a></li><li class="item39"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=28&Itemid=39"><span>Yoga - Therapie</span></a></li><li class="item40"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=29&Itemid=40"><span>Moxen</span></a></li><li class="item41"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=30&Itemid=41"><span>Kinesio Taping</span></a></li><li class="item42"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=31&Itemid=42"><span>Trigger</span></a></li></ul></li><li class="item9"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=1&Itemid=9"><span>Kurse</span></a></li><li class="item10"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=1&Itemid=10"><span>Hinweise</span></a></li><li class="item11"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=1&Itemid=11"><span>Mitarbeiter</span></a></li><li class="item12"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=1&Itemid=12"><span>Gutscheine</span></a></li><li class="item13"><a href="/4d/guette_neu/index.php?option=com_content&view=article&id=1&Itemid=13"><span>Kontakt</span></a></li></ul> </div>
</div>
</div><!-- EOF navigation -->
<div id="content">
<div id="mainContent">
<div class="joomla ">
<div class="article">
<div class="headline">
<h1 class="title">
Eisbehandlung </h1>
</div>
<p>Inhalt</p>
</div>
</div>
</div><!-- EOF mainContent -->
</div><!-- EOF content -->
<div id="footer"> </div><!-- EOF footer -->
</div>
</body>
</html>default.css
Code:
/************************************************************************
* RESET
************************************************************************/
* html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
/************************************************************************
* GRUNDGERÜST
************************************************************************/
html {width: 100%; height: 100%; background: #212953}
body {
width: 100%;
height: 100%;
font-family: Arial;
}
#container {
width: 800px;
height: 100%;
margin: 0 auto;
}
h1#header {
background: url(../images/header.jpg) no-repeat;
width: 800px;
height: 176px;
text-indent: -9999px;
}
div#navigation {
background: url("../images/navigation.jpg") no-repeat;
width: 800px;
height: 39px;
}
div#content {
background: url("../images/content.jpg") no-repeat;
width: 800px;
height: 570px;
padding-top: 10px;
}
div#footer {
background: url("../images/footer.jpg") no-repeat;
width: 800px;
height: 41px;
}
/************************************************************************
* NAVIGATION
************************************************************************/
/*
LEVEL ONE
*/
ul.menu li { list-style: none; }
ul.menu { position: absolute; width: 690px; height: 50px; margin-left: 56px; }
ul.menu li { font-weight: bold; float: left; background: #ccc; position: relative; }
ul.menu a:hover { color: #000; }
ul.menu li a { display: block; padding: 1em 2em; color: #222; z-index: 2000; }
ul.menu li a:hover,
ul.menu li a.hover { background: #F3D673; position: relative; display: block; }
/*
LEVEL TWO
*/
ul.menu li ul { display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; margin: 0; padding: 0;}
ul.menu li ul li { float: none; width: 180px; font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; }
ul.menu li ul li a { float: none; }
ul.menu ul li a { display: block; width: 180px; background: #eee !important; }
ul.menu ul li a:hover { display: block; background: #F3D673 !important; }
.menu li:hover > ul li {
border-bottom: 1px solid #b3b9c5;
border-top: 1px solid #c8cfdb;
}
/************************************************************************
* Content
************************************************************************/
#mainContent {
width: 625px;
height: 488px;
overflow: auto;
margin: 0 auto;
padding: 0 20px 0 0px;
margin-top: 11px;
}
/************************************************************************
* Content Text
************************************************************************/
a:link {
font-size: 12px;
font-weight: bold;
color: #009440;
text-decoration: underline;
}
a:visited {
font-size: 12px;
font-weight: bold;
color: #009440;
text-decoration: underline
}
a:hover {
font-size: 12px;
font-weight: bold;
color: #181818;
text-decoration: underline
}
a:active {
font-size: 12px;
font-weight: bold;
color: #009440;
text-decoration: underline
}
a:focus {
font-size:12px;
font-weight: bold;
color: White;
text-decoration: underline
}
a.mail {
font-family: Verdana;
font-size: 12px;
color: White;
text-decoration: underline
}
p{
font-size : 14px;
}
table{
font-size : 14px;
}dropdown.js
Code:
var maxHeight = 400;
$(function(){
$(".menu > li").hover(function() {
var $container = $(this),
$list = $container.find("ul"),
$anchor = $container.find("a"),
height = $list.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller
// need to save height here so it can revert on mouseout
$container.data("origHeight", $container.height());
// so it can retain it's rollover color all the while the dropdown is open
$anchor.addClass("hover");
// make sure dropdown appears directly below parent list item
$list
.show()
.css({
marginTop: $container.data("origHeight")
});
// don't do any animation if list shorter than max
if (multiplier > 1) {
$container
.css({
height: maxHeight,
overflow: "hidden"
})
.mousemove(function(e) {
var offset = $container.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
if (relativeY > $container.data("origHeight")) {
$list.css("top", -relativeY + $container.data("origHeight"));
};
});
}
}, function() {
var $el = $(this);
// put things back to normal
$el
.height($(this).data("origHeight"))
.find("ul")
.css({ top: 0 })
.hide()
.end()
.find("a")
.removeClass("hover");
});
// Add down arrow only to menu items with submenus
$(".dropdown > li:has('ul')").each(function() {
$(this).find("a:first").append("<img src='down-arrow.png' />");
});
});evtl. kann ja jemand helfen.
