Hilfe
Neues Thema
Antworten
geschrieben Ich bin ganz neu in diesem Forum und habe schon gleich ein Problem. Ich bin momentan an einem Webprojekt und würde sagen, dass ich mittelmässige Erfahrung in HMLT/CSS und bald von php habe.
Jetzt habe ich ein Beispiel-JavaScript-Menü aus dem Internet heruntergeladen und nach meinen wünschen angepasst. Nun möchte ich dass die Start-Buttons (grün) genau 140 * 40 px gross sind und das genau 6 mal nebeneinander (also der violette Balken sollte nicht mehr gesehen werden). Aber es geht einfach nicht. Ich habe schon x-veschiedene Sachen im CSS ausprobiert bin aber nicht vom Fleck gekommen.
Hat jemand eine Idee warum diese Buttons nicht auf diese Grösse anwachsen welche ich angebe?
(Es sollte kompatibel mit IE und FF sein).
Hier die Daten:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="cssmenu.css" />
<script type="text/javascript" src="newcssmenu.js"></script>
<title>Home</title>
</head>
<body>
<div id="mainMenu">
<ul id="menuList">
<li class="menubar">
<li><a href="#" class="starter" accesskey="1">Home</a></li>
</li>
<li class="menubar">
<li><a href="#" class="starter" accesskey="2">News</a>
<ul id="menu2" class="menu">
<li><a href="#" title="Aktuelles">Aktuelles</a></li>
<li><a href="#" title="Events">Events</a></li>
<li><a href="#" title="Jobs">Jobs</a></li>
</ul>
</li>
</li>
<li class="menubar">
<a href="#" class="starter" accesskey="3">Über uns</a>
<ul id="menu3" class="menu">
<li><a href="#" title="Firmenportrait">Firmenportrait</a>
<ul id="menu3_1" class="menu">
<li><a href="#" title="Organigramm">Organigramm</a></li>
</ul>
</li>
</li>
<li><a href="#" title="Team">Team</a>
<ul id="menu3_2" class="menu">
<li><a href="#" title="Administration">Administration</a></li>
<li><a href="#" title="Auszubildende">Auszubildende</a></li>
<li><a href="#" title="HISoft">HISoft</a></li>
<li><a href="#" title="Technik">Technik</a></li>
<li><a href="#" title="Verkauf & Beratung">Verkauf & Beratung</a></li>
</ul>
</li>
<li><a href="#" title="Partner">Partner</a>
<ul id="menu3_3" class="menu">
<li><a href="#" title="Lösungspartner">Lösungspartner</a></li>
<li><a href="#" title="Hard-/Software">Hard-/Software</a></li>
</ul>
</li>
<li><a href="#" title="Referenzen">Referenzen</a>
<ul id="menu3_4" class="menu">
<li><a href="#" title="Zahlen">Zahlen</a></li>
<li><a href="#" title="Auszug aus der Referenzliste">Auszug aus der Referenzliste</a></li>
</ul>
</li>
<li><a href="#" title="Anfahrt">Anfart</a> </li>
</li></ul>
<li class="menubar">
<li><a href="#" class="starter" accesskey="4">Lösungen</a>
<ul id="menu4" class="menu">
<li><a href="#" title="HISoft">HISoft</a>
<ul id="menu4_1" class="menu">
<li><a href="#" title="Module">Module</a></li>
<li><a href="#" title="Standardleistungen">Standardleistungen</a></li>
</ul>
</li>
<li><a href="#" title="Hardware">Hardware</a> </li>
<li><a href="#" title="Dienstleistungen">Dienstleistungen</a>
<ul id="menu4_2" class="menu">
<li><a href="#" title="Systemintegration">Systemintegration</a></li>
<li><a href="#" title="Netzwerke">Netzwerke</a></li>
<li><a href="#" title="Wartung & Support">Wartung & Support</a></li>
</ul>
</li>
</ul>
</li>
<li class="menubar">
<li><a href="#" class="starter" accesskey="5">Kundenportal</a>
<ul id="menu5" class="menu">
<li><a href="#" title="HISoft">HISoft</a>
<ul id="menu5_1" class="menu">
<li><a href="#" title="Benutzerhandbücher">Benutzerhandbücher</a></li>
<li><a href="#" title="Grundkurs">Grundkurs</a></li>
</ul>
</li>
<li><a href="#" title="Hardware">Hardware</a> </li>
<li><a href="#" title="Downloads">Downloads</a>
<ul id="menu5_2" class="menu">
<li><a href="#" title="Öffentlich">Öffentlich</a></li>
<li><a href="#" title="Intern">Intern</a></li>
</ul>
</li>
</ul>
<li class="menubar">
<li><a href="#" class="starter" accesskey="6">Kontakt</a> </li>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#mainMenu {
background-color: #993366;
margin: 144px 0 0 10px;
height: 41px;
width: 840px;
color: #ffffff;
position: relative;
text-align: left;
}
.menubar {
width: 140px;
height: 41px;
padding: 0 0 0 0
}
#menuList {
padding: 0 0 0 0
margin: 0px ;
}
#menuList UL {
padding: 0 0 0 0;
margin: 0px;
}
#menuList LI {
display: inline;
list-style-type: none;
}
A.starter {
background: #009933;
height: 41px;
width: 140px;
padding: 2px 2px 2px 2px;
text-align: center;
border: 1px solid #000000;
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
A.starter:hover {
background-color: silver;
background-color: #dc241f;
}
A.starter:active {
background-color: #dc241f;
}
.menu {
visibility: hidden;
width: 166px;
color: #ffffff;
position: absolute;
background-color: #333333;
text-align: left;
}
.menu LI A {
background-color: #0080C0;
border-bottom: #FFFFFF 1px solid;
padding: 0 0 0 0;
display: block;
font-size: 14px;
margin: 0px;
color: #FFFFFF;
line-height: 14px;
text-decoration: none;
}
.menu LI A:hover {
color: #FFFFFF;
background-color: #dc241f;
}
.menu LI A:active {
color: #ffffff;
background-color: #dc241f;
}
#menu1 {
z-index: 100;
width: 160px;
}
#menu2 {
z-index: 100;
width: 160px;
}
#menu3 {
z-index: 100;
width: 160px;
}
#menu4 {
z-index: 100;
width: 160px;
}
#menu5 {
z-index: 100;
width: 160px;
}
java script:
var currentMenu = null;
var mytimer = null;
var timerOn = false;
var opera = window.opera ? true : false;
if (!document.getElementById)
document.getElementById = function() { return null; }
function initialiseMenu(menu, starter, root) {
// var menuId = menu.attributes(0).value;
var leftstarter = false;
if (menu == null || starter == null) return;
currentMenu = menu;
starter.onmouseover = function() {
if (currentMenu) {
if (this.parentNode.parentNode!=currentMenu) {
currentMenu.style.visibility = "hidden";
}
if (this.parentNode.parentNode==root) {
tempCurrentMenu = currentMenu
while (tempCurrentMenu.parentNode.parentNode!=root) {
tempCurrentMenu.parentNode.parentNode.style.visibi
lity = "hidden";
tempCurrentMenu = tempCurrentMenu.parentNode.parentNode;
}
}
currentMenu = null;
this.showMenu();
}
}
menu.onmouseover = function() {
if (currentMenu) {
currentMenu = null;
this.showMenu();
}
}
starter.showMenu = function() {
if (!opera) {
if (this.parentNode.parentNode==root) {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetTop + this.offsetHeight + "px";
}
else {
menu.style.left = this.offsetLeft + this.offsetWidth + "px";
menu.style.top = this.offsetTop + "px";
}
}
else {
if (this.parentNode.parentNode==root) {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetHeight + "px";
}
else {
menu.style.left = this.offsetWidth + "px";
menu.style.top = this.offsetTop + "px";
}
}
menu.style.visibility = "visible";
currentMenu = menu;
}
starter.onfocus = function() {
starter.onmouseover();
}
menu.onfocus = function() {
// currentMenu.style.visibility="hidden";
}
menu.showMenu = function() {
menu.style.visibility = "visible";
currentMenu = menu;
stopTime();
}
menu.hideMenu = function() {
if (!timerOn) {
mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 2000);
timerOn = true;
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
}
}
menu.onmouseout = function(event) {
this.hideMenu();
}
starter.onmouseout = function() {
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
menu.style.visibility = "hidden";
}
}
function killMenu(menu, root) {
var menu = document.getElementById(menu);
var root = document.getElementById(root);
menu.style.visibility = "hidden";
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
while (menu.parentNode.parentNode!=root) {
menu.parentNode.parentNode.style.visibility = "hidden";
menu = menu.parentNode.parentNode;
}
stopTime();
}
function stopTime() {
if (mytimer) {
clearInterval(mytimer);
mytimer = null;
timerOn = false;
}
}
window.onload = function() {
var root = document.getElementById("menuList");
getMenus(root, root);
}
function getMenus(elementItem, root) {
var selectedItem;
var menuStarter;
var menuItem;
for (var x=0;x<elementItem.childNodes.length;x++) {
if (elementItem.childNodes[x].nodeName=="LI") {
if (elementItem.childNodes[x].getElementsByTagName("UL").length>0) {
menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
getMenus(menuItem, root);
initialiseMenu(menuItem, menuStarter, root);
}
}
}
}
Ich bin sehr froh auf schnelle Hilfe.
Freundliche Grüsse
slim-design
Nach oben
geschrieben 
