Div and background problems

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I've been working on my site a lot and I think it is much improved.  There
are still two problems with the main page that are driving me nuts.  The
first is that I cannot figure out how to get my div elements to have a
height equal to the entire screen.  The solution I've seen for this is to
just set the page background color to the same background color as the
shorter div element, and it will appear that the columns of color extend the
full length of the page.  In my situation, I hope to use this same layout
for many different pages.  Since the content is different, one page may have
the navigation column as the longest column while another has the content
column as the longest column.  This prevents the solution of setting the
page's background color from working.  Is there any way to tell a div
element to extend the full length of the page?  I have tried using the
height property, but it only seems to accept exact lengths and not percents.

The other problem I am having is that my background image is no longer
centered under the content.  I want it to be fixed and centered, but it
needs to be centered on the content and not the entire page.  How do I add a
left offset to the background image when it's fixed?

Also, I read somewhere that using the div tag in the way that I am is not
good practice.  This was before I was actually using the div tag, so I
didn't read it too closely, but the idea was something like that's not the
intended purpose of the div tag and won't work on all browsers.  If that's
true, then what alternative do I have?  I already tried doing this layout
with a table and that was a mess.

For those who read my last post, I have given up on the fixed nav-bar.  It
just caused more problems than it solved, particularly with low screen
resolutions.  You can see my current page here:


Thanks in advance!


Re: Div and background problems

Kris pounced upon this pigeonhole and pronounced:
Quoted text here. Click to load it


Quoted text here. Click to load it

Screen resolutions are unimportant. See:

"So there are two accurate answers to "Which resolution should I design

    * All of them
    * None of them

Quoted text here. Click to load it

You must have introduced other problems. See my Firebird view:

Hopefully before you are finished, there will be a <title> element.

You still have some errors. See:  http://validator.w3.org /

A fixed-position nav-column is not difficult, if you ignore IE.

Your background image is way too bright and interferes with the reading of
the content.

   -This space intentionally left blank.

Re: Div and background problems

On 10/3/03 12:16 PM, in article 9Wjfb.12476$LI.4959@twister.nyroc.rr.com,

Quoted text here. Click to load it

Oops.  I did forget the <title>.  I'm converting this from a page that used
frames.  That will get added in before I'm done.

I think screen resolution does matter when you're using a fixed nav bar
because if the nav bar gets too long and goes off the page there is no way
the user can see the bottom of it.  That's the error I'm trying to avoid by
simply switching to a normal nav bar.

I think I know why the page is displaying incorrectly in your browser.  For
some reason the margin of the content section is being displayed on top of
the nav bar.  This error originally showed up as the content text being on
top of the nav bar, and I fixed it by adding a left margin.  The nav bar
shows through just fine with Safari.  Since it doesn't work on your browser
I'm guessing that adding a margin was not the right way to fix that.  How
should I do it?

The background image looks fine to me, but almost everyone who has commented
on the page has said they can't read the text over it, so I will fade it out
some more.

Thanks for your feedback.

Re: Div and background problems

On 10/3/03 2:11 PM, in article BBA3342B.D0D6%Kris7@softhome.net, "Kris"

Quoted text here. Click to load it

Actually I think I may have just found a fix for the bug you saw.  I used
position-absolute and left: 9.5em instead of the padding-left: 120px.  It
seems to display exactly the same thing here.  Would you mind trying it
again with your browser and telling me if it worked?  I have updated the
page at the same address above, so that's the newest copy now.  I also fixed
that image.  I hope it's good this time!

Assuming those are both ok I still need to fix the column heights and the
background position.  Web design is so much work...  :)

Thanks again.

Re: Div and background problems

Kris pounced upon this pigeonhole and pronounced:
Quoted text here. Click to load it

Quoted text here. Click to load it

Yes, that fixed the problem of the covered nav section. Looks ok now.

Since you're dropping the frames, don't forget to drop the target="main"
in your nav list, which now is opening new windows.

I think the background sheild is still too bright <g>.
Quoted text here. Click to load it

Aye, but it's fun work.

   -This space intentionally left blank.

Site Timeline