SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sorry another newbie question how to access this id <img>

    Hi and thanks for any assistance anyone can offer it is much appreciated.

    I am trying to pad an image in a block of text. the images has an id of "art_image"

    a few lines above i style the <P> tag with this CSS

    #main-content span.bran4 p {
    font-size: 12px;}

    so i have tried a multitude of things as below with <span> and <div> tags

    #main-content span .art_image img {
    padding-left:10px;}
    and

    #main-content span p .art_image img {
    padding-left:10px;}

    #main-content span p img .art_image img {
    padding-left:10px;}

    None of them work !!! The XHTML is below

    <!-- START 'Display News by BK 1.6.7' -->

    <span class=' bran4 '>
    </span><div class='contentpaneopen bran4 ' ><h2 class='contentheading bran4 '>Article 1 Dispelling the Myths</h2><span class='small bran4 '>Dr Katherine Davis</span><br/><span class=' bran4 '><p><img src="/selplus3/images/stories/articles/feeding.jpg" width="118" height="150" border="0" style=" " align="right" / class="art_image" ></p>
    <p>Do you buy rolled oats and feed them with chaff? Give your lazy horse oats to get him excited? Feed a bran mash once a week to help clean out his insides? Store your hay for six months before feeding it out? If so, read on - you might be surprised to learn that some of the feeding guidelines you've been following may contain more fiction than fact.</p>

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You should be able to target the img tags class directly
    Code CSS:
    .art_image{
      padding-left:10px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks....so simple that works great, will remember that.

    Thanks again

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Just to explain why what BPartch said works:

    <img class="art_image" />

    equals

    img.art_image

    You were calling

    .art_image img

    For that to work, .art_image would have to go on it's PARENT - probably the paragraph tag you are wrapping around the image for no good reason.

    <p class="art_image"><img /></p>

    To that end though - christ that code is span-happy. Don't know what that bran4 class is, but fairly certain it's unneccessary since you are slapping it at EVERYTHING... The empty span preceeding it can probably be axed - you've got a class on the wrapping div so what do you even need a class on the h2 for, "small" is a presentational class and therin bad coding practice, you should have a class saying WHY it's small, not just that it's small (at that point you might as well be using a small tag), you've got a class for the images so why are you declaring align, border, etc... If that's going to be the only image inside the div you might not need a class on that (though I'd probably use a class called "trailingPlate")

    I really doubt you need that section to be much more than:
    Code:
    <div class="contentPaneOpen">
    	<h2>
    		Article 1 Dispelling the Myths<br />
    		<small>Dr Katherine Davis</small>
    	</h2>
    	<img
    		src="/selplus3/images/stories/articles/feeding.jpg"
    		alt="Feeding a horse oats"
    		class="trailingPlate"
    	/>
    	<p>
    		Do you buy rolled oats and feed them with chaff? Give your lazy horse oats to get him excited? Feed a bran mash once a week to help clean out his insides? Store your hay for six months before feeding it out? If so, read on - you might be surprised to learn that some of the feeding guidelines you've been following may contain more fiction than fact.
    	</p>
    <!-- .contentPaneOpen --></div>
    In terms of markup. Provides MORE than enough hooks for styling it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •