Solved

Assistance with Modifying Templates using CSS

Posted on 2011-09-16
12
367 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
stop navigation from wrapping 7 81
Capture logon name 13 73
Easy responsive table out of existing table 28 55
Change div area and length 1 28
The ability to automatically add page numbers to a layout is one of the many easy, convenient features InDesign has to offer. There are many reasons why you would want to automatically generate page numbers in your next project, so whether it’s a ma…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
Learn how to automatically add page numbers in your next InDesign project. This can be very helpful in multi-page books and magazines that you are designing. Make sure your Pages window visible.:  In the document you wish to add page numbers to. Act…

803 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