Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header entire width

    Hello,

    I have a banner with text on it. The banner is x pixels high at the left of the page and y pixels high at the right of the page. I want to stretch this banner over the entire width of the browser, but I don't know how to do this so that the text on the banner keeps there proportions.

    I have the following:

    Code:
    #Header{
    	position:absolute;
    	width:100%;
    	height:100px;
    	top:-15px;	
    }
    But the banner loses all proportions. Any idea how to solve this?
    Ideal would be if a piece at the middle of the banner could be stretched out, and leave the edges intact.

    Im sorry if my question isn't clear or if it is ambiguous but English isn't my native language, so please ask for more information if this is the case.

    Thank you very much.

  • #2
    New Coder
    Join Date
    Mar 2011
    Location
    SouthEast
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Posting your html might make it easier for us to see the problem.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your reply

    I got the following image:
    http://img852.imageshack.us/i/headerqd.jpg/

    This is my code:

    Code:
    <div id="container">
    	<div id="Header"><img src="images/header.gif"  alt="Header"></div>
        <div id="body"><img src="images/body.gif" width="1020" height="894" alt="Body"></div>
        <div id="footer"><img src="images/footer" width="1020" height="261" alt="Footer"></div>
    </div>
    
    #Header{
    	position:absolute;
    	width:100%;
    	height:100px;
    	top:-15px;	
    }
    But now the header got stretched, something I don't want.
    If possible I want the logo part at the left of the screen, the menu on the right part of the screen, and the middle to be stretched the entire width.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Post ALL your html and css!
    Teed

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, this is everything I have at the moment.
    I was wondering how to solve this problem, so I started a new project from there.

    Code:
    <html>
    <head>
    <title>template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (template.psd) -->
    <div id="container">
    	<div><img src="images/template_01.gif" width="100%" height="245"></div>
        <div id="body"><img src="images/template_02.gif" width="1020" height="894" alt="Body"></div>
        <div id="footer"><img src="images/template_03.gif" width="1020" height="261"></div>
    </div>
    
    <!-- End Save for Web Slices -->
    </body>
    </html>
    
    
    CSS:
    
    #Header{
    	position:absolute;
    	width:100%;
    	height:100px;
    	top:-15px;	
    }
    
    .content{
    	background-color:#FFF;
    
    	color:#000;
    	padding-top:25px;
    	padding-bottom:25px;
    	padding-left:50px;
    	padding-right:50px;
    	text-transform:none;
    	font:Helvetica;
    	font-size:12px;
    	font-style:normal;
    	margin-left:auto;
    	margin-right:auto;
    	
    }
    
    .titel{
    	font-size:21px;
    	font-style:oblique;	
    	padding-bottom:15px;
    	color:#000;
    }
    
    .subtitel{
    	font-size:18px;
    	font-style:normal;
    	color:#000;	
    }
    
    .background{
    	background-color:#f6f6f6;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .mainPage{
    	width: 1024;
    	margin-left:auto;
    	margin-right:auto;
    }

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    An easy way might be to change header text into an image and make width 100% (don't specify height and it should adjust proportionately (but then you will also have to keep height of the containing div as unspecified.)

    If the img starts going beyond the page, try 99%.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    <div><img src="images/template_01.gif" width="100%" height="245"></div>
    Is this your header?

    If so, it's contained within another element(div). So the 100% is only going to stretch as wide as the containing div is. So basically, to get a header to stretch the full width of the viewport, move it outside any containing div.

    Code:
    <body>
    <div id="Header">Your Header</div>
    <div id="container">Page content here.</div>
    Also, you're stying a div with an id of Header, but I dont see any div in your markup with an id of Header.

    You also style many other classes of divs, while your markup containes no such divs.

    I would recommend learning some basic html and css so that you can get a standard div layout and page structure up and running.

    btw: you should also use a valid doctype for every page.
    Teed

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #Header{
    	position:fixed;
    	top:0px;
    	height:100px;
    	left:0px;
    	right:0px;
    }
    Ive used this before to make a stretchy header. The image will stretch too. Youd have to make it a background image to not stretch.

    Code:
    #Header {position:fixed;
    			position:absolute;
    			top:0px;
    			height:100px;
    			left:0px;
    			right:0px;
    			background: url(image.jpg) fixed center;
    			z-index:-1;
    			}
    Last edited by wmtipton; 04-11-2011 at 11:17 PM.


  •  

    Posting Permissions

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