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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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;
}
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;
}
ASKER
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?
If so, do I have to get into the code to change how the JPEG is "called" into the webpage?
ASKER
I finally got into the code ready to experiment, and cannot find this:
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
.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
Your looking in the wrong file. You need to look at style.css around line 244
ASKER
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.
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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?
ASKER
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.