Computing.Net > Forums > Web Development > CSS Relative Positioning

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

CSS Relative Positioning

Reply to Message Icon

Name: Tautitan
Date: November 2, 2005 at 13:39:00 Pacific
OS: Win2000 Professional
CPU/Ram: AMD 2700+ / 512 PC2700
Comment:

I have a slight problem regarding a page i am designing. I am trying to center align my entire site using css and to a certain extent i have done this. The problem is i have a large amount of white space at the bottom of the page and most of the positioning seems to be very random. The tutorial i found told me to position everything inside the <div> to be aligned as relative but i have yet to discover what they are relative to.

The page can be found here http://www.bbcomputing.co.uk/testing/index.php

and the style sheet here

http://www.bbcomputing.co.uk/testing/style.css

Any help, as always, is greatly appreciated.

Matt

matt@bbcomputing.co.uk

www.bbcomputing.co.uk



Sponsored Link
Ads by Google

Response Number 1
Name: Laler
Date: November 2, 2005 at 14:52:38 Pacific
Reply:

the whitespace isn't olny at the bottom. i have 1024*768 with firefox, and a horizontal scrollbar shows up, but when scrolled will only reveal a big whitespace at the right.

I don't know why that happens :D

Despite what people said, I still use tables where I found that it's not possible or hard to do with css.

For example, to centerize a site, I'll create a 1 row and 1 column table immediately after [body], and put everything else inside it.

Then, center aligning, or even vertical, will be easy. And to my experience, this table-based alignement is more browser friendly than using css.

An easy to see sample is my contact page above. Here's the CSS

I don't mean to tell you to re-code your whole site. It would be great if you can solve your problem by keep using CSS :)

---
Site of the Day


0

Response Number 2
Name: Tautitan
Date: November 3, 2005 at 04:42:01 Pacific
Reply:

Thankyou for your reply it was very helpful. Luckily the site is only the homepage for the moment so recoding it is easy enough. However i do wish to keep using CSS instead of having to revert to tables. As i said the center alignment of the whole thing is the easy part, it is the relative positioning of the elements in relation to the enclosing div tag which i wish to know more about.

Matt

matt@bbcomputing.co.uk

www.bbcomputing.co.uk


0

Response Number 3
Name: guyshahar
Date: December 31, 2005 at 04:19:44 Pacific
Reply:

As I have found after a lot of experimentation, and reading books and tutorials who all say different things, most of which do not work, is:

ABSOLUTE POSITIONING: This is relative to the containing/parent element.

RELATIVE POSITIONING: This is relative to where the element would be in the normal flow of things.

For example, if you had
<div id = "side bar"> (with "top: 100px;")
- then some other stuff here
<div id = "menuheader">
....
</div>
</div>

If you set the menuheader to "top: 50px,",
with ABSOLUTE POSITIONING, it would start 50px from the top of the side-bar - i.e. 150px from the top of the screen. This would be the case even if there was something else already there.
With RELATIVE POSITIONING, it would just leave a gap of 50px from where you had got to , and then put itself at the end of that gap.

I have found that relative positioning is useful if you are only changing the position of one item in a flow of items, but if you use it too freely, it can put everything else out of alignment. That is probably why your positioning appears to be random.


0

Sponsored Link
Ads by Google
Reply to Message Icon

Related Posts

See More







Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: CSS Relative Positioning

Java serves CSS to diff'nt browsers www.computing.net/answers/webdevel/java-serves-css-to-diffnt-browsers/1095.html

Absolute positioned scrollable area www.computing.net/answers/webdevel/absolute-positioned-scrollable-area/75.html

td valign=middle - issue... www.computing.net/answers/webdevel/td-valignmiddle-issue/3546.html