zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anfänger sucht Hilfe und Erfahrung bei Dropdown Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.11.2007, 00:59
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 01:07 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.11.2007, 01:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 21.11.2006
Beiträge: 126
Paul Kleinhans wird schon bald berühmt werden
Standard

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

Geändert von Paul Kleinhans (05.11.2007 um 18:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.11.2007, 02:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 29
Mathao zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

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

Geändert von Mathao (07.11.2007 um 14:10 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 06.11.2007, 02:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2007
Beiträge: 29
Mathao zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

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.

Geändert von Mathao (07.11.2007 um 10:35 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:59 Uhr.