Navigation Test / Verbesserung (?)

ulle · #1 (**permalink**) 16.09.2005, 23:03

Hallo, ich schon wieder.

Ich habe mich ein einer horizontalen Navigation ala Wikipedia versucht. Das bisherige Ergebnis seht Ihr als CODE-Beilage. Lösungsweg war mit Listen als Inline-Element / Links als Inline-Element. Nun "überlappe" ich mit der Hintergrundfarbe und Innenabstand (unten) des Link die line-height Grenzen des UL-Element. Es funktioniert , zumindest im IE6 / FF1.06 / Opera 8.02. Auch bei Schriftgrad-Änderungen geht es nach Abstimmung der Innenabstände vom Link (padding-bottom) und dem UL-Element (padding-top). Bei Änderungen von font-weight / font-family / line-height ist die Abstimmung erneut notwendig.

Aber genau diese Abstimmarbeit macht mir Sorgen, hat vielleicht jemand einen anderen Lösungsweg. Oder geht es auch in den anderen Browsern mit diesem CODE Problemlos, leider habe ich nicht mehr Browser zum testen.

Danke im voraus.

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" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*			{
			margin:  0;
			padding: 0;
			border-collapse:collapse;
			border-spacing: 0;
			}

html[xmlns]	{ 

			height : 100%; 
			padding-bottom : .005em; 
			} 

			
html,
body		{
			color:		#000000;
			background:	#FFDD22;
			
			line-height: 1.45;
			}

body		{
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}

			

#menu 		{
			width: 50em;

			margin: 2em auto;			
			border: 1px solid #666666;
			padding: 1em 1em 4em;
			
			background-color: #FFFFFF;
			
			/* sicherer Einzeiler 
			 */
			white-space: nowrap;	
			}



#menu strong
			{
			display: none;
			}
	
	
#menu ul	{
			list-style-type: none;

			margin: 0;
			border-bottom: 1px solid #000000;
			padding: .8em 0 0 2em;
			
			font-size: .8em;

			background-color: #EEEEEE;
			}

	
#menu li 	{
			display: inline;
			
			margin: 0 1em 0 0;
			padding: 0; 
						
			background-color: transparent;
			}
			
#menu li span,
#menu li a	{ 
			/* IE ~ sonst kein ueberschneiden 
			 * des UL border-bottom
			 */ 
			position: relative;
			
			border: 1px solid #000000;
			border-bottom: 0 none;
			padding: 0 .5em;
			
			color: #000000;
			background-color: #FFEECC;
			
			text-decoration: none;
			}
			
#menu li span,			
#menu li a:hover,
#menu li a:focus,
#menu li a:active
			{ 
			border: 1px solid #000000;
			border-bottom: 0 none;
			
			background-color: #FFCC22;
			}
	
#menu li span
			{
			/* padding-bottom => ueberschneiden 
			 * des UL border-bottom
			 * 
			 * padding-bottom: .172em in Abstimmung 
			 * mit UL padding-top: .8em
			 * (Schriftgrad Test 2x groesser OK) 
			 */
			padding: 0 .5em .172em;

			
			background-color: #FFFFFF;
			cursor: default;
			}

#menu li span:hover
			{
			border: 1px solid #555555;
			border-bottom: 0 none;
			
			color: #555555;
			}			
	

/*]]>*/ 
</style> 

</head> 
<body>


<div id="menu" title="Navigation">Hauptmenue
	<ul>
		[*]Item -- one  
		[*]Item - two  
		[*]<span title="Standort">Standort:Item three (activ) </span> 
		[*]Item -- four  
		[*]Item --- five  
	[/list]</div>



</body></html>

terrikay · #2 (**permalink**) 16.09.2005, 23:43

Zitat:

Zitat von ulle

Oder geht es auch in den anderen Browsern mit diesem CODE Problemlos, leider habe ich nicht mehr Browser zum testen.

Ab IE5.5 funktioniert es problemlos. Im IE 5 funktioniert es nicht - weil der das margin bei den Listen nicht annimmt. Ist aber auf der Wikipedia-Seite genauso. Benutzbar ist die Navigation auch im IE 5.

Beim IE 5.5, Netscape 7.1 und auch Opera 6 funktioniert dagegen alles (mein Browserpark ist nun auch erschöpft).

Swoop · #3 (**permalink**) 17.09.2005, 13:05

ie5 siehe Anhang...

opera 7.54 wurde glaub ich noch nicht genannt und funktioniert..

jedoch ist unterhalb der menüpunkte 1px freier Raum..(in allen Browsern, die ich testen konnte)

ulle · #4 (**permalink**) 17.09.2005, 19:05

Danke Euch für den Test, dann funktioniert es zwar wir gedacht.

@Swoop,
ja das mit dem IE5 ist klar, der kann keine Box-Model (links/rechts) Auszeichnungen. Das eine Pixel bei den "inaktiven" Card-Labels ist ja Absicht, so treten diese mehr in den Hintergrund bzw. wirkt optisch wie darhinter liegend.

Das der "aktive" die Line (boder-bottom von UL) überdeckt/lappt ist mir aber immer noch sehr unsicher. Ich glaube ich versuche es nochmal mit Listen-Elemente als Block-Elemente und Float. Hatte das zwar schon probiert aber nicht wirklich sauber hin bekommen.

