Solved

How to add padding to article images but not module images

Posted on 2010-08-26
8
604 Views
Last Modified: 2012-05-10
I've adding left-padding to article images so keep text away from the edges, but doing this causes all other images, such as that in the header on the supplied link, to move to the right.

I need someone to help me with the CSS to stop this from happening on the site.

http://gator967.hostgator.com/~tekspec/vasarelli/index.php?option=com_content&view=article&id=54&Itemid=48
0
Comment
Question by:TonyCabone
8 Comments
 
LVL 9

Expert Comment

by:Snarfles
Comment Utility
rather than adding it to .img add it to its own class

<img class="paddedimage" border="0" align="right" src="/~tekspec/vasarelli/images/stories/bottle-shots/Chardonnay-mv.jpg">

then to your templates css add

.paddedimage{
padding-left:15px;
}

so basically when you add an image that you want padded just add this to the tag

class="paddedimage"
0
 

Author Comment

by:TonyCabone
Comment Utility
Ok thanks for that it will work however I don't want users of the back end to have to input the code manually.

Is there a way that I can override the css in the header images using your method, rather than the article images?
0
 

Author Comment

by:TonyCabone
Comment Utility
points increased
0
 
LVL 9

Accepted Solution

by:
Snarfles earned 250 total points
Comment Utility
if you instead want all images on the site to have the padding-left of 15px but for the header image not to. Just go into your template file and change the following

<img width="640" border="0" src="/~tekspec/vasarelli/images/stories/wine.jpg">

to

<img width="640" border="0" style="padding-left: 0px;" src="/~tekspec/vasarelli/images/stories/wine.jpg">

This works because the direct style is applied to the element last which overrides the default img class.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 4

Assisted Solution

by:jayantc
jayantc earned 50 total points
Comment Utility
add padding to

table.contentpaneopen, table.contentpane img {padding-left:15px;}

remove
img { border: 0 none; padding-left: 15px;}

- JayantC
0
 

Author Comment

by:TonyCabone
Comment Utility
Snarfles this solution also works but what about when I need to control these elements differently for IE & FF?

I need to control the padding of the images in this modules using CSS, like jayantc's suggestion only that did not appear to have any effect, any other ideas?

Points maxed.
0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 200 total points
Comment Utility
What Snarfles suggested was right!, and it applies to the article images.
In addition, you must remove the img css (img { border: 0 none; padding-left: 15px;}).
Another option, is to put the header image in a div with an id (<div id='header_image'>), and then add to the css the following:
#header_image .image {
      padding-left: 15px;
}
0
 

Author Closing Comment

by:TonyCabone
Comment Utility
correct syntax #header_image img
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

744 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