Centering my Website [Archive]

Click to See Complete Forum and Search --> : Centering my Website

B1lancer

12-12-2008, 05:06 AM

I'm having real trouble centering my website (http://www.martinaxford.co.uk), the most difficult page is the portfolio, how can I center this site so it will be centered in all browsers/screen resolutions?

Many thanks for any and all help

Regards, Jack

Fang

12-12-2008, 06:33 AM

http://www.webdeveloper.com/forum/showpost.php?p=946357&postcount=2

B1lancer

12-12-2008, 06:44 AM

Cheers for the reply,

I have just tried that but it hasn't worked, the other div elements didn't get inside the div container and only bits of the JS/CSS image gallery were shifted.

Any other ideas?

Many thanks, Jack

B1lancer

12-12-2008, 06:48 AM

Did I apply all tags correctly?

<html>
<head>
<title>Martin Axford Photography</title>
<META name="KEYWORDS" content="Photography, Photographs, Weddings, Martin Axford, Axford, Camera">
<meta name="author" content="Jack Royle">
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="description" content="Photography site of Martin Axford, diverse portfolio">
<META NAME="REVISIT-AFTER" CONTENT="3 DAYS">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="RATING" CONTENT="GENERAL">
<META content="OK for Kids" name=RATING>

<br><br><br><br><br>

<style type="text/css">
#centered {text-align:center;}
#container {margin:0 auto; width:80%; text-align:left;}

</style>

<style media="screen,projection" type="text/css">

/* general styling for this example */
* { margin: 0px; padding: 0; }
body { padding: 20px; }

/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 60% 40%;

cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 200px; left: 180px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

</style>

<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; }

</style>");</script><style type="text/css"> #gallery { display: none; } </style>

<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}

gal.addEvent(window,'load', function() {
gal.init();
});
</script>

</head>
<body>
<body bgcolor="#000000">
<body link="#C0C0C0" vlink="#808080" alink="#ffffff">

<div id="centered"><div id="container">
<div id="contents" style="border:1px solid red;">
<p>

<div style=" top: 0; left: 0; position: absolute; z-index: 1; visibility: show;">
<a href="index.html"><img src="images\main_banner.jpg" align="center" border="0"></a>
</div>

<div style=" top: 125; left: 64; position: absolute; z-index: 1; visibility: show;">
<a href="portfolio.html"><img src="images\porfolio_button.jpg" align="center" border="0"></a>
</div>

<div style=" top: 125; left: 185; position: absolute; z-index: 1; visibility: show;">
<a href="about.html"><img src="images\about_button.jpg" align="center" border="0"></a>
</div>

<div style=" top: 125; left: 305; position: absolute; z-index: 1; visibility: show;">
<a href="contact.html"><img src="images\contact_button.jpg" align="center" border="0"></a>
</div>
<br><br><br><br>

<ul id="jgal">
<li title="Ville Franche" style="background-image: background-repeat: no-repeat;" class="active"><img

src="10th_Nov_07_Villefranche.jpg" alt="10th November 2007: Light and shade at Villefranche on the French

Riviera."></li>
<li title="Broad Hinton" style="background-image: background-repeat: no-repeat;"><img

src="24_Aug_97_Broad_Hinton2.jpg" alt="24th August 1997: Broad Hinton from the Ridgeway on the Marlborough

Downs."></li>
<li title="Brussels" style="background-image: background-repeat: no-repeat;"><img

src="16_Sept_01_Brussels.jpg" alt="16th September 2001: Curved glass and clouds, Schaarbeek, Belgium"></li>
<li title="New Haven" style="background-image: background-repeat: no-repeat;"><img

src="18_Feb_95_Newhaven.jpg" alt="18th February 1995: Fishing on the pier at Newhaven, Sussex"></li>
<li title="Wilton Windmill" style="background-image: background-repeat: no-repeat;"><img

src="24_April_94_Wilton_Windmill.jpg" alt="24th April 1994: Wilton Windmill near Great Bedwyn, Wilts"></li>
<li title="Temple of Karnak" style="background-image: background-repeat: no-repeat;"><img

src="27th_Dec_04_Temple_of_Karnak.jpg" alt="27th December 2004: Obelisk at the Temple of Karnak, Luxor,

