Div inheritance

wildest_jjk · 23 Nov 2011 at 21:53

Hey guys,

I am creating a second page on my website. However I have created a second div because I want the content on the second page to have a different margin.

Is there any better way of doing this? Maybe inheriting the div style somehow and just changing the margin?

This is what I have:

http://jsfiddle.net/Yrx3F/

Thanks

8t10 · 23 Nov 2011 at 22:17

Do you have the HTML to hand? Or a demo? Can't picture it. :/

wildest_jjk · 23 Nov 2011 at 22:32

Well its kind of hard to show, but here is one of the pages and the part that I am talking about:

http://jsfiddle.net/Yrx3F/2/

Staffy · 23 Nov 2011 at 22:34

CSS id's "#" are generally for one use. From the looks of things you need to first change the id declarations you have to classes.
#reviewcontent
to
.reviewcontent

Then create another class called let's say ".subPageContent" or whatever in here change what you need for the new page margins etc...
Then in your HTML have

Code:

<div class="reviewcontent subPageContent">

The new class will inherit from the original then change what you have asked.

Hope that helps and hasn't confused you more?

wildest_jjk · 23 Nov 2011 at 22:43

No that makes sense thankyou very much. So could the subpagecontent div that you have used for instance be a CSS id instead?

Thanks again.

Staffy · 23 Nov 2011 at 23:15

Never tried it as it isn't really best practice, to be honest. One #id per selector is how I learnt it, makes sense that way.

Re reading what I wrote you can leave the #reviewcontent then write the alternate css in a class and call the class on the div for the pages you need it to be on.

Code:

<div id="reviewcontent" class=" subPageContent">

That way you only need to put the CSS for the changes you need to make in

wildest_jjk · 23 Nov 2011 at 23:20

Thanks for the response again. If I change it to what you have just said it does not work in the same way now.

Any ideas?

Thanks

EDIT: It works like this for some reason:

<div class= "reviewcontent" id="subPageContent">

Staffy · 24 Nov 2011 at 01:02

You should have something like this by now?

Code:

#reviewcontent{

border-style:solid;        /* Style of outside border */
border-width:1px;    /* Width of outside border */
border-color: #b9c7d3;


margin-top:10px;

text-align:justify;
font-family: arial;        /* Nav font style */
font-size: 100%;
line-height:140%;
padding-left:10px;
padding-right:10px;

}

#reviewcontent.subPageContent{

margin-top:40px;

}

Which should be called like this

Code:

<div id="reviewcontent" class="subPageContent">

wildest_jjk · 24 Nov 2011 at 07:59

Hi there, I have that but the only way I can overwrite the margin-top is to use an ID for it.

Like this:

<div class= "reviewcontent" id="subPageContent">

However I have no idea if this is ok?

Thanks

Sherbs · 24 Nov 2011 at 08:34

The last css will overwrite.

Code:

.class{ 
margin-top: 2px;
}

#ID {
margin-top: 7px;
}

If you have an both class and ID on one element they'll have a 7px margin-top.

Code:

#ID {
margin-top: 7px;
}


.class{ 
margin-top: 2px;
}

With the above it will be 2px.

But you could also do this

Code:

#ID {
margin-top: 7px !important;
}


.class{ 
margin-top: 2px;
}

And it should be 7px.

8t10 · 24 Nov 2011 at 09:29

IDs take priority over classes which take priority over styles on a plain tag (like p or div).

wildest_jjk · 24 Nov 2011 at 10:02

Thanks for the responses, so what I have is right?

Instead of copying the other div style like this and just changing the margin-top in the #largepagecontent style:

http://jsfiddle.net/Yrx3F/2/

I can use this in my code and it will take the attributes from the .reviewcontent but take the #largepagecontent margin-top?

http://jsfiddle.net/Yrx3F/4/

roger that · 24 Nov 2011 at 11:36

Yes, but unless you have a real need to use id's you should just use classes instead and rely on the cascade. You want to avoid giving CSS selectors uneccessary specificity (weight) as it may cause headaches if editing in the future.

wildest_jjk · 24 Nov 2011 at 12:04

I don't think there is any other way of doing it though is there? Because the two divs are used differently on two pages?

Thanks.

wildest_jjk · 24 Nov 2011 at 12:10

Although actually this works as well:

http://jsfiddle.net/Yrx3F/6/

So which one is more correct?

The above one which just uses classes. Or the one below which uses a class and then an id?

http://jsfiddle.net/Yrx3F/4/

Thanks for all the help.

Staffy · 24 Nov 2011 at 12:12

The code above works in ie8, latest FF and chrome. Looking at the code at the links you have posted you haven't got the class named the same as I have above.

So when you are calling it in the html it isn't selecting the right element.

Here is a better explanation http://css-tricks.com/5690-multiple-class-id-selectors/

Edit: you posted as I was typing. The double class call at the first link will work or how I posted above. That's the beauty (or sometimes not) there is no one fixed way of getting the same result.

wildest_jjk · 24 Nov 2011 at 12:48

Thanks again, is there a standard way that is normally followed though?

Staffy · 24 Nov 2011 at 13:36

Not sure how you mean standard. Either will work and are down to preference of the coder/'s working on the project.

Basically a #id on a element is singular naming of the element for later selection. Meaning like a house address. A class is the type of house. You can have only one house address but can have many of one style.

Personally I prefer the double class call like I showed in my original reply as I can then re-use the class later, others will say it shouldn't be done that way. Each to their own.

roger that · 24 Nov 2011 at 13:57

It's becoming more fasionable to avoid using id's. They were useful when scripting as javascript could target id's but not classes, hence you could use the id to script a contact form and hang the css styles for it using the id.

Now there a several libs like jQuery that let you use css style selectors to target objects on a page, id's are really not neccessary. Also using class "stacking" means you can adopt a more object orientated way of creating css, Facebook is the largest example of this.

wildest_jjk · 24 Nov 2011 at 14:55

Thanks guys, one other thing.

This bit of code for example:

<div class="latest">Latest review:</div>

Is it better to use a div to style it? Like this:

.latest{
font-family: arial;
font-size: 75%;
margin-top:40px;
}

Or should I use say this:

<p class="latest">Latest review:</p>

And then style like this:

p.latest{
font-family: arial;
font-size: 75%;
margin-top:40px;
}

I am not sure if I am using to many divs too style particular things.

Thanks