Prev: Float and Shrinkwrap
Next: How to wrap text in <p> tag if the text has no spaces and isvery long
From: Jon on 3 Apr 2008 14:22

I'm trying to get my head around positioning so I can at last move away from a
table based layout. I am having a few positioning problems.

This is my test page here:
http://www.jonboyes.co.uk/test/jontestpage.html

I am experimenting with a few ideas from this page;
http://www.dacvs.org.uk/

As you can see, the first problem I have is that the black line (the 'bottom of the
page' effect) is not right down where I want it (see the second url above) below
everything else.

Second problem - I copied the footer div from the second page's style sheet but the
contents of this are obscured behind the main text container on my page instead of
being near the bottom of the screen as it all is on the page I am trying to
emulate.

Any help apreciated, thanks.
--
Jon
From: Bergamot on 3 Apr 2008 14:55
Jon wrote:
> I'm trying to get my head around positioning
>
> This is my test page here:
> http://www.jonboyes.co.uk/test/jontestpage.html

Don't just hack away without understanding what positioning is
*supposed* to do. Avoid absolute positioning of any kind until you learn
the pros and cons, and how to avoid problems like scalability, or lack
thereof. Learn the difference between standards mode and quirks mode
while you're at it, and why Verdana is a poor font choice.

Some reading for you:
http://brainjar.com/css/positioning/
http://www.cs.tut.fi/~jkorpela/quirks-mode
http://k75s.home.att.net/fontsize.html

--
Berg
From: dorayme on 3 Apr 2008 19:53
In article <MPG.225f3b5baa31302f9896a3(a)news-text.blueyonder.co.uk>,
Jon <me(a)nospamhere.com> wrote:

> Second problem - I copied the footer div from the second page's style sheet
> but the
> contents of this are obscured behind the main text container on my page
> instead of
> being near the bottom of the screen as it all is on the page I am trying to
> emulate.

In the model you are using, the bottom line is delivered as a border to
body. If you don't have enough content or if you stick in absolutely
positioned elements elsewhere, all bets are off and it won't go to the
bottom. The border you are seeing is not itself part of any absolute
positioning.

You might enjoy playing around with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="all">
* {margin: 0; padding: 0;}
div {position:absolute; bottom:0; border-bottom-width: 4px;
border-bottom-color: #000; width: 100%; border-bottom-style: solid;}
</style>
</head>
<body>
<div></div>
</body>
</html>

You can put in some text if you like and combine the div with a footer.
But be careful.

(For some of my clients, I would caution against putting any content in
at all. Neither in the div nor in the body. This works best without risk
of interfering with anything. Naturally, the chances of interference are
lessened as the existence of things are removed.

Just out of interest, you might care to know that some of my clients are
Tibetan Buddhists and that I am frequently asked to advise on ways to
explore the non-existing. On the way to a pure form of it, I advise on
intermediary steps. The above is one of those steps.)

--
dorayme
From: Jon on 4 Apr 2008 03:09
In article <doraymeRidThis-5E5031.09534604042008(a)news-vip.optusnet.com.au>,
doraymeRidThis(a)optusnet.com.au says...
> In article <MPG.225f3b5baa31302f9896a3(a)news-text.blueyonder.co.uk>,
> Jon <me(a)nospamhere.com> wrote:
>
> > Second problem - I copied the footer div from the second page's style sheet
> > but the
> > contents of this are obscured behind the main text container on my page
> > instead of
> > being near the bottom of the screen as it all is on the page I am trying to
> > emulate.
>
> In the model you are using, the bottom line is delivered as a border to
> body. If you don't have enough content or if you stick in absolutely
> positioned elements elsewhere, all bets are off and it won't go to the
> bottom.

Right, thanks for your input. I will play with your example.

--
Jon
 | 
Pages: 1
Prev: Float and Shrinkwrap
Next: How to wrap text in <p> tag if the text has no spaces and isvery long