✔ Navigation zu breit

[slaughter89]

Hi,
nach Tagen habe ich endlich eine gute Navigation gefunden.
Nur leider gibt es ein kleines Problem. Der Abstand zwischen den einzelnen Felder ist unterschiedlich. Der soll aber gleich sein. z.B zwischen "About" und "Products" ist viel mehr Platz als zw. "Customers Test TestHo" und "Partners".

Und außerdem wird der Name abgeschnitten, wenn er zu lang ist. Wie bei "Customers Test TestHo".

Ich hoffe, mir kann jmd helfen

 

[Maik]

Hi,

ausschlaggebend für deine beiden genannten Punkte ist die feste Breitenangabe im Selektor #mainnav ul li.

 

[slaughter89]

OK, danke.

Ich hab jetzt den Wert verändert auf 93:

#mainnav ul li 	{list-style-type: none; margin: 0; padding-top: 0; float: left; position: relative; text-align: center; color:#FFF; width:93px;}

Und zudem habe ich das hier verändert:
Damit sind die Untermenüs nicht mehr so breit

	#mainnav li ul li a {
		font-weight: bold; background: #333; color: #FFF; display: block; text-decoration: none;
		width:150px; text-align: left; padding: 3px 10px;
		border-bottom: 1px solid #555;
	}

Das hat aber zur Folge das die Unter-Untermenüs jetzt verschoben sind.
Was muss ich da jetzt wieder ändern?

Der zu ändernde Code muss irgendwo hier drin sein:

/* begin Third Menu Styles */
	#mainnav li ul li ul.third { position:absolute; left: 210px; display: none; z-index: 205; }
	#mainnav li ul li ul.third li.first a { border-top: 1px solid #000; }
	#mainnav li ul li:hover ul.third, #mainnav li.over ul.third { display: block; position: absolute; }
/* end Third Menu Styles */

	#mainnav li ul li ul.last { left: -190px; }

/* begin need to reset the padding and the width for the menu images.  They should not have any of the effects of the menu */
	
	#mainnav li ul li.over { background:none; }
	#mainnav li ul li.over a,
	#mainnav li ul li.over a:hover {
		width:103px; background: none; text-align:center; color:#fff; padding: 4px 0 4px 0; border: 0; font-weight: bold;
	}
/* End main navigation */

 

[Maik]

Hi,

im folgenden Selektor muss die Positionsangabe um das Maß verringert werden, um das die Links verschmälert wurden:

#mainnav li ul li ul.third { position:absolute; left: 210px; display: none; z-index: 205; }

 

[slaughter89]

Tausend Dank, jetzt habe ich noch eine Sache:

Wenn ich mit der Maus über den Menüpunkt fahre, dann verschiebt sich die Schrift ein wenig nach rechts.
Das kommt wohl von der ersten Veränderung.

Hier jetzt nochmal die CSS mit allen bisherigen Veränderungen eingeschlossen:

/* Begin main navigation */
#mainnav {
	color: #eee;
	clear: both; position:relative; top: 0px;
	background: #333 url('graybg.gif') repeat-x;
	height: 23px; width: 776px; z-index: 100;
	padding-top: 2px; padding-left: 4px;
	font-size: 7pt; font-family: Arial;
}
#mainnavul { z-index:1; }

/* begin drop down styling */
	#mainnav ul { margin: 0; padding: 0; list-style: none; }
	#mainnav a.mainitem {font-size: 9pt;}
	#mainnav ul li 	{list-style-type: none; margin: 0; padding-top: 0; float: left; position: relative; text-align: center; color:#FFF; width:93px;}
	#mainnav ul li a {font-weight:bold; display:block; text-decoration:none; color:#FFF; padding:4px 0 4px 0; height:100%;}
	#mainnav ul li.on   {background:url('gray_tl.gif') no-repeat; color:#000;}
	#mainnav ul li.on a {background:url('gray_tr.gif') top right no-repeat; color:#000;}
	#mainnav li ul { position: absolute; left: 0; top: 0;  display: none; z-index: 100; }
	#mainnav li ul.last {left: -120px;} /* we want the last menu item to be right aligned with the page */
/* end drop down styling */

/* begin Sub Menu Styles */
	#mainnav li.on ul li a { background: #333; color: #FFF; }
	#mainnav li.on ul li a.mainitem {color: #000;}
	#mainnav li.on ul li a.mainitem:hover {color: #000;}
	#mainnav li:hover ul, 
	#mainnav li.over ul {display: block; position: absolute; top:0; z-index: 200;}

	#mainnav li ul li a {
		font-weight: bold; background: #333; color: #FFF; display: block; text-decoration: none;
		width:150px; text-align: left; padding: 3px 10px;
		border-bottom: 1px solid #555;
	}

	#mainnav li ul li a:hover 	{ color:#FFF; background:#666;}
/* end Sub Menu Styles */

/* begin Third Menu Styles */
	#mainnav li ul li ul.third { position:absolute; left: 170px; display: none; z-index: 205; }
	#mainnav li ul li ul.third li.first a { border-top: 1px solid #000; }
	#mainnav li ul li:hover ul.third, #mainnav li.over ul.third { display: block; position: absolute; }
/* end Third Menu Styles */

	#mainnav li ul li ul.last { left: -190px; }

/* begin need to reset the padding and the width for the menu images.  They should not have any of the effects of the menu */
	
	#mainnav li ul li.over { background:none; }
	#mainnav li ul li.over a,
	#mainnav li ul li.over a:hover {
		width:103px; background: none; text-align:center; color:#fff; padding: 4px 0 4px 0; border: 0; font-weight: bold;
	}
/* End main navigation */

 

[Maik]

Hi,

im folgenden Selektor muss die Breite der Links noch angepasst werden:

#mainnav li ul li.over a:hover {
                width:103px; background: none; text-align:center; color:#fff; padding: 4px 0 4px 0; border: 0; font-weight: bold;
        }

 

[slaughter89]

Tausend Dank, hat funktioniert