zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontal Menü mit Popdown

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2006, 20:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 95
Pseudo befindet sich auf einem aufstrebenden Ast
Standard Horizontal Menü mit Popdown

Hallo zusammen,
ich möchte ein horizontales Menü gestalten mit z.B. 5 Punkten.

Einige dieser Punkte sollen ein Submenü erhalten (sollen nach unten aufklappen), aber leider scheitert es irgendwie... Nach einiger Suche im Web und hier hab ich noch nicht das richtig gefunden.

Hoffe der eine oder andere kann mir ein paar Links posten - Das Menü soll dann ein reines CSS Menü werden.

Oder ist das nicht zu empfehlen bzw. funkiotniert es ohne js?

Geändert von Pseudo (25.06.2006 um 20:53 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2006, 21:07
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Super Link: http://www.cssplay.co.uk/menus/index.html
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.06.2006, 01:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 95
Pseudo befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Klasse Link.... Aber nun gehen die Probleme los

Irgendwie Stimmen die Abstände nicht... Extrem ist es bei Home und Sitemap!

Hoffe mir kann da jemand auf die Sprünge helfen!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
p,h1,h2,h3,div,body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color:#333333;
	border:0;
	padding:0;
	margin:0;
}
body {
	background-image: url(images/background.jpg);
	background-color: #FF9933;
	background-repeat: repeat-x;
}

/* ####################### MENÜ ##################### */

.menue {
	text-align:left;
	position:relative;
	font-size:0.9em;
	height:2em;
	list-style-type:none;
	padding: 103px 0 0 15px;
	margin: 0px;
}
.menue ul {
	padding:0;
	margin:0;
	list-style-type:none; /* for Firefox */
}
/* first line */
.menue li {
	float:left; position:relative;
}
.menue li a, .menue li a:visited {
	display:block;
	text-decoration:none;
	width:9em;
	color:#000;
	float:left;
	padding-right:1em;
	height:2em;
	line-height:2em;
	color:#405362; 
}
* html .menue li a, .menue li a:visited {
	width:9em; w\idth:9em; /* hack for IE5.5 */
}
/* first line with Drop */
.menue li a.drop, .menue li a.drop:visited {
	font-weight:bold;
	text-decoration:none;
}
/* ul second line */
.menue li ul {
	visibility:hidden;
	position:absolute;
	top:2.5em;
	left:0;
	height:0;
	overflow:hidden;
}
table {
	margin:-1px;
	border-collapse:collapse;
	font-size:0.9em; /* font size for IE5.5 */
}

/* first line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menue li:hover a,
.menue li a:hover {
	text-decoration:none;
	border:0;
}
.menue li:hover ul,
.menue li a:hover ul {
	visibility:visible;
	height:auto;
	width:17em;
	background-color:#f1f1f1;
	left:0;
	top:2em;
	overflow:visible;
}
.menue li:hover ul li a,
.menue li a:hover ul li a {
	display:block;
	font-weight:bold;
	text-decoration:none;
	height:auto;
	padding: 0.5em 0.5em 0.5em 1.5em;
	width:15em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
}

* html .menue li a:hover ul li a {
	width:15em;
	w\idth:15em; /* hack for IE5.5 */
}
.menue li:hover ul li a.drop,
.menue li a:hover ul li a.drop {
	font-weight:bold;
}
.menue li:hover ul li a:hover,
.menue li a:hover ul li a:hover {
	text-decoration:none;
	background-color: #dbf06d;
}
</style>
</head>

