Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Sorry for the lame title..

I bought a template off template montser and I am trying to change some text on the header. The text is stored as a png image. I opened the psd file in photoshop and changed the text to what I wanted. Put the layer in a new file and saved as PNG. In the psd, the text appears exactly as I want in relation to the website. When I use the png I saved, it is much smaller

Photoshop file: Screenshot of Photoshop file

Result (I know background color is off): Webpage

Template before tampering with it: Template

Anybody know whats going on or how to make this the correct size?

EDIT : I now know that CSS is limiting the size of my image. The problem is, I'm a nooob on CSS.

My index file is:

<div class="container_12">
    <div class="wrapper">
        <div class="grid_12">
            <h1 class="fleft"><a href="index.aspx"><img src="images/cbjlogo.png" alt=""></a></h1>

And the corresponding CSS:

.container_12{ position: relative; width: 960px; margin: 0 auto; padding: 0; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12
{ float: left; display: inline; margin-left: 10px; margin-right: 10px; }

.wrapper{overflow:hidden;position:relative;}

.container_12 .grid_12          { width: 940px; }

.fleft{float:left}

.header h1 a img{ max-width:100%; height:auto;}

I'm not exactly sure which of these is causing the size constraints..can anyone help? I believe it has something to do with the container or grid

share|improve this question
add comment

1 Answer 1

up vote 1 down vote accepted

When you modified the image in photoshop, did you change the image size at all? A lot of the templates use a fixed size for the specific image they come with, if that image has been modified at all, it will appear smaller/larger, and possibly mess up some of the other elements on the page.

In other words, the image that came with the template should be the exact same dimensions as the new image that you have created.

share|improve this answer
    
That worked. I need the image to be much wider than the original though. Do you know where they would normally put these size constraints, or how to change them? –  CSharpDev Jul 31 '12 at 16:27
    
They would be in the default index file, and possibly the default css file. Look at the code in the index file, find where the image is tagged, and then see what it's size constraints are. You should be able to modify it there, if not, see what container the image is in (div/span etc) and what id that is, like logo or something. Then find that ID in the css file, and modify the image size there. –  Ryan Jul 31 '12 at 16:30
    
Well, in the CSS< there is a max-width: 100% and height: auto which I think should mean any size would go there. Thats what i've been messing with and I cant figure it out –  CSharpDev Jul 31 '12 at 16:33
    
Then I would say look at the index file itself, there should be an image tag: <img src="some-source" alt="something" width="100px" height="200px" /> –  Ryan Jul 31 '12 at 16:35
    
Please see my edit to the question –  CSharpDev Jul 31 '12 at 16:42
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.