SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    first blog image css next to blog post?

    Is it possible like the first image you have on your blog post to be next to the post? Automatically feeds into the short description?

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a good example. First post is what I want to do the next few posts don't look like that. I had to do that manually, but I'm wondering if there's anyway of doing it with CSS so it auto posts the first image like that.

    http://fithope.com/

    my code
    .sf_region7 {
    float: right;
    width: 307px;
    margin: 0px 1px 50px 0px;
    overflow: hidden;
    display: block;
    }

    .sf_blog_postmeta {
    font-size: 14px;
    margin: 5px 0px 10px;
    clear: both;
    }

    .sf_blog_posttitle a:link, .sf_blog_posttitle a:visited {
    color: #0000ff;
    text-decoration: underline;
    }

    .sf_blog_posttitle a:hover {
    text-decoration: none;
    }

    .sf_blog_entry {
    margin-bottom: 5px;
    line-height: 150%;
    font-size: 14px;
    color: #000000;
    text-align: justify;
    }

    .sf_blog_entry img {
    clear: both;
    margin-right: 5px;
    }

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your template, make the image the first element in the div and float it left. The text will wrap around it.

    If you want every new post to behave the same way automatically, then you'll have to create new divs dynamically, but yes it can be done, only not with CSS alone. You'll have to use a scripting language like JavaScript.


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
  •