Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Problems centralising my website

Started by Paneth, Sep 11 2008 02:55 PM

You cannot reply to this topic
Go to first unread post

6 replies to this topic

#1 Paneth

Young Padawan

Members
8 posts

Posted 11 September 2008 - 02:55 PM

Hello everyone

So to set the scene, I've currently been working to code my first weblayout, and although progress has been slow it has been steady and I feel I am reaching the final stages of development. However it is at this point that I have reached some difficulty.

I am currently attempting to centrally align my website and I have currently used a technique that I have found suggested on many tutorial websites;

div {margin-right:auto;margin-left:auto;width:800px;}

. However the code seems to extend my background and although it does cause it to become centrally aligned relative to the background a scrollbar is necessary in order to see it.

Here is the layout without the centralising piece of code;

And here is the layout with the centralising code and resultant problem;

(sorry about the image quality but they are just to show the problem)

Finally here is a section of the code relating to the alignment;

HTML

<body>
<div id="wrapper">
Content etc
</div>
</body>

CSS

body {
text-align: center;
background-image: url(images/bg_gradient.gif);
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
color: #616161;
margin: 0;
padding: 0;
}

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

I apologise for taking so long to explain but I hope you have a clear enough description to be able to help me with my problem and I really look forward to your solutions!

Paneth

Back to top

#2 rc69

PHP Master PD

P2L Staff
3,827 posts

Gender:Male
Location:Here
Interests:Web Development

Posted 11 September 2008 - 05:55 PM

1. Remove the text-align properties from both the body and #wrapper (they aren't needed, though they aren't technically hurting anything either).
2. Remove position:absolute; from #wrapper.

Back to top

#3 Arsenal19

Young Padawan

Members
41 posts

Posted 11 September 2008 - 07:44 PM

Try this....

This is the code I use to align my website.

#wrapper {

width:800px;
margin-right: auto;
margin-left: auto;
text-align: left;
clear: both;
height: 100%;

}

The text-aligns weren't hurting you. You can leave them in if you want the text to show up left inside your wrapper.
Margin-left and right use to auto to align the div inside its container (ie. body). Hope this helps let me know if you have any more problems.

Arsenal19

Back to top

#4 _MasterMind_

Guests

Posted 12 September 2008 - 06:00 AM

Thats the proper piece of code

I am sure it will work for Paneth

All the best dude

Back to top

#5 Paneth

Young Padawan

Members
8 posts

Posted 13 September 2008 - 09:57 AM

Hey everyone,

Thank you so much for all of your replies but unfortunately for me none of them seem to be working :friends:

. After trying each method I have found that in fact the only attributes which do make a change to my layout are the text-align elements. (however I understand that my IE7 browser should infact not require the text-align elements and it was only for previous browsers which would not have accepted the margins on the divs, which is also confusing!)

I have attached below my HTML and CSS files, and I would be extremely grateful if you could have a look so that you can see if there is anything I'm doing wrong; I'm sure you'll find alot but primarily about the centralisation would be really great :flowers:

.

medweb.html 7.92K 133 downloads

medstyle.1.css 11.57K 139 downloads

Thank you!

Paneth

Back to top

#6 Ghost

Honored P2L Member

P2L Staff
675 posts

Gender:Male
Location:Australia

Posted 14 September 2008 - 08:56 PM

The code I use is:

CSS

body{
text-align: center;
margin: 0;
padding: 0;
}

#wrapper{
margin: 0 auto;
text-align: left;
width: 900px;
}

The text-align:center; centers the layout in IE6 because IE6 doesn't read margin: 0 auto like Firefox does. The text-align: left; then corrects the text alignment.

Back to top

#7 Paneth

Young Padawan

Members
8 posts

Posted 19 September 2008 - 12:05 PM

Hey everyone

Thank you so much for the help!

Just in case anyone else ever happens to experience the same problem; and I know this forums are really helpful for people who want to learn, the issue I was having was as a result of using absolute positioning.

The absolute positioning was overriding the "wrapper", which meant that the pictures/content etc all went to the exact left and top attributes. In order to centralise the website using a wrapper you will have to use relative positioning.

Now for me relative positioning was another hurdle I wasn't ready to face, so what I would suggest is that use the following html:

<body>
<div id="wrapper">
Content
</div>
</body>
</html>

and corresponding css:

body{
text-align: center;
margin: 0;
padding: 0;
}

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

With the position: relative; element in the wrapper of your css you are now free to use absolute positioning in the width that you have set!

For more information I found this site really helpful!

Once again thank you to everyone for your help and I hope this helps anyone else with the same difficulty.

Paneth