Menu Bar Won't Centre

Oddw1re

Oddw1re

Oddw1re

Associate
Joined
28 Feb 2007
Posts
969
Location
Leeds/Sunderland
I have a problem my menu bar wont go to the centre.
Well I can get it to go to the centre but it just messes how the buttons look.

So I wonder if anyone can help me.

Here's the code:
*Updated*

Html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

<title>Welcome To My Webby</title>

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

</head>
<body>
<table  summary="Page">
	<tr>
		<td>
			<img src="images/cod4banner.png" alt="CoD4" />
		</td>
	</tr>
	<tr>  
		<td >
				<a class="menuButton" href="/index.php">Home</a> 
				<a class="menuButton" href="/user.php">Members</a> 
				<a class="menuButton" href="/submitnews.php">Submit News</a>
				<a class="menuButton" href="/e107_plugins/forum/forum.php">Forum</a> 
				<a class="menuButton" href="/e107_plugins/log/stats.php?9">Site Stats</a>
				<a class="menuButton" href="http://oddwire.frih.org/e107_plugins/links_page/links.php">College Stuff</a>
				<a class="menuButton" href="/e107_plugins/tiltviewer/tiltviewer.php">TiltViewer</a>
			
		</td>
	</tr>


	<tr>
		<td>
			zs[fogjodxhkrjjntgletnj.df jkwefuithaigu
		</td>
	</tr>
</table>

</body>
</html>

CSS:
Code: 
body
{
background-image: url(images/bkgrnd.jpg);
font-family: arial;
}


table	
{
	background-color:black;
	margin-left: auto;
	margin-right: auto;
	width: 905px;
	text-align:left;	
	color:white;
}


a.menuButton
{
width: 90px;
float: left; 
height: 22px; 
margin: 0px 1px 0px 2px; 
padding: 7px 0px 0px 0px; 
text-align: center; 
text-transform: uppercase; 
font-size: 10px; 
color: #FFFFFF; 
background: url(images/tab_off.png)  ; 
font-weight: bold; 
text-decoration: none;
   }
  
  
a.menuButton:hover
{
background: url(images/tab_hov.png) ; 
color: green; 
text-decoration: none; 
}
 
Last edited:
This will work, the float:left; was causing you the problem and you did not really need the DIV in the TD tag.


Code: 
<style>
body
{
background-image: url(images/bkgrnd.jpg);
font-family: arial;
}


table	
{
	background-color:black;
	margin-left: auto;
	margin-right: auto;
	width: 905px;
	text-align:left;	
	color:white;
}


a.menuButton
{
width: 90px;
height: 22px; 
margin: 0px 1px 0px 2px; 
padding: 7px 0px 0px 0px; 
text-align: center; 
text-transform: uppercase; 
font-size: 10px; 
color: #FFFFFF; 
background: url(images/tab_off.png)  ; 
font-weight: bold; 
text-decoration: none;
   }
  
  
a.menuButton:hover
{
background: url(images/tab_hov.png) ; 
color: green; 
text-decoration: none; 
}
</style>

</head>
<body>
<table  summary="Page">
	<tr>
		<td>
			<img src="images/cod4banner.png" alt="CoD4" />
		</td>
	</tr>
	<tr>  
		<td align="center">

				<a class="menuButton" href="link">Home</a> 
				<a class="menuButton" href="link">Members</a> 
				<a class="menuButton" href="link">Submit News</a>
				<a class="menuButton" href="link">Forum</a> 
				<a class="menuButton" href="link">Site Stats</a>
				<a class="menuButton" href="link">College Stuff</a>
				<a class="menuButton" href="link">TiltViewer</a>

		</td>
	</tr>


	<tr>
		<td>
			zs[fogjodxhkrjjntgletnj.df jkwefuithaigu
		</td>
	</tr>
</table>

</body>
 
I cant remove float because it messes the buttons up

Centre
centreco1.jpg

Left
leftrc9.jpg
 
It's late.... but I see what you mean.

Not tried this with the background image, but this might do it:

Code: 
<head>
<title>Welcome To My Webby</title>
<style>
body
{
background-image: url(images/bkgrnd.jpg);
font-family: arial;
}


table	
{
	background-color:black;
	margin-left: auto;
	margin-right: auto;
	padding:0;
	width: 905px;
	text-align:left;	
	color:white;
}

td.menu{
width:129px;
text-align: center; 
margin:0;
padding:0;
}



a.menuButton
{
height: 22px; 
text-transform: uppercase; 
font-size: 10px; 
color: #FFFFFF; 
background: url(images/tab_off.png)  ; 
font-weight: bold; 
text-decoration: none;
   }
  
  
a.menuButton:hover
{
background: url(images/tab_hov.png) ; 
color: green; 
text-decoration: none; 
}

ul.menu{
margin:0 auto;
padding:0;
width:630px;
}

li.menu{
float:left;
list-style:none;
width:90px;
text-align:center;
}

</style>
</head>
<body>
<table  summary="Page">
  <tr>
    <td><img src="images/cod4banner.png" alt="CoD4" /> </td>
  </tr>
  <tr>
    <td><ul class="menu">
        <li class="menu"> <a class="menuButton" href="link">Home</a></li>
        <li class="menu"><a  class="menuButton" href="link">Members</a></li>
        <li class="menu"><a class="menuButton" href="link">Submit News</a></li>
        <li class="menu"><a class="menuButton" href="link">Forum</a></li>
        <li class="menu"><a class="menuButton" href="link">Site Stats</a></li>
        <li class="menu"> <a class="menuButton" href="link">College Stuff</a> </li>
        <li class="menu"><a class="menuButton" href="link">TiltViewer</a></li>
      </ul></td>
  </tr>
  <tr>
    <td> zs[fogjodxhkrjjntgletnj.df jkwefuithaigu </td>
  </tr>
</table>
</body>
 
I think the problem is you are using tables for the layout and not divs, tables should only be used for tabular data where the layout should be done with divs.

Feel free to change the values around

container div has background set to black, banner to gray, and menu to blue. This is just so you can see the layout :)

For example:

HTML

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

<title>Welcome To My Webby</title>

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

</head>

<body>

<div id="container">

<div id="banner">

<p>Banner content can go here...</p>

</div> <!-- End of banner div -->

<div id="menu">
	
				<a class="menuButton" href="/index.php">Home</a>
				<a class="menuButton" href="/user.php">Members</a>
				<a class="menuButton" href="/submitnews.php">Submit News</a>
				<a class="menuButton" href="/e107_plugins/forum/forum.php">Forum</a>
				<a class="menuButton" href="/e107_plugins/log/stats.php?9">Site Stats</a>
				<a class="menuButton" href="http://oddwire.frih.org/e107_plugins/links_page/links.php">College Stuff</a>
				<a class="menuButton" href="/e107_plugins/tiltviewer/tiltviewer.php">TiltViewer</a>

</div> <!-- End of menu div -->

</div> <!-- End of container div -->

</body>
</html>

CSS

Code: 
body
{
	margin: 0;
	padding: 0;
}

#container	{
	position: relative;
	margin: 0 auto;
	width: 1000px;
	background:black;
}

#banner	{
	height:250px;
	background:gray;
}

#banner p	{
	margin: 0;
	padding: 0;
}

#menu	{
	position: relative;
	margin: 0 auto;
	width:700px;
	height:22px;
	background: blue;
	text-align:center;
}

a.menuButton
{
width: 90px;
float: left; 
height: 22px; 
margin: 0px 1px 0px 2px; 
padding: 7px 0px 0px 0px; 
text-align: center; 
text-transform: uppercase; 
font-size: 10px; 
color: #FFFFFF; 
background: url(images/tab_off.png)  ;
font-weight: bold; 
text-decoration: none;
   }
  
  
a.menuButton:hover
{
background: url(images/tab_hov.png) ;
color: green; 
text-decoration: none; 
}
 
You must log in or register to reply here.
Back
Top Bottom