zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Einfaches Menü mittels CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.07.2005, 16:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2005
Beiträge: 69
BabbleBoy befindet sich auf einem aufstrebenden Ast
Standard Einfaches Menü mittels CSS

Hi,

da ich mir endlich mal die Grundlagen von CSS aneignen möchte, experimentiere ich gerade mit einer Liste, die als Navigationsmenü fungieren soll. Das vorläufige Resultat sieht folgendermaßen aus:

http://www.ximes.net/mt/test/NavBar02.htm

Das zugehörige Stylesheet:

http://www.ximes.net/mt/test/NavBar02.css

Welche Änderungen sind nötig, damit der graue Balken rechts vom letzten Menüeintrag auf der richtigen Höhe erscheint?

D.h. der graue Balken sollte sich über die gesamte Seitenbreite erstrecken und nur durch einen ein Pixel breiten weissen Spalt zwischen den Menüeinträgen unterbrochen sein...

Vielen Dank im voraus!!
B/B
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.07.2005, 09:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2005
Beiträge: 69
BabbleBoy befindet sich auf einem aufstrebenden Ast
Standard

Hat niemand eine Idee, wie ich dem Problem beikommen könnte?

Meine CSS-Datei sieht mittlerweile folgendermaßen aus:

Code:
#navcontainer
{
	margin: 0;
	padding: 0;
	font: bold 11px Verdana, sans-serif;
	width: 100%;
	left: 0px;
	height: 19px;
}

#navlist
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navlist li
{
	float: left;
	margin: 0;
	padding: 0;
	width: auto;
	display: block;
}

#navlist li a, #navlist li a:link
{
	background: #fff;
	color: #555;
	text-decoration: none;
	padding: 3px 5px;
	display: block;
	border-bottom: 3px solid #bbb;
	margin-right: 1px;
}

#navlist li a:hover
{
	color: #F15F23;
	border-bottom: 3px solid #F15F23;
	cursor: pointer;
}

#navlist li a#current, #navlist li a#current:link
{
	color: #A70901;
	cursor: default;
	font-weight: bold;
	border-bottom: 3px solid #A70901;
}

#navlist li a#current:hover
{
	border-bottom: 3px solid #A70901;
}

#navSpacer
{
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 3px solid #bbb;
	height: 19px;
}
Und die HTML-Datei:
Code:
...
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]<span id="navSpacer"></span>
</div>
</body>
...
Ergebnis: http://www.ximes.net/mt/test/NavBar03.htm

Der FireFox "löscht" den 1 Pixel breiten Spalt zwischen den Menüeinträgen, der IE zeigt den Balken rechts vom letzten Eintrag etwas abgerückt und auf der falschen Höhe dar...

Any ideas?

Daaaaanke!

B/B
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.07.2005, 10:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
<li id="active">Item one
Im Markup einer (X)HTML-Site sollte nie ein LINK auf sich selbst zeigen, deshalb erübrigt sich eine ID oder Class zum Markieren der aktuellen Site, dies wird mit einem sematisch wertfreien Inline-Element (z.B. span) besser erreicht

Code:
#menu ul	{
			list-style-type: none;

			margin: 0;
			padding: 0;
			
			width: 10em;
			}
			

#menu li 	{
			margin: 0 0 0 1.5em;
			padding: 0 0 0 2px;

			font-size: .8em;
			}


#menu li span,
#menu li a	
			{
			display: block;
			
			/*
			 * IE voll anklickbar; 
			 */
			height: auto ! important; 
			height: 1px;

			margin: 0 2px 1px 0;
			border: none;
			padding: 2px 3px 2px 3px;
	
			background-color: transparent;
			color: #000;
	
			text-decoration: none;
			}
			

#menu li span,			
#menu li a:hover,
#menu li a:focus,
#menu li a:active
			{
			border: 1px solid #336699;
			padding: 1px 2px 1px 2px;
			background-color: #CCDDEE;
			}


#menu li span:hover
			{
			background-color: #BBCCDD;
			}			
	

#menu li span
			{
			cursor: default;
			}
Code:
<div id="menu">
:
:
:
<ul>
	[*]Item one 
	[*]Item two 
	[*]Item three 
	[*]<span title="angezeigte Website">Item four (activ) </span> 
	[*]Item five [/list]:
:
:
</div>
So gehe ich an die Thematik, erklären muß ich es wohl kaum, einfach mal überdenken......

<edit> CODE verbessert | Mo Sep 12, 2005 19:17
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 29.07.2005, 10:29
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hatte mich gestern schon mit deinem File beschäftigt, aber es war wieder mal spät und eine Lösung mit border ist mir nicht eingefallen.

Es sieht sehr einfach aus, was du da hast, erscheint mit jedoch ziemlich schwierig in der Behandlung.

