Log in

View Full Version : Centering supposed "Easy?"


Schmoopy
10-08-2008, 09:20 AM
Well this is really annoying me now, my brother wants me to do his site for him which I did, but designing your first website on a 1440 x 900 screen really doesn't help when you realise that on other screens it looks completely different, so he wanted me to center it. At first I thought, easy enough... but after trying lots of things it seems that centering the site has made everything else messed up, like the rollovers, i've only implemented the first few but already they're giving me grief.
Offending page is here : http://www.bombthehills.com/beta.html.
Here is the code just in case you don't want to view page source / easier to see here:

--------------------------------------------------------------------------

<html>

<head>
<title> The Mountain Boarding Resource </title>
<META name="description" content="The Mountain Boarding Resource - Guides, Tips, Reviews, Riding Locations, News and Forums">
<META name="keywords" content="mountain boarding, mountainboarding, ATB, all terrain boarding, tips, guides, reviews, riding locations, forums, news ">
<link rel=stylesheet href="styles2.css" type="text/css">
</head>

<body bgcolor="black">



<img src="menu/buttons/newsOVER.png" style="display:none;"/>
<img src="menu/buttons/galleryOVER.jpg" style="display:none;"/>
<img src="menu/buttons/guidesOVER.jpg" style="display:none;"/>
<img src="menu/buttons/reviewsOVER.jpg" style="display:none;"/>
<img src="menu/buttons/ridingspotsOVER.jpg" style="display:none;"/>
<img src="menu/buttons/forumsOVER.jpg" style="display:none;"/>
<img src="menu/buttons/trickbookOVER.jpg" style="display:none;"/>
<img src="menu/buttons/faqOVER.jpg" style="display:none;"/>
<img src="menu/buttons/calendarOVER.jpg" style="display:none;"/>

<div align="center">
<img src="header/newheader2.jpg" style="display:block;">


<div style="position:relative; top:-53px; left:-295px;">
<a href="index.html">
<img src="header/home.jpg" alt="Bomb The Hills Home" border="none" name="Home" title="Home">
</a>
</div>


<div style="position:relative; top:-57px;">
<img src="menu/buttons/menuup.jpg" style="display:block">
</div>




<div style="position:relative; top:-87px; left:-458px; z-index:1">
<a href="news.html" onmouseOver="document.newsroll.src='menu/buttons/newsOVER.png'"
onmouseOut="document.newsroll.src='menu/buttons/newsUP.png'">
<img src="menu/buttons/newsUP.png" border="none" name="newsroll">
</a>
</div>


<div style="position:relative; top:-113px; left:-367px; z-index:1">
<a href="guides.html" onmouseOver="document.guidesroll.src='menu/buttons/guidesOVER.jpg'"
onmouseOut="document.guidesroll.src='menu/buttons/guidesUP.jpg'">
<img src="menu/buttons/guidesUP.jpg" border="none" name="guidesroll">
</a>
</div>

<div style="position:relative; top:-145px; left:-264px; z-index:1">
<a href="gallery.html" onmouseOver="document.galleryroll.src='menu/buttons/galleryOVER.jpg'"
onmouseOut="document.galleryroll.src='menu/buttons/galleryUP.jpg'">
<img src="menu/buttons/galleryUP.jpg" border="none" name="galleryroll">
</a>
</div>

</div>

--------------------------------------------------------------------------

Funny thing is, so far it works in IE which is well, surprising to say the least, but firefox isn't liking it,

Hope you can help,

Jack.
Twey
10-08-2008, 12:48 PM
To start with, validate your HTML (http://validator.w3.org/) (as HTML 4.01 Strict) and CSS (http://jigsaw.w3.org/css-validator/). Then, move all your CSS into a proper stylesheet, rather than having it scattered throughout the document. Then, stop using pixel sizes for everything and redesign the layout so it uses relative units.

On second thoughts, you might be better off starting from scratch. In my signature there is a link to a list of things you should avoid doing this time around.
Schmoopy
10-08-2008, 01:59 PM
Ok thanks very much :) I'll read up on it and get back to you.
Schmoopy
10-08-2008, 02:37 PM
Well, it's not all validated, but I really don't know how I'm meant to be able to position everything without using position:absolute and keeping it all in the center =(
Twey
10-08-2008, 02:57 PM
If you validate it properly, you can just use margin: 0 auto; on the container. No guarantees that it will work if you don't validate it, though.
Schmoopy
10-08-2008, 04:03 PM
Ok, well now it's all validated, just what i've done so far, i'm using the "text-align:center" property in my CSS file, but still no luck, it's not centering. Here is the updated code, thanks for your help so far :) :

Styles.Css:

body{
text-align:center;
margin:0;
padding:0;
background-color:black;
margin:0 auto;
}

