Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make 'header banner' adjust to size of browser

Discussion in 'HTML & Website Design' started by phattykatty, Dec 6, 2007.

0
  1. #1
    I'm attempting to publish my first site, but I am having trouble getting the 'header banner' to adjust to the size of the web browser.

    When the browser is minimized to an 800 X 600 pixel screen, the 'header banner' is still sized to a 1280 x 800 pixel browser screen.

    The middle 'page content' area adjusts automatically when the browser is minimized or maximized but the banner doesn't.

    How do I accomplish this? I use Photoshop CS3 and Fireworks to make my banner and Dreamweaver CS3 to design my site.

    Thank you for your help guys! PM me if you have a solution or need me to explain anything to help you better understand my problem.

    I have posted this in the 'Graphics' section, but no one has replied.
     
    phattykatty, Dec 6, 2007 IP
  2. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    well, making a large size header banner and set width="100%"
    it will adjust to the size of ther browser.
     
    EIx, Dec 6, 2007 IP
  3. phattykatty

    phattykatty Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Do I do this with the settings in Photoshop and/or Fireworks, or do I need to do it in the HTML coding? My banner is currently saved as a .gif due to it having animation. So how should I adjust it accordingly? Thanks for you help!
     
    phattykatty, Dec 6, 2007 IP
  4. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #4
    HTML Coding,

    example:

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>

<body>
<p><img src="images.jpg" width="100%" /></p>
<p>TEXT</p>
<p>TEXT</p>
</body>
</html>
    HTML:
     
    EIx, Dec 6, 2007 IP
  5. mz906

    mz906 Peon

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    that won't work, if you want a dynamic banner that adjust to the size of the monitor. then you'll have to get creative with your design and css... :)

    example:

    place your <img> tag with in a <div> and set the background of that <div> to something similar to that of the banner and in the css set the back ground to repeat
     
    mz906, Dec 6, 2007 IP
  6. phattykatty

    phattykatty Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    What do you mean by dynamic? The banner is a .gif with animation. When I changed the width properties, it did not work. It adjusted the banner in the Dreamweaver design to 100%, which just shrunk the banner. So these solutions didn't solve my issue. Any other suggestions?

    Currently the width of the banner is 988 and the height is 150.

    This is the HTML coding that's in Dreamweaver now:

    <div id="container">
    <div id="header">
    <h1><img src="images/rendered_banner_2.gif" alt="logo" width="988" height="150" /></h1>
    <!-- end #header --></div>

    CSS properties:
    background: #FFFFFF
    border: 1px solid #000000
    margin: 0 auto
    text-align: left
    width: 80%

    Thank you for your help!
     
    phattykatty, Dec 6, 2007 IP
  7. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I do the test , it's ok :
    <div id="container">
    <div id="header">
    <h1><img src="images/rendered_banner_2.gif" alt="logo" width="100%" height="100%" /></h1>
    <!-- end #header -->
    </div>
    </div>

    800 x 600, banner adjusted to 800px
    1024x 768, banner adjusted to 1024px

    Do I misunderstand your meaning ?
     
    EIx, Dec 6, 2007 IP