SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    inline float image not floating

    Help! I know I'm overlooking something stupid, but can't see it.

    I want to float a simle, smallish gif on the left hand side of the text in a very simple xhtml page.

    This is the whole paragraph.

    ---------------------------------------------------------------------------------------------------------------
    <p>Emergency waterleak repairs in southeast London is one of the key services I deliver, seven days a week if need be. A lot of people think this is something that
    will only happen in winter during long periods of severe frost. I can assure you that is not at all the case, and have included a list of some of the most frequently
    found reasons for a problem of this kind to pop up. Some of these are utterly obvious, or at least will be when you think about it; others are not. And when it
    happens and you can not control it, this simple, clean water that we all take for granted can cause an enormous amount of grief. <img {float:right} src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/> </p>
    ------------------------------------------------------------------------------------------------


    The purpose of this exercise, is to leaf all css alone and manipulate am image inline.
    When I remove the {float:right} the image displays fine exactly where I put it.
    When I add {float:right} I get a dispaly error pointing at the first curly bracket.

    Experimented with id, class and various syntaxis, but nada.

    Starting to pull my hair out, which I can not afford as there isn't that much left.

    Many thanks for any solutions that will allow me to float an image inline.

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    {float:right} is CSS notation, so you can't add it into an HTML tag. Give your img a class then reference it in your style sheet. e.g.
    Code:
    .classname {float:right;}
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Sorry - I've just re-read your post and realised you specifically wanted to put the declaration inline. Assuming you understand why that's generally a really bad idea, you can do it with <img style="float:right;" src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/>
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Muchas gracias senhor Bear.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    When you want to add CSS inline to a tag you use the style attribute of the tag.
    eg
    Code:
    <p style='your css rules here>text </p>
    As TB was saying this is not the optimal way of using CSS tho.

    ALSO NOTE: FLOATED ELEMENTS must be placed FIRST in the source code. The way you have it the image will float.. but bellow all the text in the paragraph ( maybe that's what you intended, tho ).


    Code:
    <p><img style='float:right'  src="GSR GIF 100.gif" width="100" height="100" alt="water leak repairs Gas Safe Registger logo"/> Emergency waterleak repairs in southeast London is one of the key services I deliver, seven days a week if need be. A lot of people think this is something that
    will only happen in winter during long periods of severe frost. I can assure you that is not at all the case, and have included a list of some of the most frequently
    found reasons for a problem of this kind to pop up. Some of these are utterly obvious, or at least will be when you think about it; others are not. And when it
    happens and you can not control it, this simple, clean water that we all take for granted can cause an enormous amount of grief. </p>

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks DF, I know using css inline is not ideal, I use it as a temp to see what it looks like and then adjust size, position and whatever until I am happy that it looks ok in various browsers. When I am satisfied with the compromise, I add the result to the style sheet.
    There is a lot of experimenting to do, as I am completely rewriting my site from a very clumsy "as long as it displays, I am happy" html4-loose and all inline, to xhtml-strict with as much css as practicable. One could say this is a bit of a lurning curve; I have zero formal training and learned everything I know through reading forum threads, asking questions from time to time, doing online courses and reading library books. The Sitepoint members have been instrumental with their advice.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You can also experiment in-browser using the built-in (or add-on) plugins for debugging. Chrome comes with the Chrome web developer, and IE also comes with one. Opera comes with Dragonfly though I have trouble manipulating the panel there (lack of familiarity mostly). You can download Firebug for Firefox. I'm sure Safari has something too but I can't afford a special computer just to run that browser :)

    When you open the debugger you can actually type in CSS on elements and see the changes live.

    Muchas gracias senhor Bear.
    senhorA even

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Ah. Without the h even.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    Quote Originally Posted by benbob View Post
    Ah. Without the h even.
    I understand it's hard to tell under all the fur.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!


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
  •