...

View Full Version : CSS & IMG FLOAT Settings



mingan
05-22-2007, 09:45 PM
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?

Arbitrator
05-22-2007, 10:01 PM
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.


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.


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.

mingan
05-24-2007, 12:40 AM
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.

RandomCoder
05-24-2007, 03:53 AM
Yes, you can override the CSS command. To do so, you a specific class. If this was an image you wanted to float left:


<img src="img_location" />

All you would have to do is add a class name:


<img src="img_location" class="float_left" />

And the appropriate CSS, in this case:


.float_left{
float:left;
}

This will override the other code. (The . before float_left just means that float_left is a class name)

mingan
05-24-2007, 04:29 PM
Thanks RandomCoder, that worked perfectly.

Arbitrator
05-25-2007, 12:42 AM
All you would have to do is add a class name:


<img src="img_location" class="float_left" />

And the appropriate CSS, in this case:


.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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum