www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with fluid banner/header

  1. #1
    Join Date
    May 2011
    Posts
    23

    Problem with fluid banner/header

    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:

    HTML 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>
    cheers
    Last edited by Dustie; 07-02-2014 at 06:00 PM.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,897
    "Disappearing altogether" is correct behavior for a block with nothing in it. Two solutions come to mind:
    1. Get rid of the fixed 200px height and replace it with "overflow:auto" which will capture the icon_area and at least be as large as it is
    2. Admit that your "test background" is actually a banner you want visible, and hence is not a background but a foreground object that should be an <img> placed in the div as opposed to the background of the div.

    To me, the second choice is the more correct in this case.

  3. #3
    Join Date
    May 2011
    Posts
    23
    Hi, thanks for the reply.

    Quote Originally Posted by tracknut View Post
    1. Get rid of the fixed 200px height and replace it with "overflow:auto" which will capture the icon_area and at least be as large as it is
    Yeah, already tried that but, as you've indicated, it doesn't show *all* of the height and just looks wrong.

    Quote Originally Posted by tracknut View Post
    2. Admit that your "test background" is actually a banner you want visible, and hence is not a background but a foreground object that should be an <img> placed in the div as opposed to the background of the div.
    That's fair enough. Any idea how can I get those icons to show "overlapped" on there still though?

  4. #4
    Join Date
    Aug 2006
    Posts
    1,897
    Here you go:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Test</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 {
    	position:relative;
    }
    .banner	{
    	width:100%;
    }
    #icon_area {
    	position:absolute;
    	z-index:2;
    	width:100%;top:0;right:0;
    }
    
    #icon_area .icon {
    	float:right;
    	margin-top: 1em;
    	margin-right: 1em;
    	max-width:60px;
    	width: 10%;
    	height: 10%;
    }
    #main	{
    	background-color: #CCCCCC;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">
    		<img class="banner" src="http://djdust.com/css/test_banner.png" alt="Banner">
    		<div id="icon_area">
    			<img class="icon" src="http://djdust.com/css/test_icon.png" alt="Icon 1">
    			<img class="icon" src="http://djdust.com/css/test_icon.png" alt="Icon 2">
    		</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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles