Zymic Webmaster Forums > Centre Align How

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Deaf_Raiders

Jun 25 2008, 06:46 PM

I am also having some problems i am trying to centre all of it bit its letting it out wide to fill the maximum screen.

link: http://deafraiders.zymichost.com/template.htm

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>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

</style>
<link href="nav.css" rel="stylesheet" type="text/css" />
</head>
<div="wrapper"><div id="banner">
  <img src="images/banner.gif" alt="banner" width="597" height="218" /></p>
   </div>
<div id="nav" align="center">
  <ul name="nav" align="center">
      <li id="current"> <a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Guestbook</a></li>
      <li><a href="#">Links</a></li>
    </ul>
</div>
<div>
   <div id="content" align="center">
     <p> </p>
     <h1>Welcome to the new Deaf Jet Ski website</h1>
      <div align="left"><br />

      </div>

</div>
</div>
</div>
</body>
</html>

Css code nav.css

CODE

#nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    left: 11px;
    background-color: #04527B;
    text-align: center;
    height: 40px;
    position: absolute;
    top: 234px;
    width: 997px;
}
#nav li {
    float:left;
    background: url(images/end.gif)
     no-repeat right top;
    margin:0;
    padding:0;
    text-align: center;
    }

#nav a {
    display: block;
    background-image: url(images/lst.gif);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 5px;
    height: 25px;
    padding-left: 20px;
    padding-right: 25px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;

}

#nav {
    float:left;
    width:auto;
    font-size:93%;
    line-height:normal;
    z-index: 1;
    }
#nav #current a {
    background-image:url(images/start_ov.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: normal;
    text-decoration: underline;
    }
#nav #current {
    background-image:url(images/end_ov.gif);
    }
#nav  a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}
#wrapper {
    margin: 0 auto;
    width: 850;
    }

Banjo

Jun 25 2008, 07:56 PM

What exactly do you want to be centred?

You could try using the centre tag

QUOTE

prixat

Jun 25 2008, 09:14 PM

Hi Deaf Raider

I see the 'menubar' is off to the left, is that what you mean?

first there are a couple of typos:
you're missing a starting <body> tag

and
<div="wrapper"> should be <div id="wrapper">

Deaf_Raiders

Jun 25 2008, 10:37 PM

QUOTE(prixat @ Jun 25 2008, 09:14 PM)

Hi Deaf Raider

I see the 'menubar' is off to the left, is that what you mean?

first there are a couple of typos:
you're missing a starting <body> tag

and
<div="wrapper"> should be <div id="wrapper">

Yeah i want the nav to the middle

MrTouz

Jun 25 2008, 11:40 PM

QUOTE(Deaf_Raiders @ Jun 25 2008, 10:37 PM)

Yeah i want the nav to the middle

CODE

#nav {
    float:left;
    width:auto;
    font-size:93%;
    line-height:normal;
    z-index: 1;
    }

want the nav in the middle but its floating left, remove float left and put text-align:center;

Also i see on some of your divs you have align="center" it actually does not exist, its really text-align:center;

IamShipon1988

Jun 26 2008, 04:19 AM

Generally this sort of issue is resolved by giving the navigation container a fixed width. When a fixed width is given the css property value of margin: auto; can be given. That will place your navigation centered on to the page. But you do have to play around with the width before you get it looking the way you want it for all browsers.

Try using something similar to this

CODE

#nav {
    width: 500px;
    margin: auto;
    font-size:93%;
    line-height:normal;
    z-index: 1;
    }

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.