JBlogs: CSS Styling Borders

Got this from the book Eric Meyer on CSS. Very light and hands-on work book. I found this CSS section that creates left hand navigation bar border is very interesting. Sometime seemed a haunting job to me.
The first version with HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chapter 5 Project</title>
<style type="text/css">
body {background-color: rgb(100%,98%,96%); color: black;}
td {border-width: 0; padding: 0;}
td#banner {border-bottom: 2px solid rgb(60%,50%,40%);}
td#banner h1 {color: rgb(40%,30%,20%);
margin: 0; padding: 0.25em 0 0.125em 0;
font: bold 150% sans-serif; letter-spacing: 0.5em;}
td#main {background-color: transparent; color: black;
padding: 1em; font: 95% Times, serif;}
td#main h2 {font: bold 125% sans-serif;
margin: 0.5em 1em; padding: 0;
border-bottom: 1px solid rgb(80%,75%,70%);}
td#main p {margin: 1em 2.5em;}

/* menu style: the hovering link block has right border overlay the menu border line*/
td#sidelinks {vertical-align: top;}
td#sidelinks a, td#sidelinks h4 {margin:0 3px 0 0; font: bold 100% Arial, Verdana, sans-serif;border-right: 1px solid rgb(60%, 50%, 40%); background: transparent;}
td#sidelinks a {display:block; text-decoration: none; padding: 1px 10px 1px 5px; color: rgb(30%, 30%, 60%);}
td#sidelinks a:visited {color: rgb(55%, 55%, 60%);}
td#sidelinks a:hover, td#sidelinks a:focus{ background-color: rgb(100%, 70%, 70%); color: rgb(50%, 0%, 0%); border-right: 7px solid rgb(80% 30% 20%); padding-right: 7px; margin-right: 0px;}
td#sidelinks h4 {background-color: transparent; color: rgb(30%, 20%. 10%; margin: 0 3px 0 0; padding 1em 0 0; font: bold 100% Arial, Verdana, sans-serif; border-bottom: 2px solid rgb(50%, 40%, 30%); border-right: 1px solid rgb(60%, 50%, 40%); }
td#sidelinks a#comment{ background-color: rgb(100%, 92% 90%); color: black; border: 1px solid rgb(60%, 50%, 40%); border-right-width: 4px; padding-right:7px; margin-right: 3px;}

td#footer {background-color: transparent; color: rgb(70%,60%,50%);
border-top: 1px solid rgb(60%,50%,40%);
text-align: right; font-size: 85%;
padding-top: 0.33em; font-style: italic;}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td colspan="2" id="banner"><h1>Styling With EM</h1>
</td>
</tr>
<tr>
<td id="sidelinks">
<h4>Standards</h4>
<a href="html.html" id="html">HTML</a> <a href="xhtml.html" id="xhtml">XHTML</a>

<a href="css.html" id="css">CSS</a> <a href="dom.html" id="dom">DOM</a>
<h4>Extras</h4>
<a href="tools.html" id="tools">Tools</a> <a href="review.html" id="reviews">Reviews</a>

<a href="comment.html" id="comment">Commentary</a> <a href="weblog.html" id="weblog">
Weblog</a>
<h4>Basic</h4>
<a href="contact.html" id="contact">Contact</a> <a href="index.html" id="home">Home</a>

</td>
<td id="main">
<h2>On Being a Web Mechanic</h2>
<p>Once upon a time-- okay,…</p>
<p>Once upon a time-- okay,…</p>
<p>Once upon a time-- okay,…</p>
</td>
</tr>
<tr>
<td colspan="2" id="footer">Copyright 2001 Eric A. Meyer. All Rights Reserved.</td>
</tr>
</table>
</body>
</html>

Some variations - double line border:

icon image border

/* menu style: the hovering link block has right border overlay the menu border line*/
td#sidelinks {vertical-align: top;}
td#sidelinks a, td#sidelinks h4 {margin:0 3px 0 0; font: bold 100% Arial, Verdana, sans-serif;
/* border-right: 1px solid rgb(60%, 50%, 40%); */border-right: rgb(60%, 50%, 40%) 4px double; background: transparent;}
td#sidelinks a {display:block; text-decoration: none; padding: 1px 10px 1px 5px; color: rgb(30%, 30%, 60%);}
td#sidelinks a:visited {color: rgb(55%, 55%, 60%);}
td#sidelinks a:hover, td#sidelinks a:focus{ background-color: rgb(100%, 70%, 70%);color: rgb(50%, 0%, 0%);border-right: 4px solid rgb(80% 30% 20%);padding-right: 7px;margin-right: 3px;}
td#sidelinks h4 {background-color: transparent; color: rgb(30%, 20%, 10%;
margin: 0 3px 0 0; padding 1em 0 0;
font: bold 100% Arial, Verdana, sans-serif;
border-bottom: 2px solid rgb(50%, 40%, 30%);
/* border-right: 1px solid rgb(60%, 50%, 40%); */
border-right: rgb(60%, 50%, 40%) 4px double;
}
td#sidelinks a#comment{ background-color: rgb(100%, 92% 90%); color: black;border: 1px solid rgb(60%, 50%, 40%); border-right-width: 4px; padding-right:7px; margin-right: 3px;}

/* menu style: the hovering link block has right border overlay the menu border line*/
td#sidelinks {vertical-align: top;}
td#sidelinks a, td#sidelinks h4 {margin:0 3px 0 0;font: bold 100% Arial, Verdana, sans-serif;border-right: 1px solid rgb(60%, 50%, 40%);background: transparent;}
td#sidelinks a {display:block;text-decoration: none; padding: 1px 10px 1px 5px; color: rgb(30%, 30%, 60%);}
td#sidelinks a:visited {color: rgb(55%, 55%, 60%);}
td#sidelinks a:hover, td#sidelinks a:focus{ background-color: rgb(100%, 70%, 70%);color: rgb(50%, 0%, 0%);border-right: 7px solid rgb(80% 30% 20%);background-image: url(arrow.gif); background-repeat: no-repeat;background-position: 94% 50%; padding-right: 7px;margin-right: 0px;}
td#sidelinks h4 {background-color: transparent; color: rgb(30%, 20%. 10%; margin: 0 3px 0 0; padding 1em 0 0; font: bold 100% Arial, Verdana, sans-serif;border-bottom: 2px solid rgb(50%, 40%, 30%); border-right: 1px solid rgb(60%, 50%, 40%);}
td#sidelinks a#comment{ background-color: rgb(100%, 92% 90%); color: black;background-image: url(arrow2.gif);ackground-repeat: no-repeat;background-position: 96% 50%;border: 1px solid rgb(60%, 50%, 40%); border-right-width: 4px; padding-right:7px; margin-right: 3px;}

JBlogs

26 July 2005

CSS Styling Borders

1 comment:

Labels

Blog Archive

Links