PDA

Click to See Complete Forum and Search --> : website top graphic/banner help

rosamz
09-15-2007, 12:41 PM
Hi. I am a real newbie and am using DW MX2004. I am stuck :confused: . I have started working on a website and can't figure out how to make the top graphic/banner to re-size according to browser/monitor settings.

I am embarrassed :( to have you see the site because it's no where near the great stuff I see on the web. If you will go to www.leatherwranglers.com please look at the top banner/graphic (whatever it's called) and tell me how I can make it flow with viewer re-sizing.
Centauri
09-15-2007, 09:08 PM
A graphic should not be "resized" by the browser as this leads to loss of image quality. There are a number of different methods for handling the overflowing of the image when the window size is reduced. Probably the simplest in your case is to set a minimum width on the container div :.twoColHybLtHdr #container {
width: 80%;
background: #FFF4DC;
margin: 0;
border: 2px solid #663300;
text-align: left;
min-width: 795px;
} This will ensure the container cannot get narrower than the image, so the image will not overflow.

Another method is to make the image wider than the expected maximum width and set it as a background and centred - resizing will then just result in clipping on both ends.
sticks464
09-15-2007, 09:30 PM
Is this what you are trying to achieve

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Leather Wranglers Inc Home Page</title>
<title>Paul Zalesak, Leather Wranglers Inc Home Page, Albuquerque, New Mexico</title>
<meta name="Description" CONTENT="Paul Zalesak, Leather Wranglers Inc, Albuquerque, New Mexico">
<meta name="Keywords" content="Paul Zalesak, Pabloz, leather, leathercraft, tools, leather craft, tooling, leather tooling, Albuquerque, New Mexico">

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
font: 100% Georgia, "Times New Roman", Times, serif;
background: #FFFFEO;
color: #663300;
background-color: #FFFFCC;
background-image: url(images/brownbkgr.jpg);
}
#container {
width: 795px;
background: #FFF4DC;
margin: 0 auto;
border: 2px solid #663300;
}
#header {
background: #FFFFE0;
width:795px;
height:315px;
margin-bottom:10px;
background:url("images/Store.jpg");
}

#sidebar1 {
float: left;
width: 192px;
background: #D6C5A1;
padding: 15px 0;
}
#sidebar1 h3, #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}

#mainContent {
width:570px;
float:left;
margin: 0 10px 0 10px;

}
#footer {
padding: 0 10px;
background:#FFFFFF;
text-align:center;
}
#footer p {
margin: 0;
padding: 10px 0;
}
a:link {
color: #660000;
}
a:visited {
color: #666600;
}
a:hover {
color: #666600;
}
.style2 {font-size: large}
-->
</style>
<!--[if IE]>
<style type="text/css">
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]--></head>

<body>

<div id="container">
<div id="header">
<!-- end #header --></div>

<div id="sidebar1">
<p><a href="index.html">Home</a> </p>
<p><a href="#">About Us</a> </p>

<p><a href="#">Tools</a></p>
<p><a href="#">Leather</a></p>
<p><a href="#">Jewelry</a></p>
<p><a href="#">Tips</a></p>
<p><a href="#">Members Only</a></p>
<p><a href="contactus.html">Contact Us</a> </p>
<!-- end #sidebar1 --></div>

<div id="mainContent" >
<h2 align="center"> Website under construction...
coming soon!</h2>
<div align="center">
<h3>“Uncompromised quality in custom, hand-carved leather craft,<br />
tools, and accessories.”<em>
<!-- end #mainContent -->

</em></h3>
</div>
</div>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>

<h2>&nbsp;</h2>
<div id="footer">
<p> <a href="#">Privacy</a> | <a href="#">Terms and Conditions</a> | <a href="contactus.html">Contact Us</a><br />
<span class="style5">&copy; 2006 Leather Wranglers Inc. All Rights Reserved.
<!-- end #footer -->

</div>
<!-- end #container --></div>
</body>
</html>
rosamz
09-16-2007, 10:06 PM
Wow - this worked! What a simple line of code could do! :D Thanks so much!
rosamz
09-16-2007, 10:07 PM
Woo-hoo! This works too! Thanks bunches!