Adding Images In WordPress

Discussion in 'WordPress' started by Pacific Publishing, Dec 23, 2007.

  1. #1
    I'm having difficulty justifying the text to the left of my images in WordPress.

    www.obsessionfitness.com

    In the post editor it shows the image floating to the right of the text but the live site shows the image on the left.

    Any thoughts are appreciated.
     
    Pacific Publishing, Dec 23, 2007 IP
  2. mizaks

    mizaks Well-Known Member

    Messages:
    2,066
    Likes Received:
    126
    Best Answers:
    0
    Trophy Points:
    135
    #2
    Create a css float like:

    
       .right_img {
        position: relative;
        float: right;
        margin: 0 10px 0 10px;
        }
    
    Code (markup):
    Use it like this:

    <img class="right_img" src="http://obsessionfitness.com/wp-content/uploads/2007/12/41a-od-xql_aa280_.jpg" alt="perfectpushup" />
    Code (markup):
     
    mizaks, Dec 23, 2007 IP
  3. Pacific Publishing

    Pacific Publishing Banned

    Messages:
    330
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks so much. I'm not very experienced with CSS. Does it matter where I add the code? Here's the complete layout.css (assuming that's the file to edit).


    html, body {
    margin: 0; padding: 0;
    text-align: center;
    }
    h1,h2,h3 {
    margin: 0; padding: 0;
    }
    #wrapper {
    width: 788px;
    text-align: left;
    margin: auto;
    }

    #header, #navigation_bar, #content, #blog, #footer {
    width: 788px;
    display: block;
    position: relative;
    float: left;
    }


    #footer {
    margin: 6px 0;
    color: #775;
    font-size: 11px;
    clear: both;
    }

    .footer_mod {
    display: block;
    width: 520px;
    float: left;
    margin: 0 50px 0 0px;
    float: left;
    }

    #f2 {
    width: 130px;
    margin: 0;
    }
    .footer_mod a {
    color: #775;
    }

    #blog {
    min-height: 400px;
    padding-bottom: 14px;
    float: left;
    }

    #content {
    margin: 6px 0 0 0;
    }

    #header {
    height: 62px;
    }

    #blogtitle {
    position: absolute;
    top: 15px;
    left: 18px;
    }

    #navigation_bar {
    height: 38px;
    border-bottom: 1px solid #a2b47a;
    margin: 6px 0 0 0;
    position: relative;
    overflow: hidden;
    }

    #navigation_bar ul {
    padding: 0;
    margin: 0 0 0 6px;
    }
    #navigation_bar ul li {
    position: relative;
    top: 10px;
    display: inline;
    height: 38px;
    padding: 10px 14px 10px 14px;
    border-right: 1px solid #9fb178;
    list-style: none;
    }
    #navigation_bar ul li ul {
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
    }
    #navigation_bar ul li ul li {
    top: 0;
    border-right: none;
    border-left: 1px solid #9fb178;
    padding-right: 0;
    margin-left: 5px;
    }
    #search_bar {
    position: absolute;
    right: 10px;
    top: 0px;
    }
    #searchsubmit {
    position: relative;
    top: 6px;
    margin-left: 4px;
    }
    .postmeta {
    margin: 6px 0 12px 0;
    }
    .blogpost {
    width: 586px;
    float: left;
    }
    .postdate {
    width: 470px;
    }
    .postheader, .postbody, .subpostmeta, #postcomments{
    margin: 0 0 0 90px;
    width: 470px;
    position: relative;
    }

    .pageheader, .pagebody {
    margin: 0 0 0 30px;
    width: 470px;

    }
    .postheader {
    margin-right: 40px;

    }
    .subpostmeta {
    padding: 8px 0;
    }
    .postdate {
    position: absolute;
    top: 24px;
    left: 30px;
    width: 30px;
    }
    #postcommentscount {
    position: relative;
    top: 32px;
    left: 30px;
    width: 40px;
    height: 37px;
    clear: left;
    background: url(images/commentbubble.gif) top left no-repeat;

    }
    #sidebar {
    float: right;
    margin-top: 20px;
    width: 182px;


    }
    .postbody img {
    float: left;
    margin: 5px 20px 20px 0;
    }
    .footer_mod ul li {
    list-style: none;
    margin: 0; padding: 5px 0;
    border-bottom: 1px solid #313129;
    }
    .footer_mod ul {
    margin: 2px 0 0 0; padding: 2px 0;
    }
    #footer_meta {
    margin: 8px 0;
    line-height: 16px;
    }
    #footer_meta h3 {
    margin: 0 0 5px 0;
    }
    .pagebody .navigation {
    margin: 12px 0;
    }
    .navigation {
    display: block;
    margin: 12px 0;
    width: 300px;
    }
    #archivebody {
    margin-left: 80px;
    margin-top: 15px;
    }
    ul#searchresults {
    margin: 5px 300px 15px 30px; padding: 0;
    border-top: 1px solid #efeed6;
    }
    ul#searchresults li {
    list-style: none;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #efeed6;
    }
    ul#searchresults li a {
    font-weight: bold;
    }
    ul#searchresults li a:hover {
    color: #663a2e;
    }
    ul#searchresults li small{
    font-size: 10px;
    margin-left: 5px;
    text-transform: uppercase;
    }
    a.more-link {
    margin-top: 10px;
    display: block;
    padding: 0 0 0px 18px;
    background: url(images/crosspattern.gif) top left no-repeat;
    }
     
    Pacific Publishing, Dec 23, 2007 IP
  4. thinlight

    thinlight Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Where is this "layout.css" file? As I know, you should go to your theme directory and pick up the style.css file to edit.
    It doesn't matter where you put the new code, but do NOT put it in to existing braces. Just append it to the end and it will work.
     
    thinlight, Dec 24, 2007 IP
  5. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #5
    if layout.css is the main css file for that theme (will be located at public_html/wp_content/themes/your_theme/layout.css) then it can be placed anywhere within that file.
     
    just-4-teens, Dec 24, 2007 IP