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.
well, making a large size header banner and set width="100%" it will adjust to the size of ther browser.
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!
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:
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
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!
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 ?