SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    simple float css question.

    I want to float the images to the right of the text.
    http://cdiwwwtest.cdicorp.com/aboutu...drecognitions/
    Any advice please?
    thx
    D

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You can either put the image inside the paragraph it will float in:

    Code:
    <p><img> Text here</p>
    or you can keep it inside the <p> it's currently in but float that <p>.

    Remember that the floated item needs to go before the item it will float beside, or at least early within it (as in my code sample—put the image near the start of the text).

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you ralph this is what i got:
    Code:
    .awardContent{
    padding:0px 50px 0px;
    }
    .awardContent img{
    display:block;
    float:right;   
    border:1px solid #ddd;
    padding:5px 5px 20px 5px;
    margin-top: 10px;
    }
    
    .awardContent p{
    float: left;
    width:70%;
    clear: right;
    }
    will try what you suggest. I have to keep it the <p> tags. We are trying to make it easy on the user that is adding material to wp. So have been told to try & avoid custom fields.
    so in this case the images are added into the page directly.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    That code doesn't do what I thought you were wanting. Perhaps explain how you want the page content arranged.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    sure thx.
    i want the images neatly to the left, or right of the text blocks.
    as thought they were neatly lined up in a table.

    & actually i can get rid of the width for the p that does nothing.
    D

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Does the WP interface allow for the client to place classes on the various paragraphs? This is pretty messy, though. Ideally, you want a more sophisticated set of entry fields to make for a better layout. I've lost touch with WP so not sure how easy this is, but with the CMS I use it's a breeze.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    you know...I really think not.
    I have been asked to try it out this way. To allow the user to edit their own content as much as possible.
    The person who asked me to try this out thinks customs fields are too hard. So don't know if the user would be open to add classes. Worth a shot.

    So far as i can see. you don't get as much control this way.
    Or at least so far i can't align those images as i could if using custom fields in divs.

    Thanks Ralph

    Quote Originally Posted by ralph.m View Post
    Does the WP interface allow for the client to place classes on the various paragraphs? This is pretty messy, though. Ideally, you want a more sophisticated set of entry fields to make for a better layout. I've lost touch with WP so not sure how easy this is, but with the CMS I use it's a breeze.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You might just be better off letting the client add text, images etc. as normal, and just set images to float: right and be done with it. Trying to wrap tags around things in the situation you describe sounds like a bit of a mess to me.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hi, that is what i am doing now.
    And the images simply stay in their own block beneath the text.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    hi, that is what i am doing now.
    And the images simply stay in their own block beneath the text.
    So is this using a WYSIWYG editor in WP? Which one is it? Often those editors have more advanced settings, where you can specify how the image behaves. Looks like currently WP is wrapping a <p> around the image by default, but you don't want that.


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
  •