img{
border:none;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> The Mountain Boarding Resource </title>
<META name="description" content="The Mountain Boarding Resource - Guides, Tips, Reviews, Riding Locations, News and Forums">
<META name="keywords" content="mountain boarding, mountainboarding, ATB, all terrain boarding, tips, guides, reviews, riding locations, forums, news ">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel=stylesheet href="styles2.css" type="text/css">
</head>

<body>


<div>
<img src="menu/buttons/newsOVER.png" alt="preload" style="display:none;">
<img src="menu/buttons/galleryOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/guidesOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/reviewsOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/ridingspotsOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/forumsOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/trickbookOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/faqOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/calendarOVER.jpg" alt="preload" style="display:none;">
</div>

<div>
<img src="header/newheader2.jpg" alt="Header" style="display:block;">
</div>

<div style="position:relative; top:-53px; left:-295px;">
<a href="index.html">
<img src="header/home.jpg" alt="Bomb The Hills Home" name="Home" title="Home">
</a>
</div>


<div style="position:relative; top:-57px;">
<img src="menu/buttons/menuup.jpg" alt="menu" style="display:block">
</div>




<div style="position:relative; top:-87px; left:-458px; z-index:1">
<a href="news.html" onmouseOver="document.newsroll.src='menu/buttons/newsOVER.png'"
onmouseOut="document.newsroll.src='menu/buttons/newsUP.png'">
<img src="menu/buttons/newsUP.png" alt="news" name="newsroll">
</a>
</div>


<div style="position:relative; top:-113px; left:-367px; z-index:1">
<a href="guides.html" onmouseOver="document.guidesroll.src='menu/buttons/guidesOVER.jpg'"
onmouseOut="document.guidesroll.src='menu/buttons/guidesUP.jpg'">
<img src="menu/buttons/guidesUP.jpg" alt="guides" name="guidesroll">
</a>
</div>

<div style="position:relative; top:-145px; left:-264px; z-index:1">
<a href="gallery.html" onmouseOver="document.galleryroll.src='menu/buttons/galleryOVER.jpg'"
onmouseOut="document.galleryroll.src='menu/buttons/galleryUP.jpg'">
<img src="menu/buttons/galleryUP.jpg" alt="gallery" name="galleryroll">
</a>
</div>

-------------------------------------------------------------------------

And here's the link to prove it's been validated:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bombthehills.com%2Fbeta.html

My CSS hasn't been validated but it looks pretty standard to me =/

Hope this helps.

Jack
boogyman
10-08-2008, 05:09 PM
the default width of any tag is 100% so if you do not assign the body a width having the margin:0 auto will not do anything.
Twey
10-08-2008, 05:36 PM
The CSS is valid :)

Of course the text-align property will not work: that is for aligning inline elements within block-level elements, whereas you are attempting to reposition a block-level element. Use margin as I explained above.

Also, you still need to remove all those pixel sizes if you expect it to work on differently-sized displays, and moving style into a separate stylesheet is strongly recommended for reasons of both neatness and efficiency.
Schmoopy
10-08-2008, 09:58 PM
Arrgg, I've tried making new classes, like a links container etc, but every image needs a different position on the page, there's no way to do it for every individual one without editing the style on the actual page, I can't link it from the stylesheet, but this is what I have now:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> The Mountain Boarding Resource </title>
<META name="description" content="The Mountain Boarding Resource - Guides, Tips, Reviews, Riding Locations, News and Forums">
<META name="keywords" content="mountain boarding, mountainboarding, ATB, all terrain boarding, tips, guides, reviews, riding locations, forums, news ">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel=stylesheet href="styles2.css" type="text/css">
</head>

<body>


<div>
<img src="menu/buttons/newsOVER.png" alt="preload" style="display:none;">
<img src="menu/buttons/galleryOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/guidesOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/reviewsOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/ridingspotsOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/forumsOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/trickbookOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/faqOVER.jpg" alt="preload" style="display:none;">
<img src="menu/buttons/calendarOVER.jpg" alt="preload" style="display:none;">
</div>

<div class="header">
<img src="header/newheader2.jpg" alt="Header">
</div>

<div class="homelink">
<a href="index.html">
<img src="header/home.jpg" alt="Bomb The Hills Home" name="Home" title="Home">
</a>
</div>


<div class="menucontainer">
<img src="menu/buttons/menuup.jpg" alt="menu">
</div>




<div class="linkscontainer">

<div style="position:relative; top:-96px; left:-460px;">
<a href="news.html" onmouseOver="document.newsroll.src='menu/buttons/newsOVER.png'"
onmouseOut="document.newsroll.src='menu/buttons/newsUP.png'">
<img src="menu/buttons/newsUP.png" alt="news" name="newsroll">
</a>
</div>

<div style="position:relative; top:-122px; left:-367px;">
<a href="guides.html" onmouseOver="document.guidesroll.src='menu/buttons/guidesOVER.jpg'"
onmouseOut="document.guidesroll.src='menu/buttons/guidesUP.jpg'">
<img src="menu/buttons/guidesUP.jpg" alt="guides" name="guidesroll">
</a>
</div>

<a href="gallery.html" onmouseOver="document.galleryroll.src='menu/buttons/galleryOVER.jpg'"
onmouseOut="document.galleryroll.src='menu/buttons/galleryUP.jpg'">
<img src="menu/buttons/galleryUP.jpg" alt="gallery" name="galleryroll">
</a>
</div>

CSS:

body{
text-align:center;
margin:0;
padding:0;
background-color:black;
margin:0 auto;
}

img{
border:none;
}

.linkscontainer{
margin:0 auto;
position:relative;
z-index:1;
padding:0;
}

.menucontainer{
margin:0 auto;
position:relative;
top:-62px;
z-index:1;
}

.header{
margin:0 auto;
position:relative;
z-index:1;
}

.homelink{
margin:0 auto;
position:relative;
top:-58px;
left:-295px;
z-index:2;
}

Now the News link is messing up again on firefox, but still fine on IE >.<.