Welcome to WebmasterWorld Guest from 107.20.110.201

Forum Moderators: incrediBILL

Message Too Old, No Replies

need help understanding the DIV Element

     

aeramas

5:51 am on Dec 5, 2009 (gmt 0)

5+ Year Member



I did a quick search on the web and couldn't find an exact answer to this question. W3C.org changed and I couldn't find what I was looking for there, so here it goes.

When using multiple <div> statements, and you close one, what is the order it closes?

here is an example:
css reference

body{text:12px; color: black;}
div.1{color: red;}
div.2{color: blue;}
div.3{text:10px;}

<body>
<div id=1><div id=2><div id=3> ABC </div> XYZ </div> 123</div>

In this statement is ABC red or blue and size 10? Is XYZ black and size 12 or red size 10?

tedster

6:57 am on Dec 5, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



ABC is blue size 10
XYZ is blue size 12
123 is red size 12

XYZ is still blue because it's still within div#2. But it's not within div#3 which is closed - so it is size 12, not 10.

By the way, I assumed you meant div#1 and not div.1
Also note, it is not a good idea to begin a class or ID name with a numeral. Older versions of IE will (incorrectly) forgive it but not other browsers.

aeramas

8:41 am on Dec 5, 2009 (gmt 0)

5+ Year Member



Thank you, I appreciate the help. I did not know about the older browsers not liking class/id starting with numbers either. I usually name them something relevent anyway.

aeramas

9:14 am on Dec 5, 2009 (gmt 0)

5+ Year Member



one more question concerning this, a little bit more complicated. My site is setup something like this.

index.php

<?php require('header.php');/?>

My Content

<?php require('footer.php');/?>

header.php

<head>
<style>
body{text:12px; color: black;}
div#1{color: red;}
div#2{color: blue;}
div#3{text:10px;}
</style>
</head>

<div id="2"><img src="logo">
<br><br>
<a href="contact.php">contact us</a>
<a href="products.php">products</a>
<br><br>
I am writing this as as example
<br><br>

contact.php

<div id="1">
My name is Aeramas
(555)555-1234
Dallas Texas
</div>

note: <div id=2> in the header is still open. Does that make the content on index.php in the body black size 12? or Blue size 12?

tedster

6:15 pm on Dec 5, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You may be running into issues around CSS specificity [google.com] - which bothers me and most everyone I know from time to time. The link I gave points to our Site Search results on the topic - and it's worth some time getting up to speed. In short, there are complex rules in CSS about when one rule overrides another.

But the general answer is still, if the div is open then its rules are in effect - however some other specificity factor may also be in play in any particular situation.

aeramas

8:48 am on Dec 9, 2009 (gmt 0)

5+ Year Member



Thanks, I appreciate your help Tedster
 

Featured Threads

Hot Threads This Week

Hot Threads This Month