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

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/

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.

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

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

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/

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.

wildest_jjk · 24 Nov 2011 at 12:48

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

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

wildest_jjk · 24 Nov 2011 at 15:15

The only problem is when it comes to screen readers etc. So this is part of my page:

http://puu.sh/9fmr

Xbox 360 is h1, but latest would not be h2 because of its size and would probably be h3. Elder scrolls title would be h2.

Does this matter that they do not go in order?

Thanks again folks.

wildest_jjk · 24 Nov 2011 at 15:35

Right ok thanks, so DIVs are more for layout then I assume? If there are tags already used such as p and img then these can be given a class or id without the need for a div?