Horizontale Navigation - Text mittig

  • Hallo Leute,


    ich stehe vermutlich gerade einfach nur mega auf dem schlauch aber ich kriege es einfach nicht hin, meine navbar in horizontaler ausrichtig in die seiten mitte zu verschieben, ohne das layout an sich total zu verzerren. wäre super, wenn ihr mir hier einen kleinen tipp geben könntet! im moment ist sie zwar horizontal aber eben linksbündig was wohl am float:left liegt aber sobald ich das raus mache und auf display:inline wechsle, ist der hintergrund nicht mehr groß genug.. habe versucht diesen manuell per height anzupassen aber das verzerrt irgendwie nur alles, anstatt es besser zu machen :(


    html:

    HTML
    <div id='cssmenu'><ul><li class='active'><a href='#'><span>Item 1</span></a></li>          <li><a href='#'><span>Item 2</span></a></li>          <li><a href='#'><span>Item 3</span></a></li>          <li><a href='#'><span>Item 4</span></a></li>          <li><a href='#'><span>Item 5</span></a></li>          <li class='last'><a href='#'><span>Item 6</span></a></li>        </ul>      </div>



    css:

    CSS
    @charset "UTF-8";/* Starter CSS for Flyout Menu */#cssmenu,#cssmenu ul,#cssmenu li #cssmenu a {  list-style: none;  margin: 0;  padding: 0;  border: 0;  font-size: 14px;  font-family: Helvetica;  line-height: 1;}#cssmenu {  width: auto;  text-align: center;}#cssmenu ul {  zoom: 1;  background: #a7bc7a url(../images/pattern.png) top left repeat;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  border: 1px solid #839b4e;  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);}#cssmenu ul:before {  content: '';  display: block;}#cssmenu ul:after {  content: '';  display: table;  clear: both;}#cssmenu a,#cssmenu a:link,#cssmenu a:visited {  padding: 15px 20px;  display: block;  text-decoration: none;  color: #ffffff;  text-shadow: 0 -1px 1px #586835;  border-right: 1px solid #839b4e;}#cssmenu a:hover {  color: #586835;  text-shadow: 0 1px 1px #bdcd9c;}#cssmenu li {  float: left;  border-right: 1px solid #b2c58b;}#cssmenu li:hover {  background: #9cb369 url(../images/pattern.png) top left repeat;}#cssmenu li:first-child {  border-left: none;  -webkit-border-radius: 4px 0 0 4px;  -moz-border-radius: 4px 0 0 4px;  border-radius: 4px 0 0 4px;}




    vielen dank :love:

  • Hallo,


    erstmal allgemein:


    Warum nutzt du bei deiner Navigation spans, gibt es dafür irgendeinen Grund?


    Der Code ist so extrem schlecht lesbar, hier nochmal für alle anderen der gesamte Code in lesbarerer Form:


    HTML
    <div id='cssmenu'>
    			<ul>
    				<li class='active'><a href='#'><span>Item 1</span></a></li>          
    				<li><a href='#'><span>Item 2</span></a></li>         
    				<li><a href='#'><span>Item 3</span></a></li>         
    				<li><a href='#'><span>Item 4</span></a></li>          
    				<li><a href='#'><span>Item 5</span></a></li>         
    				<li class='last'><a href='#'><span>Item 6</span></a></li>        
    			</ul>      
    	</div>



    Und hie rein Link zum Thema Zentrierung:


    http://www.ohne-css.gehts-gar.net/0063.php







    mfg Nita

  • das mit dem code hab ich auch nicht verstanden warum da alles in eine zeile geschrieben wurde.. mein zeilenumbruch wurde irgendwie immer wieder entfernt :/
    danke dafür und auch danke für den link!


    das hat mir schon bei meinem problem geholfen :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!