Topic: Selector Div Img and Class (Page 1 of 1)

I have the following (snippet):

<div id="SPLASH_HEADER">
<img class="img_1" src="images/top_goldgrey.gif"/>
<img class="img_2" src="images/top_goldgrey.gif"/>

In CSS how do I write the selector for img_1, img_2 class? I'm thinking:

#SPLASH_HEADER .img_1
{
}

Is that correct?

that or simply:

.img_1
{
    //...
}
.img_2
{
    //..
}

But I strongly recommend you to use semantic names for your IDs and class names.

Your markup might be a made up example, but if you need to use the same image twice, the chances are high that the IMG tags have no reason to be. The images can certainly be replaced by a background image.

Those IMG tags are just tag soup. Think about the accessibility and weight of your pages.

I'm wondering if I should be thinking / approaching my web development differently when using CSS. I'm wondering if I should think more in layers and layers that overlap and absolute layer positioning? I'm still thinking "slice/dice" and table approach.

Can you explain what you mean by a more semantic naming convention for names?

Do you suggest <div/> tags with image backgrounds for all images?

Karl..

Is this legal:

<div id="SOME_ID" class="some_class"/>

Then the selector would be:

#SOME_ID { /* SOME CLASS */ }
#SOME_ID .some_class { /* SOME MORE CLASS */ }

Hi Karl, sounds like you're trying ot get to grips with how CSS defines properties and handles selectors, it can be confusing to start with but once you've got it you'll be flying.

I really recommend taking a look at what the W3C has to say on their website. Crazy I know but the small table at the beginning of the page really breaks things down and explains about using selectors properly.

You don't have to understand it completely, but just bear it in mind and think about it when you write what you already know, a really nice tutorial can be found at the good ol' CSS MaxDesign website. This nicely breaks down how to approach selection.

Now onto what you've suggested in your last comment.

If the following is your HTML...

<div id="SOME_ID" class="some_class"/>

Then you could select it using any of the following...

#SOME_ID{/*Properties*/}
#SOME_ID.some_class{/*Properties*/}
.some_class{/*Properties*/}

Notice that there us no space in the second example between the ID and class selectors, with the space it would mean select an element with class=some_class inside the element with id=#SOME_ID

Use div tags with image backgrounds, only when it's necessary to have a background image, if images are part of your content then leave them in your XHTML.

With regards to semantic naming conventions, let me try and explain with the following examples, these are correct names...

#navigation{/*properties*/}
#warningText{/*properties*/}
#disabledLink{/*properties*/}

And these are wrong...

#leftDiv{/*properties*/}
#redText{/*properties*/}
#greyText{/*properties*/}

Don't use class or id names that are specific to what they do in the current design, because things may change and then your class names and ID's won't make sense anymore.

Cheers,

Do you consider welcome text, so a div with id = "welcome" semantic? Along that same line, what about "thankyou", "moreinfo", "comingsoon"?

quote:

---

poi said:

Those IMG tags are just tag soup. Think about the accessibility and weight of your pages.

---

What is the common approach to dealing with image tags? Do you not use them at all? I'd like to add an image to my page inline with the content, do I style up a div tag with an image background?

quote:

---

Karl said:

Do you consider welcome text, so a div with id = "welcome" semantic? Along that same line, what about "thankyou", "moreinfo", "comingsoon"?

---

Yes, those would be examples of "semantic" designations. That word--semantic--is thrown about quite a bit here, and I wonder if everyone knows what it means. "Semantic" means "related to meaning," but in terms of web design it means "is meaningfully related to the content and/or structure." Something like "leftDiv" has no meaningul relation to the content or structure, it is simply an arbitrary location. If that left div contains your navigation, then a more semantic choice would be "navigation."

I'm not exactly sure what poi means about the tag soup. Not all img tags are bad, and not all images should be made background images. But I'm sure poi had a good reason for posting what he did, and he'll probably come along and clarify it soon.

And I'm guessing that this is the same project you were working on in this thread....

img next to img not touching

After all your calls for help, when I finally did take the time to sit down, look at what you had, and give you my thoughts, you stopped posting in the thread. If you didn't like my advice, you could have just said so, or said that you wanted to move in a different direction. You know, to at least acknowledge me.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

quote:

---

Suho1004 said:

After all your calls for help, when I finally did take the time to sit down, look at what you had, and give you my thoughts, you stopped posting in the thread. If you didn't like my advice, you could have just said so, or said that you wanted to move in a different direction. You know, to at least acknowledge me.

---

Ahh Suho, are you feeling unwanted?

Don't worry buddy, I still luvs ya! It was the shock therapy that did it to me!

Suho, I really do appreciate your help! No intent to avoid at all. Please visit the site again, as I have added content. Uggg, got a little tired so maybe lost a bit of the semantic approach, but I was trying!
Again, the link:
http://www.meetscoresonline.com/ah

