New OOTS products from CafePress
New OOTS t-shirts, ornaments, mugs, bags, and more
Results 1 to 11 of 11

Thread: HTML Hell

  1. - Top - End - #1
    Ettin in the Playground
     
    The Succubus's Avatar

    Join Date
    Sep 2008
    Location
    UK
    Gender
    Male

    Default HTML Hell

    Hi folks, it's certainly been a while since I've been on these boards. Hoping someone here can help me with a website problem.

    I need to design a website with a nav bar att the top, a footer at the bottom and a main section filling the rest of the page.

    For the life of me, I cannot get the footer to stay on the bottom of the page without using "position: fixed" or sticky and when I do, stuff in the main section disappears behind it when I scroll down (if I resize my browser window).

    I've tried messing around with height values for the nav, Main and footer sections but I don't think I'm doing it correctly.

    I need to do this for an important IT course and would greatly appreciate any help.

  2. - Top - End - #2
    Ettin in the Playground
     
    Kobold

    Join Date
    May 2009

    Default Re: HTML Hell

    Quote Originally Posted by The Succubus View Post
    For the life of me, I cannot get the footer to stay on the bottom of the page without using "position: fixed" or sticky and when I do, stuff in the main section disappears behind it when I scroll down (if I resize my browser window).

    I've tried messing around with height values for the nav, Main and footer sections but I don't think I'm doing it correctly.
    "height" attributes are notoriously tricky.

    But when you say "stuff in the main section disappears behind it when I scroll down (if I resize my browser window)", I'm having a hard time visualising exactly what you mean.

    If the footer has to be visible at the bottom of the page, then surely content in the main window is supposed to disappear behind it, isn't it? What exactly is the desired behaviour here, and what are you getting? A demo page would be helpful.
    "None of us likes to be hated, none of us likes to be shunned. A natural result of these conditions is, that we consciously or unconsciously pay more attention to tuning our opinions to our neighbor’s pitch and preserving his approval than we do to examining the opinions searchingly and seeing to it that they are right and sound." - Mark Twain

  3. - Top - End - #3
    Ettin in the Playground
     
    The Succubus's Avatar

    Join Date
    Sep 2008
    Location
    UK
    Gender
    Male

    Default Re: HTML Hell

    Quote Originally Posted by veti View Post
    "height" attributes are notoriously tricky.

    But when you say "stuff in the main section disappears behind it when I scroll down (if I resize my browser window)", I'm having a hard time visualising exactly what you mean.

    If the footer has to be visible at the bottom of the page, then surely content in the main window is supposed to disappear behind it, isn't it? What exactly is the desired behaviour here, and what are you getting? A demo page would be helpful.
    Thanks for the reply veti. I'll try and get some sample pages up later today.

  4. - Top - End - #4
    Colossus in the Playground
     
    BlackDragon

    Join Date
    Feb 2007
    Location
    Manchester, UK
    Gender
    Male

    Default Re: HTML Hell

    I may be misunderstanding something, but isn't this what IFRAME is for? You use one for the header, one for the footer, and one for the bit in the middle with the scrollbar.

  5. - Top - End - #5
    Ettin in the Playground
     
    The Succubus's Avatar

    Join Date
    Sep 2008
    Location
    UK
    Gender
    Male

    Default Re: HTML Hell

    Quote Originally Posted by factotum View Post
    I may be misunderstanding something, but isn't this what IFRAME is for? You use one for the header, one for the footer, and one for the bit in the middle with the scrollbar.
    Hey Factotum! Nice to see a familiar face!

    I'm rusty as heck when it comes to HTML coding - last time I coded in HTML was around 2000-2001. Even then, my stuff was pretty basic.

    I haven't tried IFRAME yet - how do I use it?

  6. - Top - End - #6
    Colossus in the Playground
     
    BlackDragon

    Join Date
    Feb 2007
    Location
    Manchester, UK
    Gender
    Male

    Default Re: HTML Hell

    Heck, I'm no HTML expert so you'd probably have to look it up online to see what all the relevant parameters for an IFRAME are--I just know they exist and are designed to display multiple individual HTML documents on a single page. See here:

    https://html.com/tags/iframe/

    Although that little article suggests they're maybe a bit of an old-fashioned technique to be using! No idea what the fancy-schmancy HTML5 replacement is supposed to be.

  7. - Top - End - #7
    Ogre in the Playground
     
    ElfPirate

    Join Date
    Aug 2013

    Default Re: HTML Hell

    Are you doing this in like pure html?

    Because I get the feeling CSS should be able to put stuff with more precision.


    I tink the Iframe is used as a normal tag within eg <body> so <iframe></iframe> do delineate a separate part.

  8. - Top - End - #8
    Ettin in the Playground
     
    The Succubus's Avatar

    Join Date
    Sep 2008
    Location
    UK
    Gender
    Male

    Default Re: HTML Hell

    Using a .CSS page as well to make life easier.

  9. - Top - End - #9
    Bugbear in the Playground
     
    Whoracle's Avatar

    Join Date
    Jul 2004
    Location
    Freiburg, germany
    Gender
    Male

    Default Re: HTML Hell

    Prepared a quick and dirty PoC:

    https://succubus.betatest.rocks

    View the source with CTRL+U and have a look at the <style> tags (CSS basically). The HTML part is only three divs with content.

    Long story short: Fill your header and footer with whatever you want, and adjust the max-height of the content accordingly. Also important is the "overflow-y: auto;", so that your content div doesn't stretch.
    This is obviously a very basic implementation that doesn't scale to dynamic header/footer content, and with less content in the center div the footer will sit below the (now shrunk) content. if you don't want that just replace "max-height" in the content with "height". From your description it didn't sound as if you'd need a more robust implementation that does the scaling for you, but if I'm wrong on that end I can give it a shot.

  10. - Top - End - #10
    Titan in the Playground
     
    ElfRangerGuy

    Join Date
    Aug 2007
    Location
    Imagination Land
    Gender
    Male

    Default Re: HTML Hell

    Quote Originally Posted by The Succubus View Post
    I need to design a website with a nav bar att the top, a footer at the bottom and a main section filling the rest of the page.

    For the life of me, I cannot get the footer to stay on the bottom of the page without using "position: fixed" or sticky and when I do, stuff in the main section disappears behind it when I scroll down (if I resize my browser window).

    I've tried messing around with height values for the nav, Main and footer sections but I don't think I'm doing it correctly.
    Just to clarify, are the header and footer sections meant to stay on-screen in their respective positions at all times, while the main content of the page can be scrolled?
    "Nothing you can't spell will ever work." - Will Rogers

    Watch me draw and swear at video games.

  11. - Top - End - #11
    Ettin in the Playground
     
    The Succubus's Avatar

    Join Date
    Sep 2008
    Location
    UK
    Gender
    Male

    Default Re: HTML Hell

    Thanks for the help folks! I randomly stumbled onto a solution that seems to do the right thing:

    Main {

    Height: calc(100vh - footer height - nav bar height)

    }

    ...with the footer and nav in px.

    Next step, learning when to use align-content, justify-content, align-items and justify-items properly!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •