Hi,

I have a peice of code where I am using nested DIV Tags,
Well, I have set the Parent DIV Color and the Nested Tags are not inheriting the Color,
Any Solution to the Problem ?

Here is the sample code ::

topNavigation
{
background-color: #ccccff;
}

.top1
{
height: 32px;
width: 100px;
float: left;
}

.top2
{
height: 32px;
width: 100px;
float: left;
}

Top1 and Top2 don’t inherit the color ... :-(

Thanks
K

KESHAVi PATEL,

If this is for NAVIGATION you should try using unordered list or definition list format:

Below is for Vertical alignment ... use display: inline; for horizontal alignment
substitute the NNN for the values you require

the HTML is ...

[div id=‘navigation’]
[ul id=‘navlist’]
[li][a href=’”#”]LINK 1[/a]
[li][a href=’”#”]LINK 1[/a]
[/ul]
[/div]

the CSS is ...

#navcontainer { width: NNNpx; }

#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family: arial, helvetica, sans-serif;
}

#navcontainer a{
display: block;
padding: Npx;
width: NNNpx;
background-color: #ccccff;  ————here is your background color—applies to all li tags
border-bottom: 1px solid #NNN;
}

#navcontainer a:link, #navlist a:visited{
color: #NNN;
text-decoration: none;
}

#navcontainer a:hover{
background-color: #NNN; ————here is your hover change in background color
color: #NNN;
}

KESHAVi PATEL,

Otherwise, I noticed in your css that you show topNavigation versus #topNavigation or.topNavigation.  Not sure if this represents your actual css sheet or not !?!  That’ll correct your issue, as well.

Thats a good way of doing it too vladimirallen, thanks for the reply.
But I want to implement it simply by using the DIV Tags. Here is the complete code,

‘HTML”

<DIV class = “topNavigation”>
<DIV class = “top1”>  Top 1 </DIV>
<DIV class = “top2”>  Top 2 </DIV>
</DIV>

“CSS”

.topNavigation
{
background-color: #ccccff;
}

.top1
{
height: 32px;
width: 100px;
float: left;
}

.top2
{
height: 32px;
width: 100px;
float: left;
}

Sorry I missed the ‘.’ it is there in front of topNavigation.
Can you explain why its not inheriting the color ?
Also I notice from your post, I applied the color property to the tag in the CSS and now its working fine !
Can you explain why this happens ?

Also I cannot have everything in a single DIV as I have to apply certain functionality as per the roles to hide / show which I can do if Ihave everything in different DIVs
Thanks again.

hi KESHAVi PATEL,

The DIV is an entity that naturally has no width or height unless you give it some dimension.
Sort of like a balloon.  If you give it air, it will expand, otherwise, it is empty nothingness awaiting your commands.

Also, be careful to check your work in both mozilla firefox and MSIE because they render differently.
If you are using the P tag in your instance below, assign it margin: 0; and padding: 0;  which will cause it to render
the same way in both FF and IE.

CSS ::

.topNavigation{
background-color: #ccccff;
width: 200px;
height: 32px;
}

The DIV bg color will now appear within the 200 pixel by 32 pixel boundary that you set. 

Try expanding the .top2 width to 200px and see what happens (differently in FF than in IE).

The reason that you see COLOR on the paragraph tag is that it itself has inherent dimensional properties ... that of the text-font contained within the P tags.

You can increase this COLORED area by CSS padding:

p{
margin: 0;
padding: 20px:
}

This carries the COLOR 20 pixels all around the P TAG.

Same with the nested DIVS (.top1, etc.)  ... you can assign each their own color since you provided a width and height to them.
However, if you remove the width and height from these, then, the color will appear only within the P TAG.  You can visualize this if you assign DIV .top1 background-color: #cccccc;.

I think I got it this time!?!
Al Toman
http://studio9.ws

Got it completely,
Thanks for the detailed explination !
Thanks a lot again for all the responses,

KESHAVi

hi KESHAVi PATEL .... again,

If you look at the navigation at http://a9webdesign.com/beta/  on the bottom left where it says “visit web design” ...

it uses the UNORDERED LIST like I showed above and it HIDES/SHOWS (with a little help from javascript).  It is PURE html/css text links, however.  Just put into motion by js.

The point is, is that you can assign commands to the <li> tags just like you can assign them to the <div> tags:

<ul id=‘navlist’>
<li id=‘active’><a href=”#” id=‘current’>Link 1</a></i>
<li id=‘different_command’><a href=”#” id=‘another_command’>Link 1</a></i>
</ul>

Best of Luck and HAVE FUN!
Al Toman

Well thanks again.
Thats a great Idea ! I am going to do it that way then so that I can span everything in a single DIV Tag.
Also can you let me know of a good resource for Learning CSS ?
Thanks

KESHAVi PATEL

That’s a tough question.  There’s a ton of sites out there on css.
I learned from many, many sites, considering the different hacks and such.

However, W3Cschools.com is a good start.
Maxdesign.com.au is excellent.  Click on “articles”.
The WDG or webdesigngroup is excellent found at htmlhelp.com.

Do a “css” search and visit the top ten sites.
There’s a bunch of others out there.

Kind regards,
Al Toman