Thread: Nav-bar text centreren?
-
18-02-2010, 16:30 #1Member
- Registered
- 06/11/03
- Location
- Aartselaar
- Posts
- 1,552
- iTrader
- 88 (98%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Nav-bar text centreren?
Hallo,
Ik ben bezig aan een WoW-guild website. Ik heb er een Nav-bar inzitten maar ik krijg de text erin maar niet in het midden.
Kan iemand me hiermee helpen?
Link: MADE TO WIN
Gz
no votes
-
-
18-02-2010, 17:42 #2Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
maak uw list niet 100% maar de lengte dat hij is.
en margin:auto;
en zet er een divke rond voor uw achtergrond te repeaten naar de kanten. zal wel lukken zo.no votes
-
18-02-2010, 17:49 #3Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Ik zie dat ge het ondertussen al hebt aangepast, maar uw code klopt in het algemeen niet echt 100%. 'k Heb ze even herschreven in een logischere structuur.
Ge hebt trouwens een html sluittag in uw hoofding steken.
Code:<!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> <title>MADE TO WIN</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="World of Warcraft, WoW, Guild, Forum" /> <meta name="description" content="MADE TO WIN: Murder, Death and Annihilate!" /> <style type="text/css" media="screen"> <!-- * { margin: 0; padding: 0; } body { background: #333; font-family:Verdana, Arial, Helvetica, sans-serif; } #container { width: 748px; margin: 0 auto; margin-top: 10px; } li { color:#FFFFFF; } h2 { margin: 0 auto; padding: 2px; color: #000 ; font-size: 14px; text-align: center; background: url(http://xgack.be/madetowin/h1background.jpg); } #header { background-image:url(http://xgack.be/madetowin/banner.jpg); width: 746px; height: 100px; border: 1px solid #2e8b57; border-width: 1px 1px 0 1px; } #header h1 { position: absolute; top: -10000px; display: block; } #navbar { margin-bottom: 10px; background: #fff url(http://xgack.be/madetowin/navpic.jpg) repeat-x; border: 1px solid #2e8b57; border-width: 1px 0 1px 0; height: 35px; } #navbar ul { list-style:none; width: 315px; margin-left: auto; margin-right: auto; } #navbar li { display: inline; } #navbar a { text-transform: uppercase; display:block; float:left; height:35px; line-height:35px; color: #2e8b57; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 20px 0 20px; cursor:pointer; } #navbar a:hover { color:#fff; background:#000 url(http://xgack.be/madetowin/navpic2.jpg); } #content div { float: left; background: #000; border: 1px solid #2e8b57; min-height: 500px; } #maincolumn { width: 410px; margin: 0 16px 0 16px; } .sidecolumn { width: 150px; } --> </style> </head> <body> <div id="container"> <div id="header"> <h1>Titel van de pagina</h1> </div> <div id="navbar"> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="News">News</a></li> <li><a href="#" title="Forum">Forum</a></li> <li><a href="#" title="Roster">Roster</a></li> </ul> </div> <div id="content"> <div class="sidecolumn"> <h2>Progress</h2> </div> <div id="maincolumn"> <h2>News</h2> </div> <div class="sidecolumn"> <h2>Recruitment</h2> </div> </div> </div> </body> </html>Last edited by Zero Grav; 18-02-2010 at 18:01.
no votes
-
18-02-2010, 17:55 #4Member
- Registered
- 06/11/03
- Location
- Aartselaar
- Posts
- 1,552
- iTrader
- 88 (98%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
no votes
-
18-02-2010, 17:59 #5Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
#nav veranderen naar #navbar bij die hover.
'k Had eerst enkel de ul, zonder de omringende div en die had een id #nav. Maar uw design heeft nog een extra div nodig als het gecentreerd moet staan en als ge die groene borders wilt, daarmee dat het niet meer klopte.
'k Heb ook perongeluk #navbar li li geschreven daardoor, dat moet gewoon #navbar li zijn. 'k Zal de code in mijn eerste post editten.no votes
-
18-02-2010, 18:04 #6Member
- Registered
- 06/11/03
- Location
- Aartselaar
- Posts
- 1,552
- iTrader
- 88 (98%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
no votes
-
18-02-2010, 18:16 #7Member
- Registered
- 06/11/03
- Location
- Aartselaar
- Posts
- 1,552
- iTrader
- 88 (98%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Heb het nog eens nagelezen en heb nog enkele vraagjes voor jou:
-Waarom krijgt enkel de header een width toegekend?
-Hoe komt het dat de content div de achtergrond van de maincloumn en de sidecolumn bepaald?
-Moet je altijd zo een 'container' div aanmaken als je de hele pagina wilt centreren?
(Sorry, ben er nog niet lang mee bezig =) )
no votes
-
18-02-2010, 18:22 #8Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
De header moet zelfs geen width krijgen, 'k heb die code gekopieerd van u en vergeten te wissen. Dat is omdat divs block-level elementen zijn die automatisch de width die ze nodig hebben innemen. Alleen elementen die kleiner moeten zijn dan de benodigde breedte (gelijk bij uw columns waar ge er 3 op 1 lijn wilt) moet ge dan een breedte meegeven.
Als ge #content div ingeeft dan zoekt em naar alle divs die binnen content staan. Dat is éeen van de CSS selectors. Als ge hier nu nog divs in wilt gaan zetten dan kan het wel fout gaan en kunt ge van die "#content div" beter "#content>div" maken, dan past em alleen de directe children aan, de divs die er maar één level onderstaan dus.
Zie Selectors
Het wordt doorgaans zo gedaan dat er één div is die alle andere elementen omringd, en die krijgt dan de naam container. Zo kunt ge inderdaad op een gemakkelijke manier uw hele site centreren, maar zelfs als ge dat niet wilt hebt ge nog steeds die omringende structuur. Handig bijvoorbeeld als ge later toch wilt centreren, of iets wilt toepassen op alles.no votes

.
