Horizontale Navigation zentrieren

Nachtgestalter

Hallo zusammen,

ich erstelle gerade mein erste WP-Theme und darin würde ich gerne eine Horizontal Navigation zentriert auf der Seite abbilden

hier der Code

HTML

<body>


<div id="wrapper">




		<div id="header"> </div>
<div id="navbg"> 


                        <ul id="nav">




             
                      <li class="page_item page-item-4"><a href="http://www.fuenffichten.de/ORZ/wordpress/?page_id=4" title="Über uns">Über uns</a></li>
<li class="page_item page-item-11"><a href="link/wordpress/?page_id=11" title="FAQ">FAQ</a></li>
<li class="page_item page-item-5"><a href="link/wordpress/?page_id=5" title="Galerie">Galerie</a></li>
<li class="page_item page-item-2"><a href="link/wordpress" title="Home">Home</a></li>
<li class="page_item page-item-9"><a href="link/wordpress/?page_id=9" title="Jeep-ABC">Jeep-ABC</a></li>
<li class="page_item page-item-10 current_page_item"><a href="link/wordpress/?page_id=10" title="Kontakt">Kontakt</a></li>
<li class="page_item page-item-6"><a href="link/wordpress/?page_id=6" title="Leistungen">Leistungen</a></li>
<li class="page_item page-item-8"><a href="link/wordpress/?page_id=8" title="Links">Links</a></li>
<li class="page_item page-item-7"><a href="link/wordpress/?page_id=7" title="Zubehör">Zubehör</a></li>
                      


                        </ul>
                        				
				
				
		
		</div>
       


<div id="content2">

Alles anzeigen

und das CSS

Code

/* navigation
--------------------------------------------------*/
#navbg { background-image: url(images/bg_Navi.png); background-repeat: no-repeat; text-align: center; width: 945px; height: 60px; float: left; margin-bottom: 40px; }
#nav { text-align: center; position: relative; padding-top: 12px; z-index: 3; width: 945px; height: 60px; margin-bottom: 25px; display: block; }


#nav li { list-style:none; color: #cc6600; font-size: 14px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; height: 100px; padding-bottom: 25px; letter-spacing: 0.2em; float: left; padding-right: 15px; display: block; }


#nav li a { color: #ffffff; font-size: 14px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; letter-spacing: 0.2em; float: left; }
#nav li a:hover { color: #cc6600; font-size: 14px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; background-image: url(images/hover45b.png); background-repeat: no-repeat; background-position: center 25px; text-align: center; padding-bottom: 25px; letter-spacing: 0.2em; float: left; }


#nav li a.active { color: #ffffff; font-size: 14px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; letter-spacing: 0.2em; float: left; }


.page_item a:hover, .current_page_item a, .current_page_parent a { color: #cc6600; font-size: 14px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; background-image: url(images/hover45b.png); background-repeat: no-repeat; background-position: center 25px; text-align: center; padding-bottom: 25px; letter-spacing: 0.2em; float: left; }
.clear {
	clear:both;
}

Alles anzeigen

bin sehr sehr dankbar für Eure Hilfe
Nachtgestalter

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Fließende Elemente kannst du nicht zentrieren. Lass mal "float:left" weg und ändere "display:block" auf "display:inline".

Code

#nav li {
 list-style:none; color: #cc6600;
 font-size: 14px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 height: 100px;
 padding-bottom: 25px;
 letter-spacing: 0.2em;
[COLOR="#ff0000"] float: left;[/COLOR]
 padding-right: 15px;
[COLOR="Red"] display: block;[/COLOR]
}

Alles anzeigen

Nachtgestalter

hmmm, das bringt leider auch nicht den gewünschten Erfolgt ...

marX

Nimm zusätzlich noch das float:left für "#nav li a" raus, dann klappts.

Nachtgestalter

genau, das war's!

vielen vielen dank sagt der Nachtgestalter

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Horizontale Navigation zentrieren

Jetzt mitmachen!