Navigationr rechtsbündig

[achterbahnfreak]

Hi,

ich habe folgenden .css Code eines Sliders mit Navigation:

/*
	jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
	Copyright (c) 2009 Niall Doherty
	This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

/* Insignificant stuff, for demo purposes */

	body p{ padding: 10px; padding-left:10px; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#fff; }
	.panel h2.title { margin-bottom: 10px; padding-left: 10px; color: #aa8c4c; font-size:18px; font-family:Arial, Helvetica, sans-serif; display:none;}
	noscript div { background: #000; margin: 20px 0; padding: 15px }

/* Most common stuff you'll need to change */

	.coda-slider-wrapper {
	margin: 0 auto;
	bottom:20px;
	left:10px;
	width: 952px;
	overflow-x: hidden;
}
	
	.coda-slider { background: transparent; height: 952px;}
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider {height: 200px; overflow: auto !important; padding-right: 10px;  }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 240px } 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 952px }
	.coda-slider-wrapper.arrows .coda-slider { margin: -20 -10px }
	
	/* Arrow styling */
	.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 0px; }
	
	/* Tab nav */
	.coda-nav ul li a.current { color:#fff !important; background-color: #85837d; }
	
	/* Panel padding */
	.coda-slider .panel-wrapper { padding: 10px; margin-top: -20px }
	
	/* Preloader */
	.coda-slider p.loading { padding: 10px; text-align: center;  }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both;  float: right; display: block;  margin-bottom:30px; overflow: hidden; margin-top: 20px;}
	.coda-nav ul li { display: inline;}
	.coda-nav ul li a { color:#85837d !important; background-color: #fff; padding: 2px; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none; font-size: 14px; margin-left: 20px;}
	.coda-nav ul li a:hover{ color:#fff !important; background-color: #85837d; padding: 2px; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none; font-size: 14px; margin-left: 20px;}
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow-x: hidden; }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: right; display:none; }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }

Doch irgendwie sind die Menüpunkte nicht rechtsbündig (siehe Screen)

Was habe ich falsch gemacht?

 

[SpiceLab]

Wenn du mit "nicht rechtsbündig" die Abstände zwischen den Tabs meinst, ist hierfür die margin-left:20px-Regel verantwortlich.

 

[achterbahnfreak]

Nein das meine ich nicht. Wie Du sehen kansnt ist auf dem Screen der letzte Navipunkt abgeschnitten und der soll aber ganz zu sehen sein...

 

[SpiceLab]

Da kann ich dann ob des Grundes nur weiter mutmaßen.

1. margin:0 und padding:0 ist nicht für das <ul>-Listenelement deklariert, um dessen voreingestellte Polsterungseigenschaften zurückzusetzen.
2. Die Breitenregelung (width: 952px) ist zu gering gewählt, was wg. overflow-x:hidden zum "Abschneiden" des letzten Menüpunktes führt.

 

[achterbahnfreak]

Das es nicht groß genug ist, das weiß ich, aber eigentlich müsste sich doch dann die Navigation nach links weiterschieben oder nicht? Aber das tut sie nicht

 

[SpiceLab]

Wenn dir schon bekannt ist, dass die Menübreite zu klein ausfällt, sollte dir auch die Folge klar sein, denn wie du bemerkt hast, verrücken sich die Elemente nicht eigenständig.

 

[achterbahnfreak]

Wenn ich die Breite von 952 auf 982 ändere sehe ich den abgeschnitten Menüpunkt, der aber über den Conent hinausragt... Aber eigentlich müsste er sich doch nach links verschieben, da ist noch massig Platz...

 

[SpiceLab]

Und was ist mit der erstgenannten Fehlermöglichkeit?

 

[achterbahnfreak]

Habe bei .coda-nav ul und .coda-nav ul li padding und margin 0 eingesetzt.. Kein Unterschied...

 

[SpiceLab]

Gut, dann stell die Seite online zur Verfügung, damit man der Ursache auf den Grund gehen kann.