Hier besteht vor allem das Problem des 1px Abstandes, der mit der von dir ursprünglich gewählten Lösung von #navlist border-bottom imho nicht gelöst werden kann.

Der jetzige Ansatz ist erfolgversprechender.
Was semantisch zwar nicht korrekt ist, aber funktionieren dürfte, ist, ein neues #navlist li a hinter deinen letzten Menüpunkt zusetzen und es auf die restliche Breite aufzuziehen. Um dort hovereffekte zu vermeiden, gib dem a eine extra klasse oder id und weise entsprechende Formatierungen zu.

sry, mehr fällt mir dazu nicht ein.

grüsse andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 29.07.2005, 14:42
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Geht das hiermit nicht?
Mit Zitat antworten
  #6 (permalink)  
Alt 29.07.2005, 14:59
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nicht bei seinen Vorgaben:

http://www.ximes.net/mt/test/NavBar03.htm

Die Links sollten alle voneinander durch einen 1 px breiten Spalt oder einen weißen Punkt Breite 1px getrennt werden, der Rest soll durchgehend sein.

Mit Hintergrundgrafiken könnte es auch gehen, aber das ist vermutlich nicht gefragt.

grüsse andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 29.07.2005, 16:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2005
Beiträge: 69
BabbleBoy befindet sich auf einem aufstrebenden Ast
Standard

andir, E|H,

vielen Dank schon mal für eure Anregungen!

Der Ansatz mit einem zusätzlichen Bereich #navlist li a, der sich über die gesamte Restbreite erstreckt, sieht sehr vielversprechend aus. Werd mich baldestmöglich damit auseinandersetzen...
Mit Zitat antworten
  #8 (permalink)  
Alt 29.07.2005, 23:52
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Wenn man die Liste in ein div einbaut und unten die border mit margin übereinanderzieht?
Mit Zitat antworten
  #9 (permalink)  
Alt 30.07.2005, 00:27
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Ich hab's mal probiert. Sieht geringfügig anders aus, als das Original, läuft unten nicht mit margin, sondern mit padding. Läßt sich sicher noch verbessern. Aber es geht. spacer ist weg.



Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS Document */
#navcontainer
{
	margin: 0;
	padding: 0 0 3px;
	font: bold 11px Verdana, sans-serif;
	width: 100%;
	border-bottom: 3px solid #bbb;
	background:#fff;
}

#navlist
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navlist li
{
	display: inline;
	margin: 0 0 0 -4px;
	padding: 0;
	width: auto;
}

#navlist a
{
	background: #fff;
	color: #555;
	text-decoration: none;
	padding: 3px 5px;
	border-bottom: 3px solid #bbb;
	margin-right: 1px;
}

#navlist li a:hover
{
	color: #F15F23;
	border-bottom: 3px solid #F15F23;
}

#navlist a#current
{
	color: #A70901;
	cursor: default;
	border-bottom: 3px solid #A70901;
}

#navlist a#current:hover
{
	border-bottom: 3px solid #A70901;
}

/*#navSpacer
{
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 3px solid #bbb;
	height: 19px;
}*/
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">[*]Item one[*]Item two[*]Item three
[*]Item four[*]Item five[/list]
</div>
</body>	
</html>
Wieso gehen data-URLs nicht?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.07.2005, 16:53
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

So, jetzt paßt's:

Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#navcontainer{
	margin: 0;
	padding: 0;
	font: bold 11px Verdana, sans-serif;
	width: 100%;
	border-bottom: 3px solid #bbb;
	background:#fff;
}

#navlist{
	list-style-type: none;
	margin: 0;
	padding: 3px 0 3px 0;
}

#navlist li{
	margin: 0 -4px 0 0;
	padding: 0;
	width: auto;
	display: inline;
}

#navlist a{
	background: #fff;
	color: #555;
	text-decoration: none;
	padding: 3px 5px;
	border-bottom: 3px solid #bbb;
	margin-right: 1px;
}

#navlist a:hover{
	color: #F15F23;
	border-bottom: 3px solid #F15F23;
	cursor: pointer;
}

#navlist a#current{
	color: #A70901;
	cursor: default;
	font-weight: bold;
	border-bottom: 3px solid #A70901;
}

#navlist a#current:hover{
	border-bottom: 3px solid #A70901;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one[*]Item two[*]Item three
[*]Item four[*]Item five[/list]</div>
</body>	
</html>
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
CSS Menü - Anfänger benötigt Hilfe mauricen CSS 2 24.01.2013 12:44
Problem mit CSS bei Drop Down Menü Sunny86 CSS 6 24.09.2012 15:33
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 12:49
suckerfish menü formatieren / css zurücksetzen / bug sicnezz (X)HTML 1 13.12.2007 06:47
IE6 Problem mit CSS Menü träumer CSS 2 15.01.2007 17:55


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