Centering in Dreamweaver

**Tatty Diamond** · 07-01-2004, 04:03 PM

I am really struggling with something that must be so simple! I would like my websites to be centred on the screen (horizontally). I can do this by putting them in a table but as soon as I introduce layers on top of the table, they become unpredicatable! I have tried using %es on the layers i.e. l= 55%. I hvae alos tried using the positioning in CSS instead of the standard layers.

I usually end up having to left justify my site. Even then, when I am editing the left justified site in dreamweaver, the layers usually are placed differently from where I would expect them e.g. a positioning up and to the right might be the only way of getting it to look right on screen.

http://www.brickhillsrotary.co.uk/ is an example. In my dreamweaver screen the service above self layer is actually sitting below the yellow tab.

Any help is appreciated.

Thanks,

Tatty

**Criper2000** · 07-01-2004, 04:46 PM

try the <center> tag just after the body tag. and close it just before the closing body tag

**OmuCuSucu** · 04:52 PM

it IS below the yellow tab if i understand correctly the problem...

... don't see what exactly the problem could be ... and i am too tired to look at the code the way it is ... not nicely coded. i didn't seem to see any tag that would center it, any table property that would ... or at least a paragraph tag that would ... but then again i am dead tired and have an exam in 10 hours.

i do have some suggestions however: i don't understand the use of that havascript ... the effect of the menu can be made just as easily with CSS, and you'd actually save some space by not using graphics. from the looks of the website and of the code i'd say you are trying to make it the wrong way ... at least i'd choose a different coding style.

EDIT: with all the typos dued to my lack of sleep Criper2000 actually hit Submit before me though i was typing for 15 minutes .... need sleep

**Tatty Diamond** · 07-02-2004, 05:10 PM

Thanks for your responses - hope your exam went well.

I apologise for the link - I'm not sure it helped especially. I am still stuck however. I can create sites fine using CSS positioning (or tables) when I use left justification. However I am still struggling to centre them. I have attached some HTML (and then the attached CSS) code which works left justified. Can someone please point out what I need to do to this code to make it centre. Thanks for your help.

HTML:
<link href="dummy.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="background"><img src="Headerbar.jpg"></div>
<div class="headerbartext">
<div.class ="welcome"> Welcome to DigitalPic</div>
<div class="menuright">HOME - SITE MAP - EMAIL</div>
<div class = "logobar"><img src="Images/logobar.jpg"></div>
<div class = "headerbar2"><img src="Headerbar.jpg"></div>
<div class = "backgroundleft"><img src="Background.jpg"></div>
<div class = "backgroundtopright"><img src="backgroundtopright.jpg"></div>
<div class = "backgroundbottomright"><img src="backgroundright.jpg"></div>
</body>
</html>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
text-align: left;
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
Z-INDEX: 1;
FLOAT: none;
color: #9933FF;
}

DIV.headerbar{

VISIBILITY: visible;
PADDING-BOTTOM: 3px;
MARGIN: auto;
PADDING-TOP: 3px;
POSITION: absolute;
TOP: 0;

}

div.headerbartext{
POSITION: absolute;
TOP: 14px;
FLOAT: none;
left: 75px;

}
div.welcome{
POSITION: absolute;
TOP: 14;
left: 200px;
}

div.menuright{
POSITION: absolute;
TOP: 14px;
left: 600px;

}

DIV.logobar{
POSITION: absolute;
TOP: 40px;

}

DIV.headerbar2{
POSITION: absolute;
TOP: 190px;
}

DIV.backgroundleft{
POSITION: absolute;
TOP: 215px;
}

DIV.backgroundtopright{
POSITION: absolute;
TOP: 215px;
left:413px;
}

DIV.backgroundbottomright{
POSITION: absolute;
TOP: 415px;
left: 413px;
}

**Joobz** · 07-03-2004, 12:07 AM

OK, I may be misleading you but here goes:

I believe you need to have the css portion of your code on a seperate document with the .css extention instead of .htm

I believe your html page should look like this:

HTML:
<html>
<head>
<title>your title</title>
<link rel="stylesheet" type="text/css" href="dummy.css" />
</head>

<body>
<center>
<div class="background"><img src="Headerbar.jpg"></div>
<div class="headerbartext">
<div.class ="welcome"> Welcome to DigitalPic</div>
<div class="menuright">HOME - SITE MAP - EMAIL</div>
<div class = "logobar"><img src="Images/logobar.jpg"></div>
<div class = "headerbar2"><img src="Headerbar.jpg"></div>
<div class = "backgroundleft"><img src="Background.jpg"></div>
<div class = "backgroundtopright"><img src="backgroundtopright.jpg"></div>
<div class = "backgroundbottomright"><img src="backgroundright.jpg"></div>
</center>
</body>
</html>

with the "center" tags just inside of the body tags as Criper200 stated erlier.

Notice I used:
<link rel="stylesheet" type="text/css" href="dummy.css" />
Instead of:
<link href="dummy.css" rel="stylesheet" type="text/css">
(may be the same thing???)

I'm pretty new to all of this, but I may be right because it sure works for me .....

Hope I didn't mislead you

**Tatty Diamond** · 07-03-2004, 01:25 AM

Thanks joobz

That didnt work I'm afraid. I have got the CSS in a sperate style sheet - just copied it in here for ease.

Putting center seems to center some bits whilst leaving others where they are - I think that I need to move from actual pixels (e.g. left 320px) to percentages. However, when I do that, I cant work out a way of getting everything to center.

Tatty

**celticbrue** · 07-04-2004, 10:03 AM

Tatty,

Only had a very quick scan, but the problem you are now having is most likely down to the css. If you have used the CENTER tags as described, the reason that some of the content is NOT centering is likely to be a result of the position:absolute elements in your css.

Absolute positioning will override any other positioning such as center, align=left etc, in all browsers that support css positioning. Try removing the positioning elements of your css and see what happens.

Let us know how you get on.

Ian.

**LizzeyDripping** · 07-06-2004, 09:44 AM

What might help is putting a wrapper div round the whole of the contents within the body tag. Then using a new style, (I usually call mine wrapper), set the margins for that div so that top and bottom margins are '0'and the left and right margins are 'auto'. This will cause problems for some browsers, I believe, particularly IE5.5. If it does cause you problems (some people get away with it for some reason!) then in addition, add text-align:center to the body rule and text-align: left to the #wrapper.

Hope this helps!

**colin12** · 03-03-2008, 09:46 PM

I found this ;;;when I was having problems centering layers in dreamweaver 8;2
Try this... it's a quick fix, but it should work without too much code changing.

Immediately under the <body> tag, add the following two lines of code:
HTML Code:
<div style="width:100%">  <div style="position:relative; width:950px; margin:0 auto;"> 
Then, immediately before the </body> tag you need to close the two divs created above with:
HTML Code:
</div> </div> 
That should work for ya...

hope it helps
Colin

**chrishirst** · 03-04-2008, 03:35 AM

the thread is almost 4 YEARS OLD

I think it might be solved by now!!!!!

**colin12** · 03-04-2008, 03:31 PM

Quote:

Originally Posted by chrishirst

the thread is almost 4 YEARS OLD

I think it might be solved by now!!!!!

lol my bad! do they not delete old threads ?

**Capt Quirk** · 03-04-2008, 04:24 PM

Quote:

Originally Posted by chrishirst

the thread is almost 4 YEARS OLD

I think it might be solved by now!!!!!

OR... After 4 years, he finally has his answer?