Archief - Nav-bar text centreren?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
x

xGack

Legacy Member
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
w

woony

Legacy Member
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.
Z

Zero Grav

Legacy Member
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>
x

xGack

Legacy Member
Zero Grav zei:
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 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;
	}
	
	#nav 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>
Klik om te vergroten...

Met jouw code werkt mijn hover-effect wel niet meer op nav?
Z

Zero Grav

Legacy Member
#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.
x

xGack

Legacy Member
Zero Grav zei:
#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.
Klik om te vergroten...

Ok hartelijk bedankt! Ziet er inderdaad wel wat logischer uit :D.
x

xGack

Legacy Member
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 =) )
Z

Zero Grav

Legacy Member
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.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan