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

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
photoman11Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TCC_HDCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DigitalTechyCommented:
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.
0
elliottbenzleCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

photoman11Author 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.
0
TCC_HDCommented:
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;
}
0
photoman11Author 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?
0
photoman11Author 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
0
TCC_HDCommented:
Your looking in the wrong file.  You need to look at style.css around line 244
0
photoman11Author 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.
0
thehagmanCommented:
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)
0
photoman11Author 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?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.