8 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I understand the difference between the two in that <id> is used when the information is unique within the document, and a <class> when the same type of info will be seen more than once.....

however I'm puzzeled. I accidentally used <id> on 4 pages and the css worked for it. realising my mistake I changed it to a class and low and behold the code no longer works. I am dumbfounded and can't figure what I'm doing wrong here.....and the more I mess around with my code the more is going wrong. I'm pulling my hair out.

html

<div class="main-text">

css

.main-text, #h4 {
    color: #800000; 
    font-family: verdana, arial, sans-serif; 
    padding: 0; 
    margin: 0 65px 25px 65px;
    }

thanks

larmyia

ps...in addition, when declaring the class in css, when do you put something before the *.* - ie I've seen

p.contact {
    margin-left: 65px;
    }

bpat1434
bpat1434's picture
Offline
Enthusiast
Last seen: 12 years 46 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

&lt;id&gt; and &lt;class&gt;

The *.* definition type is for this:

item.class

So your example p.contact is saying this:

For the item <p> when it has a class of "contact" it will display that way, rather than just as a regular paragraph.

Hope that was clear.

As for your other problems, how about some examples, what does the rest of the code look like?

~Brett

~Brett

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

&lt;id&gt; and &lt;class&gt;

bpat1434 wrote:
For the item <p> when it has a class of "contact" it will display that way, rather than just as a regular paragraph.

Hope that was clear.

yes, but then how come you usually see it by itself ie .contact as opposed to p.contact?

As for the other prob, the code is as follows:

html

<div class="main-text">
        <h4>Experience</h4>

        <!--tony's experience information-->
		<p>Tony has a great deal of varied and extensive experience in the oil field buisiness.  This includes, but is not limited to:</p>
		  <ul id="experience-list">
		    <li>Abandonments</li>		
			<li>Completion Equipment</li>
			<li>Fishing Tool Supervisor</li>
			<li>Geothermal</li>
			<li>Multi-laterals</li>
			<li>Open Hole &amp; Cased Hole Fishing</li>
			<li>Section Milling</li>
			<li>Servicing Fishing Tool &amp; Liner Hanger Contracts</li>
			<li>Sub-surface Safety Systems</li>
			<li>Wipstocks</li>
			<li>Workovers - on/offshore</li>
		  </ul>
      </div>

css

h4 {
    color: #800000; 
    font-family: verdana, arial, sans-serif; 
    padding: 0; 
    margin: 0 65px 25px 65px;
    }

.main-text {color: green:}

I seperated <h4> and <.main-text> to try and see where my prob is. do you need anything else?

many thanks

larmyia

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

&lt;id&gt; and &lt;class&gt;

Hi larmyia,
Russ has written an excellent Selectutorial which would be well worth a look.
It looks to me as if you are trying to target the h4 within a div classed main-text.

.maintext h4{ /* this should be what you want */} 
.maintext, h4{ /* although very similar the comma seperates the selectors so here you target .maintext and h4}

Using a tag in front of a class is just being more specific and only targeting classes of a particular tag as opposed to every tag with that class.

bpat1434
bpat1434's picture
Offline
Enthusiast
Last seen: 12 years 46 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

&lt;id&gt; and &lt;class&gt;

I'll make this as simple as possible:

If there is a field-name in front of it (p) the the code will apply to the class (or ID) of the text. So:

p.contact

refers to a paragraph that references the class contact.
<p class="contact">

Using ".contact" on it's own allows you to call it as a div from anywhere.

<div class="contact">
<p></p>
</div>

Your current setup of .main-text, h4 will not work because you are saying any h4 or any .main-text will have this style.

Your code should probably be without the comma and be:

.main-text h4{}

~Brett

~Brett

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

&lt;id&gt; and &lt;class&gt;

Here you go:

CSS:

p.contact {
background-color: green;
}

.contact {
backround-color: yellow;
}

.contact p {
background-color: pink;
}

HTML

<p class="contact"> this will have a green background </p>

<div class="contact"> this will have a yellow background</div>

<div class="contact"><p> This div will have a yellow background, but the text will have a pink background. It will look like a pink box with yellow border (depending on the padding)</p></div>

Verschwindende wrote:
  • CSS doesn't make pies

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

&lt;id&gt; and &lt;class&gt;

thepineapplehead has actually given a very good example of how you can mix and match your classes. It gives a fair bit of flexibility in how you do your CSS, but there are potential pitfalls as well if you get into circumstances where there is greater specificity to one class declaration compared with another.

In addition to the example given above, you should realize that you can stack class declarations together:

.bold {font-weight:900;}
.large {font-size:larger;}
. . .
<p class="large bold">This is a large bold paragraph</p>

Sometimes this can have advantages over a single class declaration containing both properties.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

larmyia
Offline
Elder
London
Last seen: 12 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

&lt;id&gt; and &lt;class&gt;

I've read what everyone's written and it's been most helpful. I'm still having trouble with my code and no idea why...I think I need some time to go over it. Will get back to you (well hopefully not!)

thanks again!

larmyia

ian
ian's picture
Offline
Enthusiast
South Carolina
Last seen: 16 years 3 weeks ago
South Carolina
Timezone: GMT-5
Joined: 2004-11-08
Posts: 103
Points: 0

&lt;id&gt; and &lt;class&gt;

Is it that your div class is not applying?
Could it be as simple as removing the quotation marks when identifying the class?

<div class=main-text>

for example

-clever quote at the bottom of my post-