PDA

View Full Version : How do I centre my website?


djt
07-07-2009, 09:08 PM
I have just created a very simple site using CSS div tags.

I would like the site to be centred on screen but am not sure how to do this. Can anybody help me out?

www.thenewkitchendoorcompany.co.uk

Many thanks

DWcourse
07-07-2009, 10:04 PM
Left and right margins set to auto with CSS margin: 0 auto 0 auto;

Long answer: http://dwcourse.com/dreamweaver/centering-page-layout.php

djt
07-08-2009, 08:30 AM
Thanks for the quick reply.

I am not sure why (because I followed the step by step instructions) but it hasn't worked??

edbr
07-08-2009, 08:50 AM
where did you add that code , it will work

fattat
07-08-2009, 08:58 AM
because your id index1 , 2 , 3 and 4 adding position absolute,
so your wrapper must adding position relative,
if not the absolute position will refer the browser , not wrapper.
try adding the following code in your css , should be ok.:mrgreen:


#wrapper {
text-align: left;
width: 800px;
margin: 0 auto;
padding:0;
position:relative;
}

Corrosive
07-08-2009, 11:04 AM
because your id index1 , 2 , 3 and 4 adding position absolute,
so your wrapper must adding position relative,
if not the absolute position will refer the browser , not wrapper.
try adding the following code in your css , should be ok.:mrgreen:


#wrapper {
text-align: left;
width: 800px;
margin: 0 auto;
padding:0;
position:relative;
}

I am really impressed fattat. For someone who wanted to only use tables for everything two months ago you are right on the money :)

djt
07-08-2009, 05:00 PM
I am hopeless, I tried entering the code that fattat gave me and it has made no difference :(

Corrosive
07-08-2009, 05:06 PM
I am hopeless, I tried entering the code that fattat gave me and it has made no difference :(

Post a link to your page where the code has been added and I'll have a look. Don't worry, I am hopeless at stuff as well...for example, whilst answering your post I just poured tea all over my mouse mat!

Corrosive
07-08-2009, 05:18 PM
If it is the link you posted earlier then you are missing quite a vital step!

<body>
<div id="wrapper">
<div id="index1"></div>
<div id="index2"></div>
<div id="index3"></div>
<div id="index4"></div>
<div id="Layer1" style="position:absolute; left:15px; top:325px; width:592px; height:20px; z-index:1" class="type">1 VICARAGE LANE | BLACKPOOL | FY4 4EF | 01253 829127 | <a href="mailto:info@thenewkitchendoorcompany.co.uk">info@thenewkitchendoorcompany.co.uk</a> </div>
</div>
</body>
:wink:

MagicPower
07-09-2009, 03:02 AM
Take corrosive's code above and add the following code to your "thenewkitchendoorcompany.css". Put the code right at the top.

#wrapper {
position: relative;
width: 800px;
margin-right: auto;
margin-left: auto;
}

fattat
07-09-2009, 04:08 AM
do u have missing any code??
try the code i given below
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>The New Kitchen Door Company Ltd</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="thenewkitchendoorcompany.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
body {
padding:0;
margin:0;
text-align: center;
}
#wrapper {
text-align: left;
width: 800px;
margin: 0 auto;
padding:0;
position:relative;
}
#index1 {
background-image: url(images/index1.jpg);
background-repeat: no-repeat;
position: absolute;
height: 350px;
width: 200px;
left: 000px;
top: 0px;
}
#index2 {
background-image: url(images/index2.jpg);
background-repeat: no-repeat;
position: absolute;
height: 350px;
width: 200px;
left: 200px;
top: 0px;
}
#index3 {
background-image: url(images/index3.jpg);
background-repeat: no-repeat;
position: absolute;
height: 350px;
width: 200px;
left: 400px;
top: 0px;
}
#index4 {
background-image: url(images/index4.jpg);
background-repeat: no-repeat;
position: absolute;
height: 350px;
width: 200px;
left: 600px;
top: 0px;
}
.type {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #C4C5C7;
}
a:link {
color: #C4C5C7;
}
a:hover {
color: #FFFFFF;
}
</style></head>

<body>
<div id="wrapper">
<div id="index1"></div>
<div id="index2"></div>
<div id="index3"></div>
<div id="index4"></div>
<div id="Layer1" style="position:absolute; left:15px; top:325px; width:592px; height:20px; z-index:1" class="type">1 VICARAGE LANE | BLACKPOOL | FY4 4EF | 01253 829127 | <a href="

djt
07-10-2009, 06:34 PM
If it is the link you posted earlier then you are missing quite a vital step!

<body>
<div id="wrapper">
<div id="index1"></div>
<div id="index2"></div>
<div id="index3"></div>
<div id="index4"></div>
<div id="Layer1" style="position:absolute; left:15px; top:325px; width:592px; height:20px; z-index:1" class="type">1 VICARAGE LANE | BLACKPOOL | FY4 4EF | 01253 829127 | <a href="mailto:info@thenewkitchendoorcompany.co.uk">info@thenewkitchendoorcompany.co.uk</a> </div>
</div>
</body> :wink:

Excellent, that has done the trick.

Thanks a lot mate and thanks to everybody else for helping too.