Egypt"></li>
<li title="New York" style="background-image: background-repeat: no-repeat;"><img

src="28_Sept_00_New_York.jpg" alt="28th September 2000: Reflections on 42nd Street, New York, USA"></li>
<li title="Wexford" style="background-image: background-repeat: no-repeat;"><img

src="G119_16th_Apr_1994_Wexford.jpg" alt="16th April 1994: Culture Street, Wexford, Ireland"></li>
<li title="Esbjerg" style="background-image: background-repeat: no-repeat;"><img src="12_July_97_Esbjerg.jpg"

alt="12th July 1997: Fishing boat in the North Sea off Esbjerg, Denmark"></li>
<li title="Loch Carron" style="background-image: background-repeat: no-repeat;"><img

src="8th_Aug_1993_Lock_Carron_Scotland.jpg" alt="8th August 1993: Loch Carron, Scotland"></li>

</ul>
</p>
</div>
</div></div>

</body>
</html>

aj_nsc

12-12-2008, 07:07 AM

The coding on your page is really not that good. I mean, you have 3 body tags. I took a look at this earlier today and after realizing that you absolutely positioned all your links and header, I decided to skip this thread. But I came back after I saw somebody responded to it, and I decided to go over your portfolio page and help you out a little bit.

Take a look at the differences between this code and yours and you should be able to figure out how to center your other pages - it won't work if you have absolutely positioned elements everywhere, but fortunately for you, it looks like you can just delete the div tags that you have absolutely positioned and it won't make a difference at all to your layout.

Also, I've only tested this in firefox because that's the only browser I could do the online editing in with the webdeveloper tool bar. I'm not sure what, if any, quirks, might pop up in IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Martin Axford Photography</title>
<META name="KEYWORDS" content="Photography, Photographs, Weddings, Martin Axford, Axford, Camera">
<meta name="author" content="Jack Royle">
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="description" content="Photography site of Martin Axford, diverse portfolio">
<META NAME="REVISIT-AFTER" CONTENT="3 DAYS">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="RATING" CONTENT="GENERAL">
<META content="OK for Kids" name=RATING>

<style media="screen,projection" type="text/css">

/* general styling for this example */
* { margin: 0px; padding: 0; }

#container { width: 65%; margin: 0 auto; }

/* begin gallery styling */
#jgal { list-style: none; width: 200px; padding-top: 50px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 60% 40%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 200px; left: 180px; display: none; }
#jgal li.active img { display: block; margin-top: -25px; padding-bottom: 50px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

</style>

<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script><style type="text/css"> #gallery { display: none; } </style><style type="text/css"> #gallery { display: none; } </style>

<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}

gal.addEvent(window,'load', function() {
gal.init();
});
</script>
</head>
<body>

<div id="container">

<div>
<a href="index.html"><img src="images%5Cmain_banner.jpg" align="center" border="0"></a>
</div>

<a href="portfolio.html"><img src="images%5Cporfolio_button.jpg" align="center" border="0"></a>
<a href="about.html"><img src="images%5Cabout_button.jpg" align="center" border="0"></a>
<a href="contact.html"><img src="images%5Ccontact_button.jpg" align="center" border="0"></a>