micha · #5 (**permalink**) 18.09.2005, 09:09

Auf'm Mac funktioniert es unter Safari und Opera 7.54, im Firefox 1.0.6 ist der Abstand zur Grundlinie allerdings 2px (siehe Screen).

Mal eine Frage: was bezweckt die 100.01%-Angabe bei der font-Größe?

Micha

ulle · #6 (**permalink**) 18.09.2005, 11:24

Zitat:

Zitat von micha

Auf'm Mac funktioniert es unter Safari und Opera 7.54, im Firefox 1.0.6 ist der Abstand zur Grundlinie allerdings 2px (siehe Screen).

Mal eine Frage: was bezweckt die 100.01%-Angabe bei der font-Größe?

Micha

Da haben wir das Problem, schon wird der "Aktive" unsauber angezeigt, die 2 Pixelabstand wären ja nicht schlimm, aber nun wird der UL-border-bottom nicht mehr überlappt.

BODY font-size: 100.01%

ulle · #7 (**permalink**) 20.09.2005, 15:03

So!

Nun habe ich das Design/Layout ein wenig verändert und die Navi mit float/block/relative realisiert. Dies erscheint mir Layout-Sicherer und müßte auch im IE5 gehen.

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" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*			{
			margin:  0;
			padding: 0;
			border-collapse:collapse;
			border-spacing: 0;
			}

html,
body		{
			color:		#000000;
			background:	#FFDD22;
			line-height: 1.45;
			}

body		{
			font-size:   100.01%;
			font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
			}

.containing-float:after 
			{
			content: ".";
			visibility: hidden;			
			height:     0;
			display: block;
			clear: both; 
			}

			
.containing-float 
			{ 
			display: inline-table; 
			/* fuer alle Browser; 
			 * 
			 * verbergen IE-Mac \*/ 
			display: block; 
			/* ende verbergen IE-Mac */ 
			
			height: auto ! important; 
			height: 1%; 
			} 


#menu 		{
			width: 50em;

			margin: 2em auto;			
			border: 1px solid #666666;
			padding: 0 0 20em 0;
			
			background-color: #FFFFFF;
			white-space: nowrap;	
			}



#menu strong
			{
			display: none;
			}
	
	
#menu ul	{
			list-style-type: none;

			margin: 0;
			border-bottom: 2px solid #666666;
			padding: 1em 0 0px 2em;
			
			font-size: .8em; 	
			line-height: 1.3;
			
			background-color: #EEEEEE;
			}

	
#menu li 	{
			float: left;

			margin: 0 .7em 0 0;
			}
			
#menu li span,
#menu li a	{ 			
			display: block;

			width: auto ! important; 
			width: 1px; 
			
			margin: 0;
			border: 1px solid #555555;
			border-bottom: 0 none;
			padding: 0 .5em;
			
			color: #666666;
			background-color: #FFFEEE;
			
			text-decoration: none;
			font-weight: bold;
			}
			
#menu li a:hover	
			{ 
			color: #000000;
			background-color: #FFFF00;
			}
			

#menu li span	
			{ 
			position: relative;
			top: 2px;

			margin: 0 .5em;
			border: 2px solid #000000;
			border-bottom: 0 none;
			
			color: #000000;
			background-color: #FFFFFF;
			
			cursor: default;
			}


	

/*]]>*/ 
</style> 

</head> 
<body>


<div id="menu" title="Hauptnavigation">Hauptnavigation
	<ul class="containing-float">
		[*]Item - one  
		[*]Item -- two  
 		[*]<span title="Standort">Standort:Item --- three </span> 
		[*]Item ---- four  
		[*]Item ------ five  
		[*]Item six  
	[/list]</div>



</body></html>

Swoop · #8 (**permalink**) 20.09.2005, 16:24

alle von mir schon genannten browser + der opera 8.50 win machen es der ie5 win zerhauts..irgendwas bringt mich dazu zu denken, dass er das white space nicht richtig behandelt..

ulle · #9 (**permalink**) 20.09.2005, 19:51

Zitat:

Zitat von Swoop

irgendwas bringt mich dazu zu denken, dass er das white space nicht richtig behandelt..

Ja genau das hatte ich befürchtet, nur ohne die Eigenschaft für white-space geht es wohl in keinem Browser, da weder die li-Element (float) noch die a-Elemente (block) einen Value für width besitzen. D.h. die Elemente passen sich dem Inhalt, ähnlich wie Inline-Elemente, an. Ich befürchte der IE5 kann wohl gar nichts mit white-space anfangen.

Ist dass denn beim IE-Mac genauso?

@Swoop
Eine Bitte hätte ich noch: hast Du mal versucht dem LINK direkt die Eigenschaft zu geben?

Code:

#menu li span,
#menu li a	{ 			
			white-space: nowrap; .........

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE9: Höhe von Zeilen kann nicht fixiert werden	MarkP1972	CSS	5	05.02.2014 15:52
DIV Box (Sidebar) in bereits fertiges Design einfügen?	Daniel386	CSS	10	21.06.2011 22:58
Setzen von Minimalhöhe bei Kontentbox	Christophe	CSS	4	17.06.2009 08:24
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03
3 Spalten Layout - Div Höhe aneinander angleichen	Simsi	CSS	3	01.01.2006 18:04