Thanks for the tips on semantics, that helps! Question though, what if you have 3 navigation areas: one on top, 1 in the middle, one on the left side? What would be a good choice of names here?

Also, I'm still stuck everytime trying to figure out if I should be using an ID vs. class or both!! Any tips?

Karl..

(Edited by Karl on 04-04-2006 11:07)

Hi Karl,

With regards to multiple navigation, think about the relevancy. Perhaps primaryNav, SecondaryNav, TertiaryNav would be adequate, or mainNav, subNav, externalLinksNav. What is the purpose of the navigation, what is its role/meaning?

With regards to using ID's and classes, think about it like this...

Id's must be unique on your HTML document, you cannot have the same ID used for more than one element per page, where as classes can be used on multiple elements, for example you may have your header and footer identified using Id's but your paragraphs and text styles will be identified using classes. A nice article has been written on this over at the CSS Lounge.

Hope this helps.

Cheers,

quote:

---

Blaise said:

Ahh Suho, are you feeling unwanted?

---

Nah, I'm fine. Didn't mean to sound snippy. I was just a little disappointed that the other thread seemed to die just as I was getting fired up. I seem to be quite a thread-killer.

Karl: Blaise's advice is solid, and I don't have much to add in the way of value. That link to CSS Lounge is a pretty good primer on when to use classes and when to use IDs.

Just to add a semantic (there's that word again!) note, though: IDs are used to identify an element so that you can refer to it without confusing it with other elements. Classes, on the other hand, are not identifiers, they are a way of applying a set of rules to elements. So even though it might sometimes be a little confusing when trying to decide which to use, they are actually very different things, and if you understand that it will make the choice easier. Once again, a good understanding of semantics saves the day. When you start to think in terms of meaning and function, all these things that are confusing now will become a lot clearer.




___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

<img> tags should be used when an image is content. If styling was turned off completely, should the image display? Also make sure the <img> has alt= and longdesc= attributes as applicable.

For image replacement techniques, you can also use a transparent gif and style it with CSS, like so: http://www.tjkdesign.com/articles/tip.asp

(I'm not here to argue the semantics or merit of various image replacement techniques; imo, none are perfect yet...)

Cheers,
DC

Actually the other day I wrote a monster post here, left the tab open for a while and ... closed my browser when I went home
I'll try to sum up what I wrote:

The PhotoShop layer analogy is ok as long as don't think too much in term of absolute positionning. If you rely fully on absolute positionning, parts of your content won't be visible on some screens. Not everybody have a 1024x768 browsing area. For instance in 1280x1024, with the panels and tabs on the sides my browsing area is ~800x850.

Rather try to think in term of flow of ( blurbs of ) content. The blurbs of content can be of different kind : text, illustrations, lists, tabular data, mixed. For each kind correspond a semantic HTML markup ( P, IMG, UL/OL, TABLE, ... ).

The cleaner the markup, the better. You should be able to read the content of your pages easily with CSS disabled. And of course in a plain text browser too.

And the semantic of the IDs classname has been well covered by other inmates.

quote:

---

I'm not exactly sure what poi means about the tag soup. Not all img tags are bad, and not all images should be made background images. But I'm sure poi had a good reason for posting what he did, and he'll probably come along and clarify it soon.

---

yes Master.
If an image is a part of the content, it deserve an IMG tags. If it's here solely for presentation purpose it should, as much as possible, be pushed in the CSS.

When I said 'Those IMG tags are just tag soup', I specifically talked about the markup in Karl's first post. I doubt an image called 'top_goldgrey.gif' brings anything to the readers. As such there's no point to have it in the markup, not to mention have it twice.



(Edited by poi on 04-05-2006 14:29)

It was a note to Karl, poi, not you; I wasn't disagreeing with anything you had said. Karl asked:

quote:

---

What is the common approach to dealing with image tags? Do you not use them at all?

---

I was just trying to do my part.

Cheers,
DC

Ah, thanks for clearing that up, poi.

divinechaos: Yep, and that was some very sound advice.

divinechaos: My previous post was a "direct" reply to Karl's and Suho1004's posts. Don't worry, you absolutely have the right to disagree with me I bark more than I bite, and I also write my share of bu**shits.

Suho1004: Sorry for the delay.

quote:

---

Karl said:

quoteoi said:Those IMG tags are just tag soup. Think about the accessibility and weight of your pages.What is the common approach to dealing with image tags? Do you not use them at all? I'd like to add an image to my page inline with the content, do I style up a div tag with an image background?

---

Is this what you want? http://css.maxdesign.com.au/floatutorial/tutorial0105.htm

That's part of a float tutorial on the same website posted above. (css.maxdesign.com.au)