Hi all!....Great Forum!<br />
<br />
I have a question...<br />
<br />
I want to have my header resize like the one on this site does. When you have different resolutions, the header resizes itself to the resolution of the user. It appears that the forum tables also resizes itself to fit as well<br />
<br />
Could anyone explain how I could obtain the same design?<br />
<br />
I have a header that is 1139x228<br />
<br />
I do I have it resize to fit the entire screen without distorting the pic? <br />
<br />
What is happening now is say when I click to view favorites or anyother tab, the entire page moves to the right and a scrollbar appears. i dont want this to occur anymore. I want the tables and the header to resize themselves.<br />
<br />
Thanks alot for any advice!!
<!--content-->The is a few diffrent ways you could do this, i guess it's up to you which 1 you choose:<br />
<br />
Qoute: I have a header that is 1139x228<br />
<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"yourpic.gif" width="%" height="%"><br />
<br />
Where % is add the amount percentage you wish to size to...<br />
<br />
<br />
<script type="text/javascript" language="javascript"><br />
var iwidth = screen.width - wamount , iheight = screen.height - hamount ;<br />
<br />
document.write('<img src=http://www.htmlforums.com/archive/index.php/"yourpic.gif" width="'+iwidth+'" height="'+iheight+'">');<br />
<br />
</script><br />
<br />
Where wamount = amount lessthan screen width & hamount = amount lessthan screen height...<br />
<br />
Hope that helps... jaeman<!--content-->I don't think that is how they do it here.They use tables, which allow them to resize as your browser does. It's more involved than just a header image. To make a VERY simple one, you need 3 images. header_left.jpg, header_middle.jpg, and header_right.jpg (you can name them whatever you want). header_left.jpg will be the content in the left side of your header (here it would be the logo, including the section that says HTML FORUMS.COM). The header_right.jpg needs to be the content on the right side of your header (here it would be the 3 oval buttons, and the words below them). header_middle.jpg needs to be a section of your image that can be repeated (between 1 and 10 pixels wide usually, and as high as the header). The hardest part is designing a header that has a section that can repeat easily. As you can see here, the section starting below the search button, and going to the first oval button is the same. It is being repeated over and over.<br />
<br />
Now to the coding: Assuming that your header is 60px high, that your left image is 250px wide, and that your right image is 200px wide, the code would look like this. You image sizes will vary, so you will have to adapt.<br />
<br />
<body><br />
<table style="width:100%; height:60px;" border="0" cellspacing="0" cellpadding="0"><br />
<tr><br />
<td style="width:250px;"><img src=http://www.htmlforums.com/archive/index.php/"header_left.jpg" width="250" height="60" alt=""></td><br />
<td style="background-image:url(images/header_middle.jpg); background-position:left; background-repeat:repeat-x;"> </td><br />
<td style="width:200px;"><img src=http://www.htmlforums.com/archive/index.php/"header_right.jpg" width="200" height="60" alt=""></td><br />
</tr><br />
</table><br />
your other content<br />
</body><!--content-->
<br />
I have a question...<br />
<br />
I want to have my header resize like the one on this site does. When you have different resolutions, the header resizes itself to the resolution of the user. It appears that the forum tables also resizes itself to fit as well<br />
<br />
Could anyone explain how I could obtain the same design?<br />
<br />
I have a header that is 1139x228<br />
<br />
I do I have it resize to fit the entire screen without distorting the pic? <br />
<br />
What is happening now is say when I click to view favorites or anyother tab, the entire page moves to the right and a scrollbar appears. i dont want this to occur anymore. I want the tables and the header to resize themselves.<br />
<br />
Thanks alot for any advice!!
<!--content-->The is a few diffrent ways you could do this, i guess it's up to you which 1 you choose:<br /><br />
Qoute: I have a header that is 1139x228<br />
<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"yourpic.gif" width="%" height="%"><br />
<br />
Where % is add the amount percentage you wish to size to...<br />
<br />
<br />
<script type="text/javascript" language="javascript"><br />
var iwidth = screen.width - wamount , iheight = screen.height - hamount ;<br />
<br />
document.write('<img src=http://www.htmlforums.com/archive/index.php/"yourpic.gif" width="'+iwidth+'" height="'+iheight+'">');<br />
<br />
</script><br />
<br />
Where wamount = amount lessthan screen width & hamount = amount lessthan screen height...<br />
<br />
Hope that helps... jaeman<!--content-->I don't think that is how they do it here.They use tables, which allow them to resize as your browser does. It's more involved than just a header image. To make a VERY simple one, you need 3 images. header_left.jpg, header_middle.jpg, and header_right.jpg (you can name them whatever you want). header_left.jpg will be the content in the left side of your header (here it would be the logo, including the section that says HTML FORUMS.COM). The header_right.jpg needs to be the content on the right side of your header (here it would be the 3 oval buttons, and the words below them). header_middle.jpg needs to be a section of your image that can be repeated (between 1 and 10 pixels wide usually, and as high as the header). The hardest part is designing a header that has a section that can repeat easily. As you can see here, the section starting below the search button, and going to the first oval button is the same. It is being repeated over and over.<br />
<br />
Now to the coding: Assuming that your header is 60px high, that your left image is 250px wide, and that your right image is 200px wide, the code would look like this. You image sizes will vary, so you will have to adapt.<br />
<br />
<body><br />
<table style="width:100%; height:60px;" border="0" cellspacing="0" cellpadding="0"><br />
<tr><br />
<td style="width:250px;"><img src=http://www.htmlforums.com/archive/index.php/"header_left.jpg" width="250" height="60" alt=""></td><br />
<td style="background-image:url(images/header_middle.jpg); background-position:left; background-repeat:repeat-x;"> </td><br />
<td style="width:200px;"><img src=http://www.htmlforums.com/archive/index.php/"header_right.jpg" width="200" height="60" alt=""></td><br />
</tr><br />
</table><br />
your other content<br />
</body><!--content-->