Solved

Assistance with Modifying Templates using CSS

Posted on 2011-09-16
12
353 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
Comment Utility
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
Comment Utility
going to work on this today...sorryyyy
0
 

Author Comment

by:glozinski
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:glozinski
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I think you should start a new question.  Post it in Dreamweaver, HTML, and CSS for maximum exposure and participation.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Have you ever wanted to create graphical elements directly in inDesign? This tutorial will teach you how to have an image bound within text using the pathfinder tool in inDesign CS6. This technique will help decrease the amount of time spent opening…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

771 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

15 Experts available now in Live!

Get 1:1 Help Now