I need some guidance regarding changing the text in a webpage banner developed by a contractor

photoman11
photoman11 used Ask the Experts™
on
Greeting experts,

I have had contractors put together 7 webpages in a subdomain for me, the primary index of which is: http://sample-poses.best-family-photography-tips.com/

I am attaching a screenshot of the directory structure the contractors used  in setting everything up, in addition to screenshots of the various components that are all contributing to the question I have.

Since the contractors are no longer available, I am in a bit of a dilemma since I am not terribly HTML literate but I want to be able to do simple things such as changing the text in the headers. Even though the contractors originally constructed each header as a series of images, I do have a PSD of the complete header (although it was not used as a file to create the actual webpages).

My question basically comes down to this:

When I want to change the content of the text, and keep everything else the same in the header, how can I determine where on the banner, that text will display (position-wise) other than a very long trial and error basis?

Would I be better off to replace the component pieces of the header with a JPEG equivalent of the Photoshop document, so that I know how everything is positioned exactly? If that's the case, what do I need to do in the file structure, other than deleting the files I am no longer needing and inserting the new PSD-generated jpeg's?

I don't know anything about how the images are "called" into the webpage so I'm trying to avoid a major rewrite just to do something simple by changing some of the text in the headers.

I hope that made sense. If not, please let me know and I will provide whatever other details are necessary to paint a clear picture. Thank you very much.
complete-banner.png
header-background.png
header-text.png
header-1.png
file-structure-1.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
It's all in the css.  Look in the file style.css around line 244

.art-Logo {
display: block;
position: absolute;
left: 15px;
top: 90px;
width: 974px;
}

I'd recommend using Google Chrome (the firebug extension works well too), just navigate to the page, right click and choose "inspect element".  The relevant CSS is displayed  int the Developer Tools window, and best of all you can change the values (try changing the left value from 15px to 1000px) and the text will move to the position you specify.

Obviously you'll need to make the changes in style.css for the changes to be persistent.
TCC_HD is correct regarding the css if you want to change the format, position or size.  I would like to add, you mentioned you are interested in quickly changing just the text?  If this is the case and the text is not selectable, as in it is an image and not html just like you provided.  You can merely load that into Photoshop erase the text, re-type whatever you want it to say, save it as the same filename, same extension and same dimensions then upload it to the server.  This will make the change exactly how you want without messing up any sizing.
If I understand correctly you would like to change the text in the header. Open the images folder, then open teader-text folder and you will find an image called "header-text/text_home.png" just change this text and save it as a transparent .png file. Then upload over the old file (give the new one the same name).

Each page has a different text image, for example the baby page has "text_baby.png"

Change the text to what you want, make sure to save as a transparent .png file.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Sorry for the confusion.

Changing the actual text and then uploading the new file, overwriting the old one, is not a problem. Even if I want to change the SIZE of the font, that is not a problem either.

The issue comes into play when I want to REPOSITION WHATEVER THE NEW TEXT IS, within the banner. What is the easiest and quickest way to do that? Right now, I have no idea where the text is going to be positioned in the banner, after uploading the new text file. I need to know how it is positioned before I uploaded.

Just to let you know, while my HTML knowledge is minimal, my CSS knowledge is nonexistent.

Thanks to everyone for your advice.

Commented:
There's no way around it, the CSS determines the position of the text, you have to modify the CSS in order to change the position.  Basic knowledge of CSS can go a long way.  And it's really pretty easy to learn.  Start playing with Chrome's Developer Tools (or Firebug) and I bet you get the hang of things pretty quickly.  http://www.w3schools.com/Css/ is another invaluable resource.

As I mentioned earlier the following block of CSS (found in style.css around line 244) controls the position of your text.  Change the value for left and/or top to move your text.

.art-Logo {
display: block;
position: absolute;
left: 15px;
top: 90px;
width: 974px;
}

Author

Commented:
I appreciate that. I'm wondering, since I do have the complete header with all the components in a PSD, could I simply delete the components from the image folders and then make all the changes I want in the PSD, save it as a JPEG and load that in the image folder?

If so, do I have to get into the code to change how the JPEG is "called" into the webpage?

Author

Commented:
I finally got into the code ready to experiment, and cannot find this:

.art-Logo {
display: block;
position: absolute;
left: 15px;
top: 90px;
width: 974px;
}

by either doing a "find" search or by visually looking around line 244. I'm sure I'm missing something obvious but I can't figure it out. I am attaching a screenshot of the code around line 244.

Thanks for your help.
line-244.png

Commented:
Your looking in the wrong file.  You need to look at style.css around line 244

Author

Commented:
See, I told you I did not know that much about this stuff.

One final question – if I change the positioning for left and top of the CSS around line 244,  won't that change the position for the text ON EVERY HEADER?

In other words, I was expecting to be able to INDEPENDENTLY position whatever the text is that I want to use on EACH OF THE FOLLOWING PAGES: Home, Babies, Children, Individuals, Couples, Groups, and Ultimate Poses Collection.

If I cannot do that using the CSS, then I need to come up with a different approach because having the text used in every header, being at the exact same starting point, is not practical.

If that's the case, I guess I need to come back to this question:

Since I do have the complete header with all the components in a PSD, could I simply delete the components from the image folders and then make all the changes I want in the PSD, save it as a JPEG and load that in the image folder? Or, with that somehow conflict with the CSS?

Thanks for your patience.
Yes, any changes in the CSS file have implications to all pages linking in that CSS.
But you can always override the CSS settings within the style attribute on the individual page.
Your <div class="art-Logo" ..> has already a stlye= attribute (it always had or is that already part of your experiments?)

Whatever setting of the css you want to override, you can add her.
For example, to move the logo 10 pixels down compared to standard position, you may append
top:100px
(delimited with a semicolon) to the style="..." attribute (that's 10 pixels below the 90px you have from css)

Author

Commented:
Thank you for helping out. Since I am completely unfamiliar with CSS (I have enough trouble with basic HTML), is there any way that I can do this and not mess everything up:

Since I do have the complete header with all the components (background, image, logo, and text content) in a PSD, could I simply delete all the old/current components from the image folders and then make all the changes I want in the PSD, save it as a JPEG and load that in the image folder? Or, with that somehow conflict with the CSS?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial