Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with fluid banner/header

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #174414
    dust
    Participant

    Hi all

    Am really stuck on something and wonder if anyone can help? Here’s a link to what I’ve got so far:

    http://djdust.com/css/test.htm

    If you stretch and shrink this window, the banner (that’s a background graphic) grows and shrinks with it which is all good so far. The reason I have it as a background graphic is because I want to have a set of icons at the top right of the page overlaid over it (one test icon is there already and also shrinks and grows accordingly)…

    The massive problem as you can see is that I’m stuck with having to set the height of the “header” div to be 200px but this creates a massive white gap between it and the “main” div if the screen is shrunk as it’s still rigidly sticking to that height. If I remove the height setting, the banner disappears altogether…

    Can anyone advise how to fix this? Here’s the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    <meta charset="utf-8" />
    <style>
    
    #container {
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        width: 100%;
        max-width: 800px;
        margin: 0px auto;
    }
    
    #header {
        background-image: url(images/test_banner.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 200px;
    }
    
    #main  {
        background-color: #CCCCCC;
    }
    
    #icon_area {
        width: 15%;
        text-align: right;
        float: right;
    }
    
    #icon_area img {
        margin-top: 1em;
        margin-right: 1em;
        width: 50%;
        height: 50%;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <div id="icon_area"><img src="images/test_icon.png" /></div>
        </div>
        <div id="main">
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
            <p>main body</p>
        </div>
    </div>
    
    </body>
    </html>
    #174416
    Senff
    Participant

    Don’t give the header a height and don’t put the banner in as a background image.

    Instead, just use a regular image for the banner and scale it in percentages, so that the header shrinks with the image when you resize the screen.
    The icons can simply be placed absolutely (top right of the header).

    Here’s basically what I mean: http://codepen.io/senff/pen/Afumr

    #174417
    dust
    Participant

    Perfection! Thank you so much… :D

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.