navigatie in div centreren?

Status
Niet open voor verdere reacties.
D

deksel

Gebruiker
Lid geworden
16 mei 2011
Berichten
18
Hallo

Ik begrijp nog maar net de basis van css en ik heb deze navigatie die ik wil aanpassen. Nu wil ik graag dat de navigatie in het midden van de grijze balk staat en niet zoals nu aan de linker zijde.

Ik kan de primary li op float right zetten, maar dan plakt alles rechts en schuift niet in het midden mee.

kan iemand me hiermee helpen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
padding: 1em 20px 3em 20px;
margin: 0;
}
#main {
border: 1px solid #666;
clear: both;
background: #FFF3B3;
padding-top: 2em;
}
#contents {
padding: 1.5em;
background: #FFFDF3;
min-height: 300px;
}
#header {
position: relative;
width: 100%;
height: 3em;
width: 60em;
background-color: #06F;
}
#header ul#primary {
margin: 0;
padding: 0;
width: 60em;
background-color: #999;
position: absolute;
font-size: large;
}
#header ul#primary li {
display: inline;
list-style: none;
}
#header ul#primary a,#header ul#primary span,#header ul#primary a.current {
width: 8em;
display: block;
float: left;
padding: 4px 0;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 85%;
text-decoration: none;
color: #333;
}
#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
border-bottom: none;
margin-top: 0;
background-color: #CCC;
}
#header ul#primary a {
border-bottom: none;
background-color: #999;
color: #CCC;
}
#header ul#primary a:hover {
margin-top: 0;
background-color: #CCC;
color: #333;
}
#header ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -80px;
left: 0px;
width: 50em;
top: 24px;
height: 26px;
}
#header ul#secondary li a,#header ul#secondary li span {
width: auto;
display: inline;
float: left;
padding: 0 10px;
margin: 0;
text-align: auto;
border: none;
background-color: #999;
background-image: none;
}
#header ul#secondary li a {
color: #CCC;
text-decoration: none;
}
#header ul#secondary li a:hover {
color: #333;
padding: 0 10px;
border: none;
}
#header ul#secondary li a:active {
color: #000;
}
#header ul#secondary li:last-child a { border: none; }
</style>
</head>

<body>
<div id="header">
<ul id="primary">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><span>Our Portfolio</span>
<ul id="secondary">
<li><a href="#">Current Clients</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Whitepapers</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
 
kun je dan niet gewoon een <center> </center> tag gebruiken?

mvg
Corstian

ofwel:
PHP: 
<body>
<center> 
 <div id="header">
  <ul id="primary">
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><span>Our Portfolio</span>
  <ul id="secondary">
   <li><a href="#">Current Clients</a></li>
   <li><a href="#">Case Studies</a></li>
   <li><a href="#">Publications</a></li>
   <li><a href="#">Reports</a></li>
   <li><a href="#">Whitepapers</a></li>
  </ul>
   </li>
   <li><a href="#">Contact Us</a></li>
  </ul>
 </div>
</center>
</body>
 
Laatst bewerkt:
Ik heb even je code herschreven ;). Ik vond zelf de css niet echt overzichterlijk.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <style type="text/css">
 body
 {
 padding: 1em 20px 3em 20px;
 margin: 0;
 }
 #main
 {
 width: 960px;
 background: #FFF;
 }
 #content
 {
 background: #FFF;
 min-height: 300px;
 }
 #header
 {
 position: relative;
 background-color: #333;
 padding: 0px;
 text-align: center;
 }
 #header a
 {
    font-size: 16px;
    background-color: #444;
    color: #FFF;
    text-decoration: none;
 }

 #header li
 {
    display: inline;
 }

 </style>
 </head>

 <body>
 <div id="main">
    <div id="header">
        <ul id="primary">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><span>Our Portfolio</span>
        <ul id="secondary">
            <li><a href="#">Current Clients</a></li>
            <li><a href="#">Case Studies</a></li>
            <li><a href="#">Publications</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Whitepapers</a></li>
        </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <div id="content">
    Vulhiermaarwatinalscontent.
    </div>
 </div>
 </body>
 </html>

mvg
Corstian
 
Als je de oude code hebt en dan dit stukje orginele stukje vervangt met het geen wat jij hebt dan staat het in het midden:
#header ul#primary {
margin: 0;
padding: 0;
width: 60em;
background-color: #999;
position: absolute;
font-size: large;
margin-left: 250px;
}
 
thnx mch en whisper, maar..

Dat is eigenlijk niet wat ik bedoel. Maargoed dat krijg je als ik een stukje uit iets totaal knip. Ik heb mijn voorbeeld uit: http://labs.silverorange.com/images/tabsupdate/about.html.
Deze opzet wil ik gebruiken. Uiteindelijk wil ik dit geheel geheel in een container zetten zodat deze in het midden van de browser blijft, ik weet hoe je dat moet doen. Maar ik wil de navigatie mee bewegend in het midden hebben.
Of te wel ik wil over de gehele lengte een grijze balk en in het midden de navigatie.
Of is deze opzet daar niet geschikt voor?
 
Hoi deksel,
Ik denk dat je het meer moet zoeken in iets als het volgende:
Code: 
#header {
   position:relative;
   text-align:center;
}

#header ul#primary {
   bottom:-1px;
   display:inline-block;
   margin:0 auto;
   padding:0;
}

#header ul#secondary {
   bottom:-1.4em;
   display:inline-block;
   margin: 0;
   padding:0;
   position: absolute;
}
Dan staan zowel de hoofdtabs als de secundaire links altijd gecentreerd.
Er is nog wel wat détail-aanpassing nodig om de hoogte-afstanden goed te krijgen.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Mijn excuses.....voor de late reactie. Ik heb dit probleempje in combinatie met een wat andere opzet, container en margin opgelost.

Voor ik dit bericht ergens op opgelost vink wou ik dat ff zeggen. Jullie doen ook moeite om mij te helpen :d.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan