Centering banner and navigation

Charisma

05-20-2012, 03:49 PM

I want to center my banner and navigation right smack in the middle of my page. BUT only on my first page. Can someone help me please? :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Cj Web Consulting - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

<div id="container">
<div id="banner">

<img src="images/newbanner.jpg" alt="banner" width="275" height="275" >
</div>

<ul id="list-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div>

</body>

</html>

dan-dan

05-20-2012, 04:12 PM

If you want specific stylings for a template based on the URL, I'd probably use PHP and something along the lines of:

<div <?php echo ($_SERVER['REQUEST_URI'] == "/home.php" ?
'id="homeBanner"' : 'class="pagesBanner"'; ?>>

Charisma

05-20-2012, 04:21 PM

Thank you. But I'm familiar with PHP yet.

dan-dan

05-20-2012, 04:33 PM

Thank you. But I'm familiar with PHP yet.

Is that meant to say 'Thank you. But I'm familiar with PHP' or 'Thank you. But I'm familiar with PHP yet'.

Charisma

05-20-2012, 04:44 PM

LOL Sorry. It should say, I'm not familiar.

badwolf

05-20-2012, 04:50 PM

dan-dan

05-20-2012, 04:56 PM

Since it is a single instance try this inline style

<img src="images/newbanner.jpg" align="center" alt="banner" width="275" height="275" >

**EDIT: DOH! Sorry man I forgot about the menu. I wouldnt try this on your menu lol

It's a template, so it will be like that on all pages. The OP specifically stated that they wanted the style for particular page.

Charisma

05-20-2012, 05:55 PM

I tryed the following.

<img src="images/newbanner.jpg" align="center" alt="banner" width="275" height="275" >

But all it did was put a space between my banner and navigation.

dan-dan

05-20-2012, 06:10 PM

What so are you just trying to center it on all pages now?

You could use display: block; margin: auto;

Charisma

05-20-2012, 06:19 PM

I just want to center the banner and navigation on the first page only. Right smack in the middle.

Excavator

05-20-2012, 10:16 PM

Hello Charisma,
If you want to center banner and navigation on one page and not the rest, just give that page's body an id so you can specifically target that pages banner and nav.

Something like this for markup - <body id="centered">

And then this for the CSS -
#centered #banner {styling goes here}
#centered ul#list-nav {styling goes here}

The other pages, that don't have body#centered, will inherit from their default or some other parent.

_Aerospace_Eng_

05-20-2012, 10:19 PM

Did you want to vertically align your image and navigation as well or just horizontally? Can you post your current CSS?