Getting links centered in my header Div

Discussion in 'CSS' started by cluongo18, Apr 26, 2011.

0
  1. #1
    I'm really not thinking straight today, Im trying to get my "navbar" aka my list centered in the in the bottom middle of my header. The header is in a div but my links arent.

    <!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 {
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	font-family: arial, Helvetica,sans-serif; 

}

#header {
	background-image: url(header.jpg);
	width: 100%;
	background-repeat: repeat-x;
	margin-top: 0px;
	height: 133px;
}

ul
{
list-style-type:none;
margin:0;
padding-left: 10px;
}

li
{
display:inline;
}

a:link { 
	color: #333333;
	font-size: 18px;
	text-decoration: none;
	}
a:visited { 
	color: #333333;
	}
a:hover { 
	color: #CCCCCC;
	background-color: #333333;
	text-decoration: none;
	}
a:active { 
	color: #333333;
	}



</style>
</head>

<body>

<div id="header">

</div> <!-- End Header Div -->

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorials</a></li>
</ul>



<div id="container">
<div id="content">
</div> <!--- End Conent div --->



</div> <!-- End Container Div -->
</body>
</html>
    Code (markup):
     
    cluongo18, Apr 26, 2011 IP
  2. salmanshafiq

    salmanshafiq Well-Known Member

    Messages:
    260
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    128
    #2
    Sorry you question is not clear for me can you please describe it?
     
    salmanshafiq, Apr 26, 2011 IP
  3. cluongo18

    cluongo18 Member

    Messages:
    855
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #3
    I want my linkbar (navbar, whatever) to appear IN the header image, but in the middle, centered, at the bottom of the header image
     
    cluongo18, Apr 26, 2011 IP
  4. Frost1

    Frost1 Well-Known Member

    Messages:
    519
    Likes Received:
    23
    Best Answers:
    7
    Trophy Points:
    165
    #4
    I assume your navigation menu is the list of links, as shown below :

    <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
    HTML:
    To center the list, find the below content in your CSS and add "text-align:center;" :

    ul
{
list-style-type:none;
margin:0;
padding-left: 10px;
}
    HTML:
     
    Frost1, Apr 26, 2011 IP
  5. ChanderBedi

    ChanderBedi Peon

    Messages:
    163
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Use in css file....
    =============

    #nav
    {
    background:#FFD39B;
    height:50px;
    weithL800px;
    text-color:#A52A2A;
    text-align:center;
    }



    Use in your html file....
    =====================

    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Tutorials</a></li>
    </ul>
    </nav>
     
    ChanderBedi, Apr 27, 2011 IP
  6. AMSTeRdd

    AMSTeRdd Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    better </div>

    
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div> <!-- End Header Div -->
    HTML:
     
    AMSTeRdd, Apr 29, 2011 IP
  7. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    use 50% margins in your css instead and the browser will centralise the div's contents.
     
    sburst, May 11, 2011 IP