Anfänger sucht Hilfe und Erfahrung bei Dropdown Menü

Mathao · #1 (**permalink**) 05.11.2007, 00:59

Hallo, wie ihr sicher seht, ist dies mein erster Post in diesem Forum, also zerreisst mich bitte nicht gleich in der Luft, falls die Suchfunktion mir eventuell helfen hätte können oder meine Fragen einfach nur doof sind

.
Ich habe mit css ungefähr vor 2 Tagen angefangen und versucht mir ein dropdown Menü mit Hilfe von csspplay zu basteln.
Das Dropdownmenü funktioniert wegen "hover" natürlich nicht mit dem IE, so habe ich mir bei "son of suckerfish" das Tutorial angeschaut und versucht es an meine css_File anzupassen.
Meine Kenntnisse über Javascript reichen von gar nichts bis nichts, also ist es mir eigentlich unmöglich das Javascript in kürzer Zeit an meine css_File anzupassen.
Ich würde mich nun sehr freuen, falls sich hier jemand erbarmen würde mir zu helfen und vielleicht das Javascript von "son of suckerfish" an meine css_File anpasst. Entschuldigt die vielleicht dreiste Frage.
Darüber hinaus funktioniert der margin: auto Befehl im IE nicht korrekt, vielleicht hat auch hier jemand Rat.

Weiterhin würde ich gerne wissen ob der Code vielleicht etwas umständlich ist und man alles viel leichter hätte machen können. Sprich ist die Qualität des Codes soweit in Ordnung? Vielleicht hat hier noch jemand gute Tipps bei der Entwicklung einer Homepage. Ich bin wirklich für jeden Rat sehr dankbar.
In diesem Sinne vielen Dank für eure Hilfe, vielleicht fühlt sich hier jemand dazu berufen

Code:

/************** HTML Code **************/

<head>
<link rel="stylesheet" type="text/css" href="css/dropdown.css" />
<title>Homepage</title>
</head>


<body>

<table id="Tabelle">
  <tr>
    <td><img id="DieterLogo" src="css/DieterLogo.jpg" alt="'####"></td>
  </tr>
</table>


<table id="Tabelle2" name="Tabelle2">
  <tr>
    <td><div class="menu">

<ul>
<li><a href="#">News</a>



	<ul>
	<li><a href="#">aktuelle News</a></li>
	<li><a href="#">News Archiv</a></li>
	</ul>
</li>

<li><a  href="#">Biographie</a></li>

<li><a  href="#" id="Aus">Ausstellungen</a>
	<ul>
	<li><a href="#" id="Aus1">aktuelle Ausstellungen</a></li>
	<li><a href="#" id="Aus2">bisherige Ausstellungen</a></li>
	</ul>
</li>



<li><a href="#">Galerie</a>
	<ul>
	<li><a href="#" >Galerie 1</a></li>
	<li><a href="#" >Galerie 2</a></li>
	<li><a href="#" >Galerie 3</a></li>
	<li><a href="#" >Galerie 4</a></li>
	<li><a href="#" >Galerie 5</a></li>
	<li><a href="#" >Galerie 6</a></li>
	<li><a href="#" >Galerie 7</a></li>
	</ul>
</li>


<li><a href="#">Gästebuch</a></li>



<li><a href="#">Kontakt</a></li>
</ul>
</div> </td>
  </tr>
</table>

</body>
</html>


/***************** CSS Code ***************/


#Tabelle {
width : 720px;
position: absolute;
top: 7px;
margin : auto ;
}




#Tabelle2 {
	position : relative;
	top : 99px;
	margin : auto ;
	
}


body {
  background-color: #222324;
  background-image: url("NaviHintergrund.jpg");
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: 0px 100px;
  
}


.menu {font-family: arial, sans-serif; width:770px; height:10px; position:relative; font-size:10px; z-index:100; margin : auto ; }
.menu ul li a, .menu ul li a:visited { position:relative; display:block; text-decoration:none; color:#ffffff; width:120px; height:15px; text-align:center; color:#ffffff; background:#545759; line-height:16px; font-size:10px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:ansolute; top: 100px ; left: 100px;}
.menu ul li ul {display: none;}
.menu ul li:hover a {   color: #ffffff; background: #aaabac; height : 15px;}
.menu ul li:hover ul {  display:block; position:relative;  width:100px; }
.menu ul li:hover #Aus1 {display:block; position:relative;  width:120px; }
.menu ul li:hover #Aus2 {display:block; position:relative;  width:120px; }
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a { display:block; background:#545759;  color:#ffffff; width: 120px; height : 15px; }
.menu ul li:hover ul li a:hover {background:#aaabac; color:#ffffff;}


/***************** JavaScript Code von Son of Suckerfish ***************/

<script language="JavaScript">
<!--
sfHover = function() {
	var sfEls = document.getElementById("navi").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//-->
</script>

Paul Kleinhans · #2 (**permalink**) 05.11.2007, 01:37

Hier findest du das lauffähige Beispiel online

Code:

<!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" />
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="screen.css" />
<script type="text/javascript" src="dropdown.js"></script>
</head>
<body>
<h1 id="logo"><a href="index.html">Dieter Hoffmann Fotografie</a></h1>
<div id="navbar">
  <ul id="nav">
    <li><a href="#">News</a>
      <ul>
        <li><a href="#">aktuelle News</a></li>
        <li><a href="#">News Archiv</a></li>
      </ul>
    </li>
    <li><a href="#">Biographie</a></li>
    <li><a href="#">Ausstellungen</a>
      <ul>
        <li><a href="#">aktuelle Ausstellungen</a></li>
        <li><a href="#">bisherige Ausstellungen</a></li>
      </ul>
    </li>
    <li><a href="#">Galerie</a>
      <ul>
        <li><a href="#">Galerie 1</a></li>
        <li><a href="#" >Galerie 2</a></li>
        <li><a href="#" >Galerie 3</a></li>
        <li><a href="#" >Galerie 4</a></li>
        <li><a href="#" >Galerie 5</a></li>
        <li><a href="#" >Galerie 6</a></li>
        <li><a href="#" >Galerie 7</a></li>
      </ul>
    </li>
    <li><a href="#">Gästebuch</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</div>
</body>
</html>

Code:

* {
	margin:0;
	padding:0;
}
body {
	background-color: #222325;
	font-family: arial, sans-serif;
	font-size:62.5%;
}
#logo {
	background: url(img/logo.gif) no-repeat;
	width:400px; /* Breite deines Logos*/
	height:75px; /* Höhe deines Logos*/
}
#logo a {
	display:block;
	text-indent:-10000px;
	width:400px; /* Breite deines Logos*/
	height:75px; /* Höhe deines Logos*/
}
#navbar {
	width:100%;
	background: url(img/header-bg.gif) repeat-x;
	margin:50px auto;
	height:4.1em;
	padding-top:13px;
}
#nav, #nav ul { /* all lists */
	list-style: none;
	margin:0px auto;
	width:62em;
}
#nav a {
	display: block;
	color:#fff;
	text-decoration:none;
	font-size:1.1em;
	text-align:center;
}
#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li a { /* second-level lists */
	background: #53575a;
}
#nav li a:hover { /* second-level lists */
	background:#ababad;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

Code:

<!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

Edit: Code wurde aktualisiert

Mathao · #3 (**permalink**) 05.11.2007, 02:06

Danke für deine Hilfe Paul Kleinhans, aber leider sieht die Version, die ich in meinem ersten Post gepostet habe nicht ganz so aus, wie die lauffähige Version in deinem Link. Vielleicht könntest du dir bei Gelegenheit die Unterschiede anschauen. Als ersten Unterschied fällt mir spontan auf, dass beim MouseOver die einzelnen Menüpunkte sich nicht fäben. Dann schiebt sich "bisherige Ausstellungen" in die nächste Zeile und die Links sind nicht zentriert.

Ich glaube das wären diese zeilen code, die komplett fehlen

Code:

.menu ul li:hover a {   color: #ffffff; background: #aaabac; height : 15px;}
.menu ul li:hover ul li a:hover {background:#aaabac; color:#ffffff;}
.menu ul li:hover #Aus1 {display:block; position:relative;  width:120px; }
.menu ul li:hover #Aus2 {display:block; position:relative;  width:120px; }

EDIT : Ka, was du gemacht hast, aber es funktioniert wunderbar, ich danke dir vielmals und hoffe es war nicht zu viel Arbeit. Danke schön

Mathao · #4 (**permalink**) 06.11.2007, 02:20

Hallo zusammen,
als erstes entschuldigt den Doppelpost. Nachdem mir der Paul so gut geholfen hat, hänge ich wieder an ein paar Kleinigkeiten. Ich habe die Höhe meiner Navigation auf 18px erhöht, damit sie ohne Probleme in das Hintergrundbild passt (siehe oben im Post von Paul die lauffähige Version, hier ist die Navi noch einen Pixel zu klein).
Meine Frage nun wäre, wie kann ich den Text, der in der Navi steht, sprich News, Austellungen und co. so zentrieren, dass er genau wieder in der Mitte ( oben, unten, links und rechts ) ist, sowohl beim MouseOver Effekt, als auch beim Standart Effekt. Nachdem ich die Navi um ein paar Pixel vergrößert habe, passte das sich nicht mehr so gut ( Nur der Text).
Danke für eure Antworten und Mühen

.
MfG Mathao

EDIT : Hat sich alles erledigt, bis auf die Tatsache mit der Navivergrößerung und der Zentrierung.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe beim Dropdown Menü	julianmeier	CSS	4	15.09.2010 11:12
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
DropDown Menü verschwindet	andre-ne	CSS	2	18.11.2009 10:44
Ich brauche Hilfe (Dropdown Menü)	Antimaterie	CSS	2	06.11.2009 11:10
[CSS] Dropdown Menü - Hilfe!	slein	CSS	0	06.01.2008 14:48