zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drop Down Menu Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.05.2012, 15:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2011
Beiträge: 30
arosarius befindet sich auf einem aufstrebenden Ast
Standard Drop Down Menu Problem

Liebe Community,

nach langer Zeit habe ich mich mal wieder an CSS / HTML getraut und komme in folgendem Problemfall einfach nicht weiter. Ich denke der HTML teil ist soweit in Ordnung. Ich schaffe es nur leider nicht den "DropDown" Effekt zum laufen zu kriegen. Ich würde mich freuen wenn ihr mir helfen könntet das Teil ans laufen zu bekommen!

Vielen vielen Dank im Vorraus.

Wenn ihr sonst irgendeinen Mist in dem CSS/HTML teil findet - Ich bin für jede kontruktive Kritik offen!!!




HTML-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>
<link rel="stylesheet" type="text/css" href="k3.css">
<title>TITEL</title>
</head>

<body>

<div id="mainframe">
	<div id="headerframe">
		<div id="headerl">
		</div>
		<div id="headerr">
		</div>
    </div>
    <div id="nav">
    <ul>
		<li><a href="#" class="mlink">Home</a></li>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
	</ul>
    </div>
    <div id="inhalt">
    </div>
    <div id="footer">
    </div>    
</div>    
</body>
</html>

Code:
#mainframe {
	margin: auto;
	padding: 0;
	width: 800px;
}

body {
	font:Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #fff;
}

#headerframe {
	width: 800px;
	margin: 0;
	padding: 0;
}

#headerl {
	 background-image: url(cut100130.jpg);
	 height: 100px;
	 width: 130px;
	 margin: 0;
	 padding: 0;
	 float: left;
 }
 #headerr {
	 width: 670px;
	 height: 100px;
	 float: right;
	 background-color: #fff;
 }
 #nav {
	margin: 0;
	height: 25px;
	width: 800px;
	float: left;
	background-repeat:repeat-x;
	padding: 0;
	border-top-width: 2px;
	border-top-color: #006;
	border-top-style: solid;
	
}
.mlink {
	text-decoration: none;
	text-transform: capitalize;
	font-size:12px;
	font-family: Century Gothic;
	color: #006;
	list-style: none;
}
.link {
	color: #000;
		text-decoration: none;
	text-transform:uppercase;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	list-style: none;
}	
#nav ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav ul li {
	display: block;
	line-height: 25px;
	text-align: center;
	margin: auto;
	padding: 0;
	width: 80px;
	background-color: #DDF;
}
#nav ul li:hover {
	display: block;
	line-height: 25px;
	text-align: center;
	background-color: #006;
	margin: auto;
	padding: 0;
	width: 80px;	
}
#nav ul li:hover .mlink {
	color: #FFF;
}

	
#nav ul ul li {
	display: block;
	line-height: 25px;
	text-align: center;
	background-color: #ddf;
	margin: auto;
	padding: 0;
	width: 80px;
}

#nav ul ul
{
	visibility: hidden;
}

#nav ul li:hover ul {
	visibility: visible;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.05.2012, 15:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von arosarius Beitrag anzeigen
Ich denke der HTML teil ist soweit in Ordnung.
Nein, ist er nicht. Warum validierst du nicht?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.05.2012, 16:04
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallo,

zuerst einmal solltest du die zusammengehörigen Listeneinträge und Listen ineinander verschachteln, denn so kannst du sie mittels deines Selektors "#nav ul li:hover ul" auch problemlos selektieren:
Code:
<ul>
   <li>
      <a href="#">Home</a>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>
Außerdem solltest du, statt der Eigenschaft visibility (hidden/ visible), die Eigenschaft display (none/ block) zum ein- und ausblenden der Elemente nutzen. Die Eigenschaft visibility birgt, wenn man sie auf 'hidden' setzt, nämlich das Problem, dass das Element zwar nicht mehr sichtbar ist, der Platz allerdings trotzdem eingenommen wird. Ich denke nicht, dass das für deine Navigation von Nutzen ist.

Optional kannst du die Klassen "mlink" und "link" auch mit einem "display: block" versehen. Das hat den netten Effekt, dass der Link sich über die gesamte Breite des umschließenden Elementes erstreckt.

PS: Ich habe hier ein ganz nettes Tutorial zum Thema Dropdown Menüs gefunden. Das wird dir sicherlich weiterhelfen:

- CSS3 Dropdown Menu

Gruß, lotti.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

