Hello
I have the following code which creates a rounded corner box using only CSS and no images and works in IE.
I need to modify the CSS to include hover and active states so that the box Background colour changes to white when the mouse hovers over it and yellow when it is clicked.
Can anyone help me by modifying the code?
I don’t really understand what the code is doing or how it is built up or what the b. are doing so if anyone out there understands how to modify the code and include detailed comments for all of it I would really appreciate it and actually learn more and better.
Thank you and best regards
****************************CODE START***************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box, .box b.tc, .box b.bc{ background-color:transparent; }
.box b.tc, .box b.bc,.box b.tc b.L1, .box b.tc b.L2, .box b.tc b.L3,.box b.bc b.L1, .box b.bc b.L2, .box b.bc b.L3{ font-size:0px;padding:0;display:block; }
.box b.tc b.L1,.box b.tc b.L2,.box b.bc b.L1,.box b.bc b.L2 { height:1px; line-height:1px; overflow:hidden; }
.box b.tc b.L1,.box b.bc b.L1 { margin: 0 4px; }
.box b.tc b.L2,.box b.bc b.L2 { margin: 0 2px; border-width:0 2px; border-style:solid; }
.box b.tc b.L3,.box b.bc b.L3 {margin: 0 1px; border-width:0 1px; border-style:solid; height:2px; overflow:hidden; }
.box .content { border-left-style:solid; border-left-width:1px; border-right-style: solid;border-right-width:1px; margin:0; overflow:hidden; }
/* Left-side border color */.box .content { border-left-color:#aaa; border-right-color:#aaa; }
/* Top border color */.box b.tc b.L1 { background-color:#aaa; }.box b.tc b.L2,.box b.tc b.L3 { border-color:#aaa;}
/* bottom border color */.box b.bc b.L1 { background-color:#aaa; }.box b.bc b.L2,.box b.bc b.L3 { border-color:#aaa;}
/* -- Default params for where content is ---- */.box .content { background:#eee; }.box b.L2,.box b.L3 {background-color:#eee;}
.box { margin:5px; width:300px; }.box .content { padding:5px; }
</style>
</head>
<body>
<div class="box"><b class="tc"><b class="L1"></b><b class="L2"></b><b class="L3"></b></b><div class="content">
This is the content
</div>
<b class="bc"><b class="L3"></b><b class="L2"></b><b class="L1"></b></b></div>
</body>
</html>
****************************CODE END****************************
I have the following code which creates a rounded corner box using only CSS and no images and works in IE.
I need to modify the CSS to include hover and active states so that the box Background colour changes to white when the mouse hovers over it and yellow when it is clicked.
Can anyone help me by modifying the code?
I don’t really understand what the code is doing or how it is built up or what the b. are doing so if anyone out there understands how to modify the code and include detailed comments for all of it I would really appreciate it and actually learn more and better.
Thank you and best regards
****************************CODE START***************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box, .box b.tc, .box b.bc{ background-color:transparent; }
.box b.tc, .box b.bc,.box b.tc b.L1, .box b.tc b.L2, .box b.tc b.L3,.box b.bc b.L1, .box b.bc b.L2, .box b.bc b.L3{ font-size:0px;padding:0;display:block; }
.box b.tc b.L1,.box b.tc b.L2,.box b.bc b.L1,.box b.bc b.L2 { height:1px; line-height:1px; overflow:hidden; }
.box b.tc b.L1,.box b.bc b.L1 { margin: 0 4px; }
.box b.tc b.L2,.box b.bc b.L2 { margin: 0 2px; border-width:0 2px; border-style:solid; }
.box b.tc b.L3,.box b.bc b.L3 {margin: 0 1px; border-width:0 1px; border-style:solid; height:2px; overflow:hidden; }
.box .content { border-left-style:solid; border-left-width:1px; border-right-style: solid;border-right-width:1px; margin:0; overflow:hidden; }
/* Left-side border color */.box .content { border-left-color:#aaa; border-right-color:#aaa; }
/* Top border color */.box b.tc b.L1 { background-color:#aaa; }.box b.tc b.L2,.box b.tc b.L3 { border-color:#aaa;}
/* bottom border color */.box b.bc b.L1 { background-color:#aaa; }.box b.bc b.L2,.box b.bc b.L3 { border-color:#aaa;}
/* -- Default params for where content is ---- */.box .content { background:#eee; }.box b.L2,.box b.L3 {background-color:#eee;}
.box { margin:5px; width:300px; }.box .content { padding:5px; }
</style>
</head>
<body>
<div class="box"><b class="tc"><b class="L1"></b><b class="L2"></b><b class="L3"></b></b><div class="content">
This is the content
</div>
<b class="bc"><b class="L3"></b><b class="L2"></b><b class="L1"></b></b></div>
</body>
</html>
****************************CODE END****************************
