?
Solved

Assistance with Modifying Templates using CSS

Posted on 2011-09-16
12
Medium Priority
?
402 Views
Last Modified: 2012-05-12
Index-"Store Message Background Image" has it see http://65.254.54.66/~ps4/index.php  I also need to have image on left hand side and text on the right hand side of the image
All of these pages are modified by using the PowerCMS Builder by Webassist  If I can do one I can copy and paste for the other pages.
About Us -http://65.254.54.66/~ps4/aboutus.php  
Contact Us
Products
Product Details
I would like to edit these pages by placing the "Store Message Background Image" on each of these pages so that I may place and image and text overtop of this image and they would be seperatete images and texts on these pages
Most appreciatively....
Thank you.
G
Please advise if this not enough points.
0
Comment
Question by:glozinski
  • 6
  • 6
12 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36550606
Not totally sure what you are asking, but...

On index, I see the following path for the image:

/ps4/imagesupload/cms_files/logos/logo.jpg

But the URL shows ~ps4 so maybe you just fat-fingered it.

--------------

About Us

You need to add the background image to the dt tags via CSS.  Either redefine the tag in CSS or add a class.
0
 

Author Comment

by:glozinski
ID: 36562037
going to work on this today...sorryyyy
0
 

Author Comment

by:glozinski
ID: 36562964
okday being new to css do not know what dt tags are
are able to provide a suggested code that would work?  also I need to divide it into two columns as well.
thank you
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36562972
View the HTML source for your navigation.  You are using the HTML "definition list" tags to create it.  Those tags are <dd> and <dt>

So, to redefine any HTML tag globally in CSS you simply do:

dt {
      add CSS attributes;
}

to your stylesheet.
0
 

Author Comment

by:glozinski
ID: 36581974
I only want this on
index page, contact us page, about us page, products page not throught the complete website.  Would I still do the above?
Thank you
http://65.254.54.66/~ps4/aboutus.php
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36582017
If the definition list tag only appears on those pages, then yes you would redefine the tag as above.  You could also create a CSS id and apply that to the tag to get the same effect but with the ability to manually apply it on a page-by-page basis.
0
 

Author Comment

by:glozinski
ID: 36588479
I need to have the Text on the left hand side of the image what would be the code for doing that?
 <div id="image"><h2><img width="192" height="199" src="http://65.254.54.66/~ps4/imagesupload/cms_files/fem_tree.jpg" alt="default-product_thumb.png"><div id="heading">When Your Home or Office DEMAND the Finest Finishing Touches with Artificial Plants, Trees &amp; Accessories!!!</div></h2></div>

I would also like to put on the index page
image on the left hand side and then 4 images on the right hand side looping. What would be the best way to do this? Plus I also need the background image showing through as well.
Thank you in advance for your assitance
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36588495
Is this still the original question about the navigation?  We seem to have moved on from the list to headers and what not?
0
 

Author Comment

by:glozinski
ID: 36588629
yes, I am still wanting to use the orginal image and place text with it using CSS
the second requrest is doing the same but having images on the right hand side looping...so I am not sure if this can be done using css or photoshop or dw itself.
thank you
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 1000 total points
ID: 36588701
To have elements float, you use the CSS float attribute but you also need to set widths to make it work.  A basic float example is:

<div style="width: 80%; float:left;">Some text here</div>
<div style="width: 19%; float:right;"><img src="something.jpg" /></div>

What I would do in this specific case is remove the h2 tag, add the divs above like I have it, put the h2 back on the text in the left div, and then start playing with widths, margins, padding until you get the effect you want.  

>> the second request is doing the same but having images on the right hand side looping

Looping how?  In the future, try to break your questions up so a single EE question is about one problem or technique.  Trying to discuss two different things at once is confusing to everyone.
0
 

Author Comment

by:glozinski
ID: 36588829
Awesome. Thank you...ooops sorry about that.  Are you able to finish by telling me how to do the looping or should I start another EE question.
Again, thank you sooo much.
Appreciatively,
G
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36588838
I think you should start a new question.  Post it in Dreamweaver, HTML, and CSS for maximum exposure and participation.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month6 days, 10 hours left to enroll

594 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question