Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 05.11.2007, 01:59
Mathao Mathao ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 29
Mathao zeigte ein beschämendes Verhalten in der Vergangenheit
Standard Anfänger sucht Hilfe und Erfahrung bei Dropdown Menü

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>

Geändert von Mathao (05.11.2007 um 02:07 Uhr)
Mit Zitat antworten
Sponsored Links