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,195
    Mentioned
    264 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;}

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,195
    Mentioned
    264 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"/>

  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,801
    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
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    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,195
    Mentioned
    264 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.


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
  •