26 July 2005

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:

/* 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;}

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;}

Posted by Jingye at 10:08 AM 1 comments

Labels:

25 July 2005

Up Sticks

I am leaving this famous online Bank in August to join a software house specialised in Learning and Library software. Has been with this Bank for around three years, I think it is good to take in some fresh air and move on.

My new employer does Test Driven development, on .NET and Java platforms. There are loads of challenges in the eXtreme Programming software engineering, new technologies -.Net, XML parser, Web Services, Image search etc to play with. I think it is good to broaden my profile.

Happen to read Steve Jobs’ recent speech at Stanford, which couldn’t describe what I think better.

‘I'm pretty sure none of this would have happened if I hadn't been fired from Apple. It was awful tasting medicine, but I guess the patient needed it. Sometimes life hits you in the head with a brick. Don't lose faith. I'm convinced that the only thing that kept me going was that I loved what I did. You've got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do.’

I will be then driving 36 miles south down notorious M6 J10-J4 section instead of going east 35 miles down the picturesque A518 and A50. I probably will give up driving altogether with pushbike and commuter train, which saves around 2 hours a day.

Posted by Jingye at 2:18 PM 0 comments

Labels:

18 July 2005

Delicious Library and more

Traditional media are tangible: books, CD, VHS tape. We consume them, collect them, shelf them in our personal libraries. Over years the collection grows and we are satisfied because we ‘own’ something that you can touch and feel it.

Digital media while offering convenient method of publication and spreading with minimum logistic cost. They are intangible. Consumer doesn’t feel they ‘own’ it. Delicious Library offers a revolution way to materialize the electron to give user a feel of ownership.

This brings me to think how we could use internet as ‘WEB’ – meaning all information are linked and not isolated. In aspect of digital music, book collections, there is a clear advantage over the tradition tangible collections. You can easily share or show off your collection worldwide.

We are not talking about Napster, but the book list or music play list. Or even better your book review critics.

I am talking about a WWW portable collection of your participation. A hybrid of webblog, Amazon, iTune, Delicious library and Opac or even more. Say, you write reviews on the books you read recently. You have a collection of the critics online that says everything about you – (‘I think therefore I am’?) Your collection is also fed to community forums (BBS, Amazon etc) so it is cross referenced.

Would this model gives a feeling of ownership of intangible?

Delicious Library Review

Posted by Jingye at 11:10 PM 0 comments

Labels:

15 July 2005

Get Things Done

This bullet point article giev some very useful advice on time & project management.

In my experience, in eXtreme programming one of the pain and time-consuming task is project planning: ask business partners to define the requirements and prioritised them with full house of the team sitting around – project managers, developers, testers and etc. Some people loss their interest in this lengthy meetings because on

Posted by Jingye at 9:02 AM 0 comments

Labels:

Subscribe to: Posts (Atom)