• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Silly CSS question

Nocturnal

Nocturnal

Lifer
How exactly does one use this within the main .html page?

I know normally .img would indicate something like p class="img" but what does that other image next to the .img mean or do?

Thanks.
 
It means that all img tags inside the .img class container will have those properties.

You can do the same thing like

.class p {
}

all paragraphs inside the .class container will have whatever properties I put in there.
 
Originally posted by: Nocturnal
So in order to use that in an HTML document would you have to use this syntax:

img class="img"

?
Click to expand...

nope -

think of it this way. In your html document, you can have lots of different "sections" - and for some images, you want a specific border. (Like a gallery - you might want to add a solid white border to make it look like a polaroid picture)

You only want this border for images in the gallery section - and not for all images on the site.

If you put the gallery in an html block element, like a < div > tag, you can seperate those gallery images from regular images you might use on the site.

so, if your div is defined to have class name "img", you'd wind up with <div class="img">

any <img="blah.jpg" alt="some useful text" /> contained in that div would get the css style rule applied. Any img tag located in other sections of the site would NOT.

example:

<body>
<img******="graphic1.jpg" alt="this image will NOT have css style associated with it" />

<div class="img">
<img******="graphic2.jpg" alt="this image WILL have css style associated with it" />
</div>
</body>

graphic2 will get your css style... graphic1 will not.

Does this make sense?

-Matt
 
Originally posted by: Nocturnal
Also just wondering why would someone have a regular .img class and then another .img img class?
Click to expand...
Say you have a container such as a div and inside that container are several linked thumbnail images like so:

<div class="img">
<a href=""><img ... /></a>
<a href=""><img ... /></a>
<a href=""><img ... /></a>
</div>

Now you want the container to have a border around the group of images, but don't want the thumnail images to individually have a border, so you make your css like this:

.img {
border: 1px solid #000;
}

.img img {
border: 0px;
}

Of course you could create a separate class and assign each image that class but this way is more efficient.
 
Ok so in this case the .img img would only normally be used within the div class="img" am I correct or would it also affect the other elements that just bare the img tag? Like outside of this img class, say there is another <img******> tag some where, would that too be affected by the border?
 
Originally posted by: Nocturnal
Ok so in this case the .img img would only normally be used within the div class="img" am I correct or would it also affect the other elements that just bare the img tag? Like outside of this img class, say there is another <img******> tag some where, would that too be affected by the border?
Click to expand...

No. it would not affect img tags outside the .img class.

Check out my example I mentioned earlier... it doesn't affect img tags outside of the class scope.

Also, keep in mind that order of declaration matters in CSS - but remember that specificity also matters as well.

So, if you had flipped jjones' example, it would STILL do what he described.

The first statement applies to everything with an img class name.

The second css declaration is more specific - namely, it only applies to img tags that are contained in the .img class block. Those img tags in the block get the second rule applied, effectively overwriting the first rule when in conflict.

-Matt



 
Originally posted by: mattlear
Originally posted by: Nocturnal
Ok so in this case the .img img would only normally be used within the div class="img" am I correct or would it also affect the other elements that just bare the img tag? Like outside of this img class, say there is another <img******> tag some where, would that too be affected by the border?
Click to expand...

No. it would not affect img tags outside the .img class.

Check out my example I mentioned earlier... it doesn't affect img tags outside of the class scope.

Also, keep in mind that order of declaration matters in CSS - but remember that specificity also matters as well.

So, if you had flipped jjones' example, it would STILL do what he described.

The first statement applies to everything with an img class name.

The second css declaration is more specific - namely, it only applies to img tags that are contained in the .img class block. Those img tags in the block get the second rule applied, effectively overwriting the first rule when in conflict.

-Matt
Click to expand...

This cleared it all up for me. Thanks a lot!
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top