Problem with image re-sizing in the header of a theme

  Post new topicReply to topicPrintable Version
<< View previous topic View next topic >>
Share: Del.icio.us  Digg  Google  Spurl  Blink  Furl  Y! MyWeb  
#1   Problem with image re-sizing in the header of a theme
dkwds
CZ Active Member
dkwds has been a member for over 20 year's 20 Year Member
uk.gif
Occupation: Student
Age: 38
Gender: Male
Website:
Status: Offline
Joined: Jul 29, 2004
0.04 posts per day
Posts: 282
Points: 12,713
   
As some of you may or may not know i'm trying to make a theme.
This is my 2nd attempt at this.
Anyways i making it based on mtechnik's theme tutorial.
i'm having a slight problem with resizing images in the header.

Image attached to make you understand.


if any of you have used mtechnik's tutorial to make a theme you would know that he suggests to make the header 770 pixels so that the site looks good in every browser.
He then says to make the table width 100% and one of the images 100% (so that the site fits well in all browser sizes). When i do this the header seems to get gaps in it. Anyone know how i can fix this. Why aren't the images expanding properly?
What size is the header on your themes?




_________________
Back to top Reply with quote
#2   re: Problem with image re-sizing in the header of a theme
Kelly_Hero
PayPal Donation
CZ Revered Member
 Codezwiz Site Donator
usa.gif southcarolina.gif
Occupation: Web Developer
Age: 59
Gender: Female
Website:
Status: Offline
Joined: Aug 20, 2003
0.48 posts per day
Posts: 3765
Points: 351,412
   
What you need to do is cut out a piece of your header that will tile seamlessly horizontally and use that as the background of one of the cells. Place a transparent spacer gif inside that cell.

This way, the transparent gif will tile to fill up the additional width, but you won't see it because it's transparent. The background image of that cell will also tile to fill up the width of the cell.

Something like this:


<table.... width="100%">
<tr>
<td width="770"><img src="header.gif" width="770" height="100"></td>
<td background="headerbg.gif"><img src="spacer.gif" width="1" height="100"></td>
<tr>
</table>


Because the first cell is fixed width, it will stay put, and the second cell will tile to fill up the rest of the screen width.


Back to top Reply with quote
#3   re: Problem with image re-sizing in the header of a theme
dkwds
CZ Active Member
dkwds has been a member for over 20 year's 20 Year Member
uk.gif
Occupation: Student
Age: 38
Gender: Male
Website:
Status: Offline
Joined: Jul 29, 2004
0.04 posts per day
Posts: 282
Points: 12,713
   
Thankyou once again icon_smile.gif .
Just completed my 1st ever theme (kinda abandoned my 1st project). I haven't made matching forums for it yet but i will be doing that in the near future.
The theme is currently being used on my site. Check it out, let me know what you think.
Thanks again.




_________________
Back to top Reply with quote
#4   re: Problem with image re-sizing in the header of a theme
Kelly_Hero
PayPal Donation
CZ Revered Member
 Codezwiz Site Donator
usa.gif southcarolina.gif
Occupation: Web Developer
Age: 59
Gender: Female
Website:
Status: Offline
Joined: Aug 20, 2003
0.48 posts per day
Posts: 3765
Points: 351,412
   
Nice and Sunny! icon_razz.gif

Did you mean to have the white border around the edges of the page? If not, go into your style sheet and add this:

body {
margin: 0px;
}


That will get rid of it.


Back to top Reply with quote
Display posts from previous:      
Add To: Del.icio.us  Digg  Google  Spurl  Blink  Furl  Y! MyWeb  
<< View previous topic View next topic >>
Post new topicReply to topic

Jump to 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum