Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

trying to float css (need help)

Discussion in 'Website Design Forum:' started by croche, Feb 1, 2009.

  1. croche

    croche Member

    hi im codeing my first site but im having a bit of truble floating a image one way and the text the other way...

    iv got the html sorted now i on to the css but i can seem to get the featured image to float right and the text to float left


    http://www.media36.com/test/

    here is what i want it like

    http://media36.com/img/blue_dream.png

    also how do i get the header background and the featured backgroung on i havng tryed yet but im not sure how to do it anyway

    thanks
    Chris
     
  2. 61pixels

    61pixels Member

    Your first link doesn't work.
     
  3. tim

    tim Senior Member

    yeah, i found that too, but i thought it was probably just my tinterweb connection.
     
  4. croche

    croche Member

    sorry guys try it now
     
  5. tim

    tim Senior Member

    404 not found...
     
  6. croche

    croche Member

    right should work now sorry :)
     
  7. Jazajay

    Jazajay Active Member

    Hay buddy the img directory needs to be removed from the link.
    What I would do is group the text section with a div.
    You currently have this ~
    <div id="featured">
    <img src="http://www.designforums.co.uk/images/featuredimg.png" alt="Featured" class="featuredImage" />

    <img src="http://www.designforums.co.uk/images/featuredtext.png" alt="Blue Dream" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Maecenas at nisi. Sed ligula diam, laoreet vehicula, egestas ut,
    lobortis non, lacus. Read More
    </p>

    I would change that to ~
    <div id="featured">
    <img src="http://www.designforums.co.uk/images/featuredimg.png" alt="Featured" class="featuredImage" />
    <div>
    <img src="http://www.designforums.co.uk/images/featuredtext.png" alt="Blue Dream" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Maecenas at nisi. Sed ligula diam, laoreet vehicula, egestas ut,
    lobortis non, lacus. Read More
    </p>
    </div>

    Then float the images right.
    #featured img{float:right}

    Then counter it for the div.
    #featured div img{float:none}

    Set a width on the div and it should move up to the left.
    #featured div{width:300px}

    Let me know if you are still having issues.

    Jaz

    Key:
    Purple ~ XHTML
    Green ~ CSS
     
  8. tim

    tim Senior Member

  9. 61pixels

    61pixels Member

    You need to float the image right, then wrap the "Featured Text" img, p, h3, p in a div and give it an iD then float that left.

    So.... HTML

    <div id="featured-left">
    <img src="http://www.designforums.co.uk/images/featuredtext.png" alt="Blue Dream" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Maecenas at nisi. Sed ligula diam, laoreet vehicula, egestas ut,
    lobortis non, lacus. Read More
    </p>
    <h3>Services Provided</h3>
    <p id="details">Design, XHTML/CSS</p>
    </div>

    <img src="http://www.designforums.co.uk/images/featuredimg.png" alt="Featured" id="featuredImage" />


    CSS

    #featured-left {
    float:left;
    width:XX; you need to put the wdith of the area here
    }
    #featuredImage {
    float:right;
    width:XX; width of your image here
    }

    Edit: Jaz beat me too it :)
     
  10. Jazajay

    Jazajay Active Member

    Thats a good solution thier 61 pixels, maybe you should type faster next time hay, lol.

    I even colour coded mine, lol.
     
  11. croche

    croche Member

    @ Jazajay you a life saver thank you worked a treat

    @ tim-ater thats how it looks on mine only just started the css
     
  12. Jazajay

    Jazajay Active Member

    No worries, glad I could help.
    Well if I didn't 61pixels would have sloved it, but anyway no worries. :)
     
  13. croche

    croche Member

    i tryed both yours and 61pixels and both worked im gona stick with yours
     
  14. Jazajay

    Jazajay Active Member

    Yeah they would they are both the same solution TBH, great minds and all that. :)
    Mine uses less ids so has less bloat, but apart from that not much in it.
     
  15. tim

    tim Senior Member

    @croche: sorry, bit of a slowpoke! :D glad you found the answer tho.
     
  16. Kevin

    Kevin Senior Member

    I find that styling your font early on enhances the coding process. I don't know why, maybe it's just me but it might have something to do with measurement or some sort of visual/psychological deceit. :p
     

Share This Page