...

View Full Version : 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
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

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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum