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...
 
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...
 
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:)
 
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 :)
 
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