Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS & IMG FLOAT Settings

    Hi,

    I am using the following to keep images from floating on my website:

    p img{

    float: left;

    border: none;

    margin-right: 15px;

    margin-bottom: 10px;

    }

    However, there are certain images that I do want to float. How do I use CSS to differentiate? Can I create a style that applies only to a certain page?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by mingan View Post
    I am using the following to keep images from floating on my website:

    p img{

    float: left;

    border: none;

    margin-right: 15px;

    margin-bottom: 10px;

    }
    I don’t quite follow you. How does using the above style rule “keep images from floating”? According to that code, img elements inside of paragraph elements should be floated to the left.

    On a side note, please use [code] tags to mark up code in your posts.

    Quote Originally Posted by mingan View Post
    However, there are certain images that I do want to float. How do I use CSS to differentiate?
    Use more specific selectors or assign the images that are to be floated (or vice versa) to a class so that you can select the images by class.

    Quote Originally Posted by mingan View Post
    Can I create a style that applies only to a certain page?
    Yes. Embed the CSS in the document itself by using a style element. This would be most efficient method if the CSS will only be used by that one document.

    If the CSS will be used for several pages or embedding is not possible, then assign an ID to the body element and append a reference to that ID in front of every selector that will only apply to that document.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for the unclear post. My CSS IMG style makes all image float:none.

    However, there are a few images I DO want to float. Does code exist to float:left an image that will "override" the CSS, and if so, what is it? Thanks.

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, you can override the CSS command. To do so, you a specific class. If this was an image you wanted to float left:
    Code:
    <img src="img_location" />
    All you would have to do is add a class name:
    Code:
    <img src="img_location" class="float_left" />
    And the appropriate CSS, in this case:
    Code:
    .float_left{
    float:left;
    }
    This will override the other code. (The . before float_left just means that float_left is a class name)

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks RandomCoder, that worked perfectly.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by RandomCoder View Post
    All you would have to do is add a class name:
    Code:
    <img src="img_location" class="float_left" />
    And the appropriate CSS, in this case:
    Code:
    .float_left{
    float:left;
    }
    This will override the other code. (The . before float_left just means that float_left is a class name)
    Do keep in mind that class names should describe content or meaning, not presentation. Thus, float_left is a poor name for a class. If you, for example, later decide that the elements should no longer be floated or should be floated to the right, then the class name becomes inaccurate and you end up needing to change it.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •