Jump to content

Help with site minimizing


netpumber

Recommended Posts

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..!

 

Link to comment
https://forums.phpfreaks.com/topic/215195-help-with-site-minimizing/
Share on other sites

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.

  • 2 weeks later...

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..

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.