1. #1
    xGack's Avatar
    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  

  2. #2
    woony's Avatar
    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  

  3. #3
    Zero Grav's Avatar
    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  

  4. #4
    xGack's Avatar
    Registered
    06/11/03
    Location
    Aartselaar
    Posts
    1,552
    iTrader
    88 (98%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    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>
    Met jouw code werkt mijn hover-effect wel niet meer op nav?
    no votes  

  5. #5
    Zero Grav's Avatar
    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  

  6. #6
    xGack's Avatar
    Registered
    06/11/03
    Location
    Aartselaar
    Posts
    1,552
    iTrader
    88 (98%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    #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.
    Ok hartelijk bedankt! Ziet er inderdaad wel wat logischer uit .
    no votes  

  7. #7
    xGack's Avatar
    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  

  8. #8
    Zero Grav's Avatar
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in