cant center navigation menu

Need technical advice on coding your web pages? Covers HTML, JavaScript, CSS, and some server side technologies. Also the issue of some webpages not displayed well.

cant center navigation menu

Postby luv » Mon 17 Jan, 2011 3:04 pm

I have been trying to center my navigation menu and was able to do it with <div> and table tags. It only works on ie. Ican not get it to work on firfox or other browsers I have tried margins: o px for firefox but with no luck. Can you help? Below is the code

Code: Select all
<!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" xml:lang="en" lang="en">
<head>
<title>title stuff</title>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8"/>
<meta name="description" content="Love Forever Gifts website sells LF android tablets, handbags, star dolls, gold testers, diamond testers, and free gifs. On this webpage you will see a 7 inch google android tablet." />

<link rel="stylesheet" type="text/css" href="googleandroidtablet.css"/>

<style type="text/css">
.pl
{
text-align: -moz-center;
}


ul#list-nav {
list-style:none;
margin:20px;
padding:0;
}

ul#list-nav li {
display:inline;
}
/* 87px good for lowers monitor resolution */

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}

</style>



</head>

<body bgcolor="red">

<div style="text-align: center;">
<table>
<tr>
<td class="pl">
<ul id="list-nav">
<li><a href="/">Home</a></li>
<li><a href="/free_gifts">Free Gifts</a></li>
<li><a href="/about_us">About Us</a></li>
<li><a href="/affiliate_program">LF Affiliate Program</a></li>
<li><a href="/affiliate_signup">Affiliate Signup</a></li>
<li><a href="/handbags">Love Forever Handbags</a></li>
<li><a href="/gold_tester_by_golden_touch">Gold Tester by Golden Touch</a></li>
<li><a href="/gold_diamond_scales">Gold Diamond Scales</a></li>
<li><a href="/isabella_rose_doll">Isabella Rose Doll</a></li>
<li><a href="/contact_us">Contact Us</a></li>
</ul>
</td>
</tr>
</table>
</div>

<br /><br /><br /><br />

<h1 class="center">I will put a title here</h1>
UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET4.0C; .NET CLR 3.0.30618)
luv
junior member
junior member
 
Posts: 6
Joined: Sun 17 Oct, 2010 8:27 pm

Re: cant center navigation menu

Postby Antony » Fri 08 Jul, 2011 8:14 pm

To centre a block with CSS,

create following CSS (remember to adjust the width to your preferred value:
Code: Select all
div.center {   margin-left: auto;   margin-right: auto;   width: 500px; }


then assign the HTML to something like:
Code: Select all
<div class="center">The text/image block to be centred.</div>
UserAgent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.18) Gecko/20110614 AlexaToolbar/alxf-2.13 Firefox/3.6.18
User avatar
Antony
diamond member
diamond member
 
Posts: 15226
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia


Return to Web Design and Page Coding

Who is online

Registered users: Baidu [Spider], Bing [Bot], Google [Bot], Majestic-12 [Bot]