netpumber Posted October 5, 2010 Share Posted October 5, 2010 Hello! i have this easy code CSS : body { font-family: Arial, Georgia, serif; background-color:#d3eff3; } table.bannerTable { border:0px; border-style:solid; border-color:#000000; width:100%; } th.bannerTable { border:medium; height:180px; background-image:url(../images/mainBanner.jpg); background-repeat:no-repeat; } and html: <!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>Main Page</title> <link rel="stylesheet" type="text/css" href="css/main-style.css" /> </head> <body> <table class="bannerTable"> <tr> <th class="bannerTable"></th> </tr> </table> </body> </html> When the window of the browser is maximized the site looks good. You can see the whole banner image. But when i minimize the window site get smaller too.. How can i fix this issue ? Thanks in advance..! Quote Link to comment Share on other sites More sharing options...
haku Posted October 5, 2010 Share Posted October 5, 2010 You need to either give the site a min-width (won't work in IE6, but that's maybe not so bad), or give the whole site a fixed width. Right now you have given it a relative width (100%), which means it will always be the width of the window regardless of the width of the window. Quote Link to comment Share on other sites More sharing options...
netpumber Posted October 5, 2010 Author Share Posted October 5, 2010 Thanks for your answer but where exactly i will add the min-width ? Quote Link to comment Share on other sites More sharing options...
chmpdog Posted October 8, 2010 Share Posted October 8, 2010 I add it to both the html, and body tags Quote Link to comment Share on other sites More sharing options...
netpumber Posted October 19, 2010 Author Share Posted October 19, 2010 So here is my html page <!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>Login Page</title> <link rel="stylesheet" type="text/css" href="css/loginp_style.css" /> </head> <body> <div class="container"> <form id="login-form" action="#" method="post"> <label><b>Όν. Χρήστη:</b></label> <input type="text" id="login" name="login"/> <label><b>Κωδικός:</b></label> <input type="password" id="password" name="password"/> <br /> <input type="submit" style="margin: -20px 0 0 287px;" class="button" value="Σύνδεση"/> </form> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </body> </html> And here is the css code body { font-family: Arial, Georgia, serif; background: url(../images/loginpage.jpg) top center no-repeat #d3eff3; background-repeat:no-repeat; } form { width: 406px; margin: 250px auto 0; border: 0; } label { width: 100px; text-align: left; float: left; margin: 0 40px 0 0; padding: 5px 0 0 10px; font-size: 14px; } .clear { clear: both; } input { width: 210px; display: block; border: 1px; padding: 2px; margin: 0 0 11px 0; font-size: 18px; color: #3a3a3a; font-family: Arial, Georgia, serif; } .button { border: 1px solid #999; -moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold; -webkit-border-radius: 5px; font-size: 13px; width: 79px; } .button:hover { background: red; color: black; } #container { min-width: 660px; width:expression(document.body.clientWidth < 660? "660px": "auto" ); } As you can see i add the #container but nothing change when i minimize firefox's window.. Quote Link to comment Share on other sites More sharing options...
haku Posted October 20, 2010 Share Posted October 20, 2010 What do you mean by "nothing change"? Quote Link to comment Share on other sites More sharing options...
netpumber Posted October 20, 2010 Author Share Posted October 20, 2010 I mean that the banner of the page is cut and doesnt appeared whole when i minimize the window. Quote Link to comment Share on other sites More sharing options...
haku Posted October 20, 2010 Share Posted October 20, 2010 You've set the background image on the body, not your container. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.