Centering website

thepharcyde

thepharcyde

thepharcyde

Soldato
Joined
17 Mar 2004
Posts
8,259
I purchased HTML, XHTML & CSS for Dummies!!

Good section in there about centering your website so the left and right column are bought in by specifiying a resolution for your website

So the code i've used in my css files is:

#all {
background-color: #000000;
width: 1080px;
height: 800px;
margin-left: auto;
margin-right: auto;
}
Click to expand...
Everything in my Html is within the #all body.

In firefox it works fine, but in iexplorer the margin is still on the left hand margin and not centred.

Any ideas

Here is my complete HTML site

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>externalStyle.html</title>
<link rel = "stylesheet"
type = "text/css"
href = "css/photocss.css" />
</head>

<body>

<div id = "all">
<div id = "header">
<h1> Temp Title - Lee M Gilbert</h1>
</div>

<div id = "left">
<h2>Groups</h2>
<p>
Thank you for visiting my website.
</p>
<p>Best viewed using Internet Explorer 7</p>
<p>
All Photos taken using a Nikon D60 with standard VR Lense and 70-300mm Lense
</p>
</div>

<div id = "right">
<h2>Gallery</h2>
<a href="images/Wheat.jpg" rel="lightbox[roadtrip]"title="Wheat Field"> <img src="thumbnails/Wheat_jpg.jpg"></td>
<a href="images/collseum.jpg" rel="lightbox[roadtrip]"title="collseum"> <img src="thumbnails/collseum_jpg.jpg"></td>
<a href="images/blackswan.jpg" rel="lightbox[roadtrip]"title="Blackswan"> <img src="thumbnails/blackswan_jpg.jpg"></td>
<a href="images/Windmill.jpg" rel="lightbox[roadtrip]"title="Windmill"> <img src="thumbnails/windmill_jpg.jpg"></td>
<a href="images/F1_2.jpg" rel="lightbox[roadtrip]"title="F1_2"> <img src="thumbnails/F1_jpg.jpg"></td>
<a href="images/Orang.jpg" rel="lightbox[roadtrip]"title="orangutan"> <img src="thumbnails/Orang_jpg.jpg"></td>
<a href="images/Flamingo.jpg" rel="lightbox[roadtrip]"title="Flamingo"> <img src="thumbnails/Flamingo_jpg.jpg"></td>
<a href="images/Roquebrun.jpg" rel="lightbox[roadtrip]"title="Roquebrun"> <img src="thumbnails/Roquebrun_jpg.jpg"></td>
<a href="images/Thistle.jpg" rel="lightbox[roadtrip]"title="Thistle"> <img src="thumbnails/Thistle.jpg"></td>
<a href="images/ligtning Final PS.jpg" rel="lightbox[roadtrip]"title="Storm"> <img src="thumbnails/ligtning Final PS_jpg.jpg"></td>
<a href="images/Sky.jpg" rel="lightbox[roadtrip]"title="Sky"> <img src="thumbnails/Sky_jpg.jpg"></td>
</div>


<div id = "footer">
<h3>temp: this is for the footer<h3>
</div>

</body>
</html>
Click to expand...
 
It's because you haven't specified a doc type so IE is running in quirks mode.

Either specify a doctype or put text-align: center; on your body and then text-align: left; on your all div (I do this anyway for legacy browsers).
 
Last edited:
Another question.

I have some thumbnails that work fine with Lightbox 2, but for the footer <p>test</p> it is changing this to a url link for the last picture as highlighted in bold. I do not think I have closed off the table or something?

Any ideas :)

<div id = "right">
<h2>Gallery</h2>
<tr>
<a href="images/Wheat.jpg" rel="lightbox[roadtrip]"title="Wheat Field"> <img src="thumbnails/Wheat_jpg.jpg"></td>
<a href="images/collseum.jpg" rel="lightbox[roadtrip]"title="collseum"> <img src="thumbnails/collseum_jpg.jpg"></td>
<a href="images/blackswan.jpg" rel="lightbox[roadtrip]"title="Blackswan"> <img src="thumbnails/blackswan_jpg.jpg"></td>
<a href="images/Windmill.jpg" rel="lightbox[roadtrip]"title="Windmill"> <img src="thumbnails/windmill_jpg.jpg"></td>
<a href="images/F1_2.jpg" rel="lightbox[roadtrip]"title="F1_2"> <img src="thumbnails/F1_jpg.jpg"></td>
<a href="images/Orang.jpg" rel="lightbox[roadtrip]"title="orangutan"> <img src="thumbnails/Orang_jpg.jpg"></td>
<a href="images/Flamingo.jpg" rel="lightbox[roadtrip]"title="Flamingo"> <img src="thumbnails/Flamingo_jpg.jpg"></td>
<a href="images/Roquebrun.jpg" rel="lightbox[roadtrip]"title="Roquebrun"> <img src="thumbnails/Roquebrun_jpg.jpg"></td>
<a href="images/Thistle.jpg" rel="lightbox[roadtrip]"title="Thistle"> <img src="thumbnails/Thistle.jpg"></td>
<a href="images/ligtning Final PS.jpg" rel="lightbox[roadtrip]"title="Storm"> <img src="thumbnails/ligtning Final PS_jpg.jpg"></td>
<a href="images/Sky.jpg" rel="lightbox[roadtrip]"title="Sky"> <img src="thumbnails/Sky_jpg.jpg"></td>
</tr>

