How to center logo or splash (tableless). - Webmaster Forum - Web Design, Programming and SEO forums

10-25-2005, 12:11 PM

Sam Granger

Status: Request a custom title
Join date: Feb 2005
Location: The Netherlands
Expertise:
Software:

Posts: 2,616

iTrader: 19 / 88%

Sam Granger is on a distinguished road

How to center logo or splash (tableless).

I was just asked to help someone center a logo/splash on their website so I thought I'd share the code since it might come in handy for others.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<title>Your page title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {
	height:100%;
	margin: 0px;
	background: url(bg.gif);
} 
img {
	position: absolute;
	top: 50%;
	margin-top: -50px;
}
.center {
height:100%;
width:200px;
margin-left:auto;
margin-right:auto;
position:relative;
}
</style>
</head>

<body>
<div class="center"><img src="logo.jpg" width="200" height="100" /></div>
</body>
</html>
</body>
</html>

This is the code I used. I'll explain a bit what you need to edit. First of all, you need to edit the following part:

HTML Code:

	margin-top: -50px;

The value should be the same as your logo's height devided by 2. In this case, the logo is 100 pixels high. If your logo is for example 260 pixels high you would replace this code with the following:

HTML Code:

	margin-top: -130px;

Next, we need to edit the following:

HTML Code:

width:200px;

Change 200px into the width of your logo. Eg. if your logo is 346 pixels wide, you should have:

HTML Code:

width:346px;

Now you need to edit this:

HTML Code:

<img src="logo.jpg" width="200" height="100" />

Change the source of your logo/splash image and the width & height.

Last but not least, change the location of the background image!

10-25-2005, 12:13 PM

Lewis Malpas

Status: Request a custom title
Join date: Dec 2004
Location: United Kingdom
Expertise:
Software:

Posts: 2,064

iTrader: 1 / 100%

Lewis Malpas is on a distinguished road

Just what the doctor ordered, Thanks Sam!

10-25-2005, 11:52 PM

Status: Member
Join date: Aug 2005
Location: w3c
Expertise:
Software:

Posts: 193

iTrader: 0 / 0%

<Isurfr> is on a distinguished road

Works perfect.

Changed the height to 98% to remove the
scrollbar.

_|

10-26-2005, 01:23 AM

Shawon

Status: Request a custom title
Join date: Nov 2004
Location: New York City
Expertise:
Software:

Posts: 1,164

iTrader: 0 / 0%

Shawon is on a distinguished road

cool, but i dont think all that is needed though, well the way i do it uses the splash as a bg instead of an image

but i do it like this, just add into the body

Code:

background-image: url(images/splash.jpg);
background-position: center center;
background-repeat: no-repeat;

10-26-2005, 04:18 AM

jono1

Status: Non-conformist
Join date: Jul 2005
Location: Canberra, Australia.
Expertise:
Software:

Posts: 1,172

iTrader: 0 / 0%

jono1 is on a distinguished road

which, just as a side note, can be compressed to

Code:

background: #000000 url(url.jpg) no-repeat center center;

10-26-2005, 03:47 PM

Sam Granger

Status: Request a custom title
Join date: Feb 2005
Location: The Netherlands
Expertise:
Software:

Posts: 2,616

iTrader: 19 / 88%

Sam Granger is on a distinguished road

Originally Posted by Shawon

cool, but i dont think all that is needed though, well the way i do it uses the splash as a bg instead of an image

but i do it like this, just add into the body

Code:

background-image: url(images/splash.jpg);
background-position: center center;
background-repeat: no-repeat;

It depends on the situation. If you have a splash and also a background image you need the rest of th coding - if your splash doesn't have a background, then yes, you can use the code you just showed us. (unless you want to have your splash linked to your email for example.).

10-26-2005, 03:57 PM

Sam Granger

Status: Request a custom title
Join date: Feb 2005
Location: The Netherlands
Expertise:
Software:

Posts: 2,616

iTrader: 19 / 88%

Sam Granger is on a distinguished road

Originally Posted by <Isurfr>

Works perfect.

Changed the height to 98% to remove the
scrollbar.

_|

You shouldn't of had a scrollbar unless you removed the margin: 0px; or unless your image height couldn't fully be divided by 2 and you editted the "margin-top: -50px;" to something that makes the page need a scrollbar due to the page being 1 pixel too long.

10-27-2005, 12:25 AM

Deadman

Status: Junior Member
Join date: Oct 2005
Location: New York City
Expertise:
Software:

Posts: 69

iTrader: 0 / 0%

Deadman is on a distinguished road

I am a not a great html coder but can't you just put <center></center> tags around it to make it in the center.

10-27-2005, 03:25 AM

Musoka

Status: Member
Join date: Aug 2005
Location: US
Expertise:
Software:

Posts: 121

iTrader: 0 / 0%

Musoka is on a distinguished road

Originally Posted by Deadman

I am a not a great html coder but can't you just put <center></center> tags around it to make it in the center.

That will only center it vertically, if you want to center it vertically and horizantally then this code will work.

I thought putting it in a DIV with margin:auto; would do the job. Seems like a lot of work for such a little thing anyway.

10-27-2005, 05:41 AM

#10

Dray

Status: Request a custom title
Join date: Sep 2005
Location: Texas
Expertise:
Software:

Posts: 1,139

iTrader: 0 / 0%

Dray is on a distinguished road

Why, oh why couldn't CSS have a vertical-align element? It would make things so much easier!!!