Solved

Assistance with Modifying Templates using CSS

Posted on 2011-09-16
12
375 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
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.

 
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 250 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
css, html 5 52
Divi Them Help with Full Width header 20 96
ebay style="image-orientation: 90deg;" 2 53
Divi Theme - extra fonts I don't want 13 41
You can download the files for this tutorial here (https://www.dropbox.com/s/hgztzt9b60kddc9/DPS%20Demo.zip?dl=0). The .indd file in the InDesign files folder is a finished version of the file; you can start from scratch and work toward this. Also, …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

837 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