</div>


<div id = "footer">
<p>test</p>
</div>

</body>
</html>
Click to expand...
 
You need to close off your a tags.

<a href="images/Sky.jpg" rel="lightbox[roadtrip]"title="Sky"> <img src="thumbnails/Sky_jpg.jpg"></a>


To be proper, you should also close your image tags (add a trailing / to the end of the img tag) and for validation, you should have alt text specified.

<a href="images/Sky.jpg" rel="lightbox[roadtrip]"title="Sky"> <img src="thumbnails/Sky_jpg.jpg" alt="" /></a>
 
^ what he says. you have opened the element but not closed it which seems to be a recurring problem for you.

i'm trying to write this without sounding like i'm "insulting" you which i reall am not. Perhaps it's a good idea to write down somewhere like a little post it note saying remember to check all elements are closed and then with a quick list of how to close each one, e.g. most will close with a seperate tag e.g. <a></a><div></div><td></td> however there is some which close within the same tag so <img src='something' /><br /><hr /> etc.

if you ever hit a problem remember to check everything is closed.

also good luck with learning html/css. always good to see someone doing this reminds me when i didn't have a clue what was going on. any problems let us know we are a helpful bunch espcecially with html/css problems.
 
Cheers guys appreciate it. It's so finicky, cannot believe how difficult it is to format everything!! I have had to create a ie css sheet because of the differences between browsers:)
 
A couple of tips for you.

1) Install firebug for firefox which will let you edit your html/css and see the effects in real time - really cool and saves a lot of time saving and reloading pages.

2) Get a proper editor so you can see when your tags are closed and it will generally make your life a lot easier. if you cant afford something like dreamweaver or visual studio, use Notepad++ which is free.

3) Don't go setting the page width to 1080px. I guess you were just doing this for testing but obviously this is not going to work well for most people.
 
looks pretty good if a little dark but thats just my opinion, i prefer light not dark sites :)

also 1080px is a bad choice, on my laptop i have to scroll side ways which is terrible. google best website width or something similar to that.

also you will end up finding it a whole lot easier to design for firefox then add conditional statements for ie

what is it with website designers and photography. seems to be a really common thing these days.

that background image is horrible on the eyes. when making images like that which repeat make sure it repeats ok. your screen may only be 1020px wide but my pc screens are 1920 which means the bg looks really bad.

also Java and Javascript and completely different things. lightbox uses javascript which can be shortened down to js sometimes
 
Mammalian said:
looks pretty good if a little dark but thats just my opinion, i prefer light not dark sites :)

also 1080px is a bad choice, on my laptop i have to scroll side ways which is terrible. google best website width or something similar to that.

also you will end up finding it a whole lot easier to design for firefox then add conditional statements for ie

what is it with website designers and photography. seems to be a really common thing these days.

that background image is horrible on the eyes. when making images like that which repeat make sure it repeats ok. your screen may only be 1020px wide but my pc screens are 1920 which means the bg looks really bad.

also Java and Javascript and completely different things. lightbox uses javascript which can be shortened down to js sometimes
Click to expand...

Thx for the comments and suggestions. I just hate the photohosting sites like flickr, photobucket etc which is why I wanted to build my own :)

Will 1024x768 be better suited?

background is a start, not sure what I want to do yet with this. Also want to do a better header as well :)
 
Variable width is better for most types of content sites. Take this website for a good example.

Sometimes you have to code a fixed width layout in which case you need to make a compromise. If you have an audience of tech users like OCUK, you can assume that most people will have uber monitors so you can do 10000000000000 pixels if you want. For general accessibility, 1024x768 is the accepted standard resolution so you should aim to use no more than 960px across (as seen on BBC news, Yahoo, facebook etc)
 
Not totally clued up on variable widths, as i'm very very new to this.

I have made a few changes based on the above comments, appreciate all the help.

For my first website, I am very please with the results. Exactly what I am after :). Will continue to tweak as it grows with sub pages for gallery themes etc .
 
You must log in or register to reply here.
Back
Top Bottom