Div and background problems

Discussion in 'HTML' started by Kris, Oct 3, 2003.

  1. Kris

    Kris Guest

    Hello,

    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:

    http://hedgemaze.2y.net:3000/main3.html

    Thanks in advance!

    Kris
    Kris, Oct 3, 2003
    #1
    1. Advertising

  2. Kris pounced upon this pigeonhole and pronounced:
    > Hello,
    >
    > I've been working on my site a lot and I think it is much improved.


    <snip>

    > 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.


    Screen resolutions are unimportant. See:
    http://allmyfaqs.com/faq.pl?AnySizeDesign

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

    * All of them
    * None of them

    > You can see my current page here:
    >
    > http://hedgemaze.2y.net:3000/main3.html


    You must have introduced other problems. See my Firebird view:
    http://home.rochester.rr.com/bshagnasty/images/infoarmory.jpg

    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.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Oct 3, 2003
    #2
    1. Advertising

  3. Kris

    Kris Guest

    On 10/3/03 12:16 PM, in article 9Wjfb.12476$,
    "Beauregard T. Shagnasty" <> wrote:

    > Kris pounced upon this pigeonhole and pronounced:
    >> Hello,
    >>
    >> I've been working on my site a lot and I think it is much improved.

    >
    > <snip>
    >
    >> 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.

    >
    > Screen resolutions are unimportant. See:
    > http://allmyfaqs.com/faq.pl?AnySizeDesign
    >
    > "So there are two accurate answers to "Which resolution should I design
    > for?":
    >
    > * All of them
    > * None of them
    >
    >> You can see my current page here:
    >>
    >> http://hedgemaze.2y.net:3000/main3.html

    >
    > You must have introduced other problems. See my Firebird view:
    > http://home.rochester.rr.com/bshagnasty/images/infoarmory.jpg
    >
    > 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.


    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.
    Kris, Oct 3, 2003
    #3
  4. Kris

    Kris Guest

    On 10/3/03 2:11 PM, in article BBA3342B.D0D6%, "Kris"
    <> wrote:

    > On 10/3/03 12:16 PM, in article 9Wjfb.12476$,
    > "Beauregard T. Shagnasty" <> wrote:
    >
    >> Kris pounced upon this pigeonhole and pronounced:
    >>> Hello,
    >>>
    >>> I've been working on my site a lot and I think it is much improved.

    >>
    >> <snip>
    >>
    >>> 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.

    >>
    >> Screen resolutions are unimportant. See:
    >> http://allmyfaqs.com/faq.pl?AnySizeDesign
    >>
    >> "So there are two accurate answers to "Which resolution should I design
    >> for?":
    >>
    >> * All of them
    >> * None of them
    >>
    >>> You can see my current page here:
    >>>
    >>> http://hedgemaze.2y.net:3000/main3.html

    >>
    >> You must have introduced other problems. See my Firebird view:
    >> http://home.rochester.rr.com/bshagnasty/images/infoarmory.jpg
    >>
    >> 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.

    >
    > 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.
    >


    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.
    Kris, Oct 3, 2003
    #4
  5. Kris pounced upon this pigeonhole and pronounced:
    > On 10/3/03 2:11 PM, in article BBA3342B.D0D6%, "Kris"
    > <> wrote:


    <snippage>
    >
    > 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!


    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>.

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


    Aye, but it's fun work.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Oct 3, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jc
    Replies:
    3
    Views:
    1,726
  2. jc
    Replies:
    1
    Views:
    1,362
    Neredbojias
    Mar 19, 2008
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    737
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    302
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page