Geändert von lottikarotti (02.05.2012 um 16:17 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 02.05.2012, 17:11
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von lottikarotti Beitrag anzeigen
Außerdem solltest du, statt der Eigenschaft visibility (hidden/ visible), die Eigenschaft display (none/ block) zum ein- und ausblenden der Elemente nutzen.
diese Art des Ein/Ausblendens von Subnavis ist ausgesprochen ungeeignet, weil die Screenreader solche Elemente nicht mehr vorlesen.
Aus demselben Grund ist auch das verlinkte Tut imho unbrauchbar.

Man kann die Subliste per position:absolute und left:-9999px ausblenden und durch das hovern mit left:auto wieder einblenden.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (02.05.2012 um 17:14 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 02.05.2012, 17:43
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
diese Art des Ein/Ausblendens von Subnavis ist ausgesprochen ungeeignet, weil die Screenreader solche Elemente nicht mehr vorlesen.
Aus demselben Grund ist auch das verlinkte Tut imho unbrauchbar.
Hallo,

nicht immer ist die Barrierefreiheit Teil der Anforderungen, weshalb die von mir genannte Lösung und das verlinkte Tutorial nicht grundsätzlich unbrauchbar sind. Ich persönlich finde die Lösung über die display-Eigenschaft "schöner", denn ich will das Element ausblenden und nicht verschieben.

Gruß, lotti.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #6 (permalink)  
Alt 02.05.2012, 19:21
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von lottikarotti Beitrag anzeigen
Hallo,
nicht immer ist die Barrierefreiheit Teil der Anforderungen, weshalb die von mir genannte Lösung und das verlinkte Tutorial nicht grundsätzlich unbrauchbar sind. Ich persönlich finde die Lösung über die display-Eigenschaft "schöner", denn ich will das Element ausblenden und nicht verschieben.
hier geht es nicht um schöner oder nicht sondern darum ob behinderte Mitmenschen ohne Not ausgegrenzt werden.
Ich kann mir offengestanden auch nicht vorstellen dass der Aufbau von Barrieren Teil der Anforderungen sein soll.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 02.05.2012, 19:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2011
Beiträge: 30
arosarius befindet sich auf einem aufstrebenden Ast
Standard vielen dank + neues problem

Vielen lieben dank für die schnelle Hilfe! Wie so oft folgt auf ein grade gelöstes Problem schnell ein neues! Mein Dropdownmenu wird im Firefoxbrower nicht korrekt angezeigt. Das ganze sieht wie folgt aus:


https://rapidshare.com/files/129280627/fsfsfsfsf.jpg


HTML-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>
<link rel="stylesheet" type="text/css" href="kontakt.css">
<title>K3 - Real Estate</title>
</head>

<body>

<div id="mainframe">
	<div id="headerframe">
		<div id="headerl">
		</div>
    </div>
    <div id="nav">
    <ul>
		<li><a href="#" class="mlink">Home</a>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
        </li>
        <li><a href="#" class="mlink">Wir</a>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
        </li>
        <li><a href="#" class="mlink">Immobilien</a>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
        </li>
        <li><a href="#" class="mlink">Beratung</a>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
        </li>
        <li><a href="#" class="mlink">Kontakt</a>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
        </li>
        <li><a href="#" class="mlink">Datenschutz</a>
		<ul>
		<li><a href="#" class="link">Link 1</a></li>
		<li><a href="#" class="link">Link 2</a></li>
		<li><a href="#" class="link">Link 3</a></li>
		<li><a href="#" class="link">Link 4</a></li>
		<li><a href="#" class="link">Link 5</a></li>
		</ul>
        </li>
	</ul>
    </div>
    <div id="inhalt">
    <div id="ilinks">
    
        <iframe width="330" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=k%C3%B6ln+heumarkt&amp;aq=&amp;sll=51.151786,10.415039&amp;sspn=14.653642,43.286133&amp;ie=UTF8&amp;hq=&amp;hnear=Heumarkt,+50667+K%C3%B6ln,+Nordrhein-Westfalen&amp;t=m&amp;ll=50.936147,6.960182&amp;spn=0.016227,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.de/maps?f=q&amp;source=embed&amp;hl=de&amp;geocode=&amp;q=k%C3%B6ln+heumarkt&amp;aq=&amp;sll=51.151786,10.415039&amp;sspn=14.653642,43.286133&amp;ie=UTF8&amp;hq=&amp;hnear=Heumarkt,+50667+K%C3%B6ln,+Nordrhein-Westfalen&amp;t=m&amp;ll=50.936147,6.960182&amp;spn=0.016227,0.025749&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small>
    
    
    
    
    </div>
    <div id="irechts">
      <p class="kontakth">Kontakt:</p>
      <p class="kontakth1">&nbsp;</p>
      <p class="kontakth1">XXXXXXXXXXXXXXXXXX GmbH</p>
      <p class="kontakth2">&nbsp;</p>
      <p class="kontakth2">XXXXXXXXXXXXXstr 42
      </p>
      <p class="kontakth2">50966 Köln
        
     </p>
      <p class="kontakth2">&nbsp;</p>
      <p class="kontakth2">Tel.: +49 221 XXXXXXXX</p>
      <p class="kontakth2">Fax: +49 221 XXXXXXXX </p>
<p class="kontakth2">&nbsp;</p>
<p class="kontakth2">E-Mail: welcome(at)XXXXXXXXX.de</a></p>
      <p class="kontakth2"> Internet: www.XXXXXXXXX.de </p>
      <div id="kf">
      <br />
      <br />

<form action="#index" method="post">

<input type="text" name="name" value="Name" onBlur="if (this.value == '') this.value='Name'" onFocus="if (this.value == 'Name') this.value='';" size="15"><br>

<input type="text" name="vorname" value="Vorname" onBlur="if (this.value == '') this.value='Vorname'" onFocus="if (this.value == 'Vorname') this.value='';" size="15"><br>

<input type="text" name="email"" value="Email" onBlur="if (this.value == '') this.value='Email'" onFocus="if (this.value == 'Email') this.value='';" size="15"><br><br>

<textarea style="background-color:#DDF
; color: #000000; width: 310px; border: solid 1px #ffffff;"  rows="7" cols="70" class="textfeld" name="comment" value="Kommentar" onBlur="if (this.value == '') this.value='Kommentar'" onFocus="if (this.value == 'Kommentar') this.value='';" ></textarea>
<input type="submit" value="Send" style="background-color:#ffffff; color: #000000; border: none; border-style:none;"/>
                </form>
                </div>

    </div>
    <div id="iunten">
    </div>
    </div>
    <div id="footer">
    
    <a href="#" class="footer">AGB</a>
    <a href="#"  class="footer">Impressum</a>
    <a href="#"  class="footer">Datenschutz</a>
    
    </div>    
</div>    
</body>
</html>

Code:
#mainframe {
	margin: auto;
	padding: 0;
	width: 800px;
}

body {
	font:Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #fff;
}

#headerframe {
	width: 800px;
	margin: 0;
	padding: 0;
}

#headerl {
	 background-image: url(k3_thin_3_flipGC.jpg);
	 height: 200px;
	 width: 196px;
	 margin: auto;
	 padding: 0;
	 
 }
 #nav {
	margin: 0;
	height: 25px;
	width: 800px;
	float: left;
	padding: 0;
	border-top-width: 2px;
	border-top-color: #006;
	border-top-style: solid;
	
}
.mlink {
	text-decoration: none;
	text-transform: capitalize;
	font-size:12px;
	font-family: Century Gothic;
	color: #006;
	list-style: none;
	display: block;
}
.link {
	color: #fff;
		text-decoration: none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	list-style: none;
	display: block;
}	
#nav ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav ul li {
	display: block;
	line-height: 25px;
	text-align: center;
	margin: auto;
	padding: 0;
	width: 80px;
	background-color: #DDF;
	float: left;
}
#nav ul li:hover {
	display: block;
	line-height: 25px;
	text-align: center;
	background-color: #006;
	margin: auto;
	padding: 0;
	width: 80px;	
}
#nav ul li:hover .mlink {
	color: #FFF;
}

	
#nav ul ul li {
	line-height: 25px;
	text-align: center;
	background-color: #ddf;
	margin: auto;
	padding: 0;
	width: 80px;

}

#nav ul li ul
{
	display: none;
}

#nav ul li:hover ul {
	display: block;
}

#nav ul ul li:hover {
	background-color: #AEAEFF;;
	width: 80px;
}

	 
	 #inhalt
	 {
		 border: #000 solid 1px;
		 height: auto;
		 width: 800px;
		 margin-top: 35px;
		 padding-top: 10px;
		 
	 }
	 
	 #footer
	 {
		 width: 800px;
		 margin-top: 3px;
		 height: 30px;
		 border-top-width: 2px;
			border-top-color: #006;
			border-top-style: solid;
			color: #000;
			font-size:12px;
		  padding: auto;
		  
			
		
	 }
	 
	 .footer {
		 text-align: center;
		 margin-left: 20px;
		 text-decoration: none;
		 text-transform:uppercase;
		 color: #000;
		 clear: both;
		 
	 }
	 #ioben {
		 height: 100px;
		 width: 750px;
		 margin: 5px 25px;
	 }
	 #ilinks 
	 { 
	 height: auto;
	 width: auto;
	 margin-left: 55px;
	 float: left;
	 margin-bottom: 5px;
	 }
	 
	 #irechts {
		 height: 400px;
		 width: 310px;
		 margin-right: 55px;
		 float: right;
		 background: #ffffff;
		 color: #000;
		 padding-top: 0px;
		 
	 }
	 #iunten
	 {
		 height: 100px;
		 width: 750px;
		 margin-top: 5px;
		 margin-bottom: 5px;
		 margin-left: 25px;
		 clear: both;
		 
	 }
	 
	 
.kontakth {
	font-weight: bold;
	font-size: 14px;
	margin: 0;
}

.kontakth1, .kontakth2
{
	margin: 1px;
	padding: 0;
}
.kontakth1 { font-size:14px }

 	
	
	#kf {
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
	}


Dreamweaver zeigt alles korrekt an.....

Vielen dank für eure Hilfe schonmal im Vorraus!



Liebe Grüße,

Anton
Mit Zitat antworten
Antwort

Stichwörter
drop down menu, visibility hide

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
Css Menu Problem Rapidement CSS 11 16.06.2011 15:38
DHTML-Drop Down - Menü |Drop Down erst bei Click Scolex CSS 1 22.02.2011 18:05
Kindelement eines ausgeblendeten Elternelementes ansprechen wandler CSS 7 19.06.2010 02:32
CSS navigations problem domi1984 CSS 10 07.12.2007 14:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:28 Uhr.