PDA

Click to See Complete Forum and Search --> : help with inheritance...

stunews
03-19-2004, 05:04 PM
If anyone could have a look at this code for me, i was under the impression that any object within a div would inherit the properties set for the div. But the hyperlink won't take on the white text of the div's class (id="menu1" class="mainmenu").
I have noticed that if i remove the hyperlink it marks up the plain text but not once i have placed the text in the hyperlink? Could someone please clarify why this is not the case?
Cheers everyone..

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type=text/css>

#navbar {position:absolute ; left:0 ; top:0 ; height: 20 ; width:100% ; background:green ;}

#menu1opt { position:absolute ; left:0 ;}

#menu1 { position:absolute ; left:0 ;}

.mainmenu {position: absolute ; top:0 ;height:20 ; width:100;
font-family:tahoma ; color:white ;}

.options { position:absolute ; top:20 ; width:100 ; background:yellow}

a { text-decoration:none }
</style>
</HEAD>

<BODY>

<div id="navbar"></div>
<div id="menu1" class="mainmenu"><a href="#">menu1</a></div>
<div id="menu1opt" class="options">this<br>that<br>theother<br></div>
</BODY>
</HTML>
Webfreak
03-19-2004, 05:56 PM
You should try:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type=text/css>

#navbar {
height: 20px ;
width:100% ;
background:green ;
}

#menu1opt {
font-family:tahoma ;
background: yellow;
width: 100px;
}

#menu1 {
background: red;
font-family: verdana;
font-weight: bold;
}

#menu1 a {
text-decoration: none;
letter-spacing: 0;
color: #000;
}

#menu1 a:hover {
color: #0000CC;
}


</style>
</HEAD>

<BODY>

<div id="navbar">navbar</div>
<div id="menu1"><a href="#">menu1</a></div>
<div id="menu1opt">this<br>that<br>theother<br></div>
</BODY>
</HTML>
Webfreak
03-19-2004, 06:13 PM
Previus code isn't valid so I decided to correct also that mistake!! :D
stunews
03-20-2004, 07:12 AM
cheers mate, i wanted to implement it as a class so i just adjusted it as so...

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type=text/css>

#navbar {position:absolute ; left:0 ; top:0 ; height: 20 ; width:100% ; background:green ;}

#menu1opt { position:absolute ; left:0 ; visibility:hidden }

#menu1 { position:absolute ; left:0 ;}

#menu2opt { position:absolute ; left: 100 ; visibility:hidden }

#menu2 {position:absolute ; left: 100 }

.mainmenu {position: absolute ; top:0 ;height:20 ; width:100;
font-family:tahoma ; }

.mainmenu a {color:white}

.options { position:absolute ; top:20 ; width:100 ; background:yellow}

a { text-decoration:none }
</style>

<script language="javascript">

</script>

</HEAD>

<BODY>

<div id="navbar"></div>
<div id="menu1" class="mainmenu"><a href="#" >menu1</a></div>
<div id="menu1opt" class="options">this<br>that<br>theother<br></div>
<div id="menu2" class="mainmenu"><a href="#" >menu2</a></div>
<div id="menu2opt" class="options">this<br>that<br>theother<br></div>
</BODY>
</HTML>
Paul Jr
03-20-2004, 08:23 AM
Technically, a list of links like that should be marked-up as a list. You could style it the same way as you are now, too. You might find this ALA Article (http://www.alistapart.com/articles/taminglists/) a good read. ;)