Solved

Assistance with Modifying Templates using CSS

Posted on 2011-09-16
12
360 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

914 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now