<ul id="jgal">
<li title="10th November 2007: Light and shade at Villefranche on the French Riviera." style="background-image: url(http://valvedesign.co.uk/photography/10th_Nov_07_Villefranche.jpg); background-repeat: no-repeat;" class="active"><img src="10th_Nov_07_Villefranche.jpg" alt="10th November 2007: Light and shade at Villefranche on the French Riviera."></li>
<li title="24th August 1997: Broad Hinton from the Ridgeway on the Marlborough Downs." style="background-image: url(http://valvedesign.co.uk/photography/24_Aug_97_Broad_Hinton2.jpg); background-repeat: no-repeat;"><img src="24_Aug_97_Broad_Hinton2.jpg" alt="24th August 1997: Broad Hinton from the Ridgeway on the Marlborough Downs."></li>
<li title="16th September 2001: Curved glass and clouds, Schaarbeek, Belgium" style="background-image: url(http://valvedesign.co.uk/photography/16_Sept_01_Brussels.jpg); background-repeat: no-repeat;"><img src="16_Sept_01_Brussels.jpg" alt="16th September 2001: Curved glass and clouds, Schaarbeek, Belgium"></li>
<li title="18th February 1995: Fishing on the pier at Newhaven, Sussex" style="background-image: url(http://valvedesign.co.uk/photography/18_Feb_95_Newhaven.jpg); background-repeat: no-repeat;"><img src="18_Feb_95_Newhaven.jpg" alt="18th February 1995: Fishing on the pier at Newhaven, Sussex"></li>
<li title="24th April 1994: Wilton Windmill near Great Bedwyn, Wilts" style="background-image: url(http://valvedesign.co.uk/photography/24_April_94_Wilton_Windmill.jpg); background-repeat: no-repeat;"><img src="24_April_94_Wilton_Windmill.jpg" alt="24th April 1994: Wilton Windmill near Great Bedwyn, Wilts"></li>
<li title="27th December 2004: Obelisk at the Temple of Karnak, Luxor, Egypt" style="background-image: url(http://valvedesign.co.uk/photography/27th_Dec_04_Temple_of_Karnak.jpg); background-repeat: no-repeat;"><img src="27th_Dec_04_Temple_of_Karnak.jpg" alt="27th December 2004: Obelisk at the Temple of Karnak, Luxor, Egypt"></li>
<li title="28th September 2000: Reflections on 42nd Street, New York, USA" style="background-image: url(http://valvedesign.co.uk/photography/28_Sept_00_New_York.jpg); background-repeat: no-repeat;"><img src="28_Sept_00_New_York.jpg" alt="28th September 2000: Reflections on 42nd Street, New York, USA"></li>
<li title="16th April 1994: Culture Street, Wexford, Ireland" style="background-image: url(http://valvedesign.co.uk/photography/G119_16th_Apr_1994_Wexford.jpg); background-repeat: no-repeat;"><img src="G119_16th_Apr_1994_Wexford.jpg" alt="16th April 1994: Culture Street, Wexford, Ireland"></li>
<li title="12th July 1997: Fishing boat in the North Sea off Esbjerg, Denmark" style="background-image: url(http://valvedesign.co.uk/photography/12_July_97_Esbjerg.jpg); background-repeat: no-repeat;"><img src="12_July_97_Esbjerg.jpg" alt="12th July 1997: Fishing boat in the North Sea off Esbjerg, Denmark"></li>
<li title="8th August 1993: Loch Carron, Scotland" style="background-image: url(http://valvedesign.co.uk/photography/8th_Aug_1993_Lock_Carron_Scotland.jpg); background-repeat: no-repeat;"><img src="8th_Aug_1993_Lock_Carron_Scotland.jpg" alt="8th August 1993: Loch Carron, Scotland"></li>

</ul>

</div>

</body>
</html>

I think you might want to have a look at some tutorials on how to make HTML pages, and use CSS to style them.

People on this forum help each other out when they come across a problem they can't fix, they don't teach people web design from scratch, and it certainly looks like you may need a primer or two in it.

EDIT: I screwed up a part of the code, I placed a <ul where there shouldn't have been one. It's fixed now, sorry about that, it might cause some problems for you if you copy and paste it and wonder why it isn't working.

B1lancer

12-12-2008, 07:19 AM

Cheers for the help, I know my code isn't very good, I'm a graphic artist which is where my skills are however I like to try and put together sites using some of my graphics (in this instance I am trying to help out a mate who knows even less than I do about HTML!) but they often end up a bit of a mish-mash of code, a frankenstein of a site!

I think the main image displayed by the CSS generated gallery is abosolute, so I will have to have a bit of a play with that me thinks.

Kindest regards, Jack

Fang

12-12-2008, 08:50 AM

This will center the site, but I would advise against using frames; they will cause problems with referencing and search engines amongst other things:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>martinaxford.co.uk</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="revisit-after" content="5 days">
<style type="text/css">
html {background:#000;}
frameset {margin:auto;width:771px;}
</style>
</head>
<frameset rows="100%,*" framespacing="0" border="0" frameborder="0">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
<frame name="main" src="http://photography.valvedesign.co.uk" scrolling="auto">
</frameset>
</html>