Presenting a Client Mockup - Help Required

Content
1

Hi Guys,

Quick question. I have designed a site mockup and I have bee asked to centre my design in the screen when viewed in the browser. Now, I have created two versions;one 980px (main content) and the other 1024px (main content + outer columns) in width.

Do I need to code my background and centre the main content image (980px wide) to do this? As if the images are opened in a browser at the miniute they are left aligned with sapce the right. Surly any image wont be aligned due to screen resolutions etc?

Many Thanks,

Tonz

2

Hi,

I’m not quite sure what you are asking but to center an element of fixed width you just need to use auto margins.

e.g. #outer{width:980px;margin:0 auto}

That will ensure it is always centered horizontally in the viewport.

If it is just a single image then you can do the same thing.

img.test{display:block;margin :0 auto}

I’m not sure if that’s what you are asking though :slight_smile:

3

Thanks Paul O’B for getting back,

Basically I have a mockup (.jpg) which I need displayed in the centre of the browser, as if you where viewing the site when its built, but obviously just as an image.

The total width(main content area) of my mockup is 980px which I will need to center and then I assume repeat my background images horizontally.

If you look @ the two image’s here, you should gather what Im working with:

Index of /Bluemoon_26-04-11

Many Thanks Again Paul.

Tonz

4

I assume you mean something like this.


<!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">
<title>Untitled Document</title>
<style type="text/css">
img{
    display:block;
    margin:auto;
}

</style>
</head>

<body>
<div><img src="http://www.tonerdigital.com/Bluemoon_26-04-11/blue_moonproductions_980px.png" width="980" height="1005"></div>
</body>
</html>
5