<body>
<ul class="menue">
	<li><a href="#nogo">Home</a></li>
	<li><a class="drop" href="#nogo">test test test<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td><ul>
		<li><a href="#nogo">Profil</a></li>
		<li><a href="#nogo">Irgendwas</a></li>
		<li><a href="#nogo">Foobar Foobar</a></li>
	</ul>
	</td></tr></table><!--[if lte IE 6]></a><![endif]--></li>
	<li><a class="drop" href="#nogo">Leistungen<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
	<ul>
		<li><a href="#nogo">&Uuml;berblick</a></li>
		<li><a href="#nogo">Design</a></li>
		<li><a href="#nogo">Programmieren</a></li>
	</ul>
	</td></tr></table><!--[if lte IE 6]></a><![endif]--></li>
	<li><a href="#nogo">Sitemap</a></li>
	<li><a href="#nogo">Impressum</a></li>
	<li><a href="#nogo">Kontakt</a></li>
</ul>
</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 26.06.2006, 01:58
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Kannst du es online stellen oder einen Screenshot posten?
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
  #5 (permalink)  
Alt 26.06.2006, 02:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 95
Pseudo befindet sich auf einem aufstrebenden Ast
Standard

http://schockwelle.sc.funpic.de/test.html
Mit Zitat antworten
  #6 (permalink)  
Alt 26.06.2006, 02:08
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Wirf erstmal die Tabellen aus deiner Listennavigation raus, die brauchst du doch gar nicht.
... oder vielleicht doch. Aber sinnvoll sind sie jedenfalls nicht
EDIT: Sorry, habe gerade gesehen dass Dropdown Menüs ohne nicht möglich sind.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }

Geändert von Lloyd Larkin (26.06.2006 um 02:14 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 26.06.2006, 02:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 95
Pseudo befindet sich auf einem aufstrebenden Ast
Standard

Also dann geht garnix mehr.... hab es eben mal lokal getestet und die Abstände sind gleich und das popdown funktioniert auch nicht mehr...
Mit Zitat antworten
  #8 (permalink)  
Alt 26.06.2006, 02:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.01.2006
Beiträge: 153
Achereto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Lloyd Larkin
EDIT: Sorry, habe gerade gesehen dass Dropdown Menüs ohne nicht möglich sind.
Natürlich sind dropdown-Menüs ohne Tabellen realissierbar. Die eingefügten tabellen in obigem Code haben weder Sinn noch Verstand - sie gehören entfernt.

Siehe Beispiele auf www.cssplay.co.uk
__________________
Freiheit.
Mit Zitat antworten
  #9 (permalink)  
Alt 26.06.2006, 08:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2005
Beiträge: 95
Pseudo befindet sich auf einem aufstrebenden Ast
Standard

Ich hab das Menü auch von css play... Aber eventuell hab ich da was verkehr gemacht!

Wie müsste es denn korrekt aussehen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.06.2006, 10:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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 Achereto
Natürlich sind dropdown-Menüs ohne Tabellen realissierbar. Die eingefügten tabellen in obigem Code haben weder Sinn noch Verstand - sie gehören entfernt.

Siehe Beispiele auf www.cssplay.co.uk
Die Tabellen und die a-Elemente in Conditional Comments sind die Sonderlösung für den IE. So ist es möglich, dem IE < 7 ein Dropdownmenü ohne JavaScript beizubringen.
Diese Methode *ist* von Stu Nicholls/cssplay und sicher nicht "ohne Sinn und Verstand", sondern das Ergebnis einer langen Entwicklung - nachvollziehbar an den verschiedenen Versionen des Dropdown-Menüs.

@Pseudo: die Technik funktioniert doch bei deinem Menü.
"Irgendwie stimmen die Anstände nicht" ist keine Fehlerbeschreibung. Was willst du erreichen?

Geändert von fricca (26.06.2006 um 10:16 Uhr)
Mit Zitat antworten
Sponsored Links
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
Horizontal Menü yuku CSS 1 21.01.2011 23:59
Horizontales Menü mit 3 Ebenen (alle horizontal) im IE Lezlie CSS 1 21.01.2010 15:16
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Popdown Menü mit CSS Nohma CSS 0 08.10.2007 21:58
Listen symbol als Menü horizontal ausrichten dirty south CSS 1 27.04.2007 13:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:12 Uhr.