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=http://www.webdeveloper.com/forum/archive/index.php/"#">menu1</a></div>
<div id="menu1opt" class="options">this<br>that<br>theother<br></div>
</BODY>
</HTML>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=http://www.webdeveloper.com/forum/archive/index.php/"#">menu1</a></div>
<div id="menu1opt">this<br>that<br>theother<br></div>
</BODY>
</HTML>Previus code isn't valid so I decided to correct also that mistake!!
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=http://www.webdeveloper.com/forum/archive/index.php/"#" >menu1</a></div>
<div id="menu1opt" class="options">this<br>that<br>theother<br></div>
<div id="menu2" class="mainmenu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >menu2</a></div>
<div id="menu2opt" class="options">this<br>that<br>theother<br></div>
</BODY>
</HTML>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 (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) a good read.
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=http://www.webdeveloper.com/forum/archive/index.php/"#">menu1</a></div>
<div id="menu1opt" class="options">this<br>that<br>theother<br></div>
</BODY>
</HTML>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=http://www.webdeveloper.com/forum/archive/index.php/"#">menu1</a></div>
<div id="menu1opt">this<br>that<br>theother<br></div>
</BODY>
</HTML>Previus code isn't valid so I decided to correct also that mistake!!
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=http://www.webdeveloper.com/forum/archive/index.php/"#" >menu1</a></div>
<div id="menu1opt" class="options">this<br>that<br>theother<br></div>
<div id="menu2" class="mainmenu"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >menu2</a></div>
<div id="menu2opt" class="options">this<br>that<br>theother<br></div>
</BODY>
</HTML>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 (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) a good read.