Vertical CSS menu with dashes

I have been really very busy this month. Hardly had time to post anything on my blog. So thought I better post a short quick tutorial of a dashed vertical css menu.

Preview (it will look like this at the end)

(Link 1 is hovered in the image)

HTML (the ever popular unordered list!):

<div id="menu">
<h1>My menu</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Now you will require some css.

CSS code:

#menu {
font-family: Arial;
width: 150px;
padding: 0px;
margin: 0px;
}

#menu h1 {
display: block;
background-color:#666666;
font-size: 16px;
padding: 5px 0px 5px 5px;
border: 1px solid #000000;
color: #ffffff;
margin: 0px;
width:147px;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#menu ul li {
margin: 0px;
padding: 0px;
}

#menu ul li a {
font-size: 14px;
display: block;
border-bottom: 1px dashed #bbbbbb;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Tabbed navigation using jQuery

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

Requirements
You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<ul>
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>
</ul>

<br />

<div id="box-1">
Box 1 content here
</div>

<div id="box-2">
Box 2 here...
</div>

<div id="box-3">
Do you really need Box #3?
</div>
</div>

CSS - some floats for ul and li

.ui-tabs-hide {
display: none;
}

ul {
margin: 0px;
padding: 0px;
}

ul li {
float: left;
padding-right: 10px;
list-style: none;
}

br {
clear: both;
}

a {
font-weight: bold;
text-decoration: none;
}

jQuery
Add this code at the end of your webpage (right before the closing body tag)

<script type="text/javascript">
$(window).bind('load', function() {
$('#container-1 > ul').tabs();
});
</script>

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.

CSS form design without tables

In this tutorial, I am going to show you how to simulate a table-like interface for designing a form using css. Since tables are not involved, we will require the label element for each and every field in our form.

Preview
This is what we will be doing.


here goes the css code:

body {
font-family: Arial, Verdana, sans-serif;
}

form p {
clear: both;
}

fieldset {
width: 350px;
border: 1px solid #ccc;
}

legend {
font-weight: bold;
font-size:1.2em;
}

label {
font-weight: bold;
width: 120px;
float: left;
}

input[type=text] {
width: 200px;
}

textarea {
width: 200px;
height: 100px;
}

input[type=submit], input[type=reset] {
font-size: 18px;
}

HTML (the form itself)
We are using the html p tag only for the css clear property. This is necessary for the css float property to work properly.

<form id="myform">
<fieldset>
<legend>Sample form</legend>

<p>
<label for="text1">Text input</label>
<input type="text" name="text1" value="text field">
</p>

<p>
<label for="text2">Text input 2</label>
<input type="text" name="text2" value="another text field">
</p>

<p>
<label for="text3">Textarea</label>
<textarea name="text3" rows="5" cols="20"></textarea>
</p>

<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>

</fieldset>
</form>

Rounded corner navigation bar without images using CSS and jQuery

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.

<script type="text/javascript">
$(document).ready(function() {
$("#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)

#nav {
width: auto;
}
#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#nav li {
background-color: #e9e9e9;
}
#nav li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #919191;
padding: 10px;
}
#nav li a:hover {
text-decoration: underline;
}
#nav .active {
text-decoration: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu

<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>

Three column CSS layout with blueprint framework

In one of my previous articles, I mentioned about Blueprint CSS framework. Now I am going to show you how to use it for designing your web layouts. I am using Blueprint 0.6 for this tutorial.

Before we begin, I need to tell you about its grid. Blueprint's default width for all layout is set to 950px consisting of 24 columns (width units). These columns can be controlled directly by your HTML code (divs with class attributes). You will not be required to touch your CSS files for that.

Layout (three column)
In this tutorial, we will follow a three-column layout with a header and a footer.

Directory structure for your files

Create a new HTML document with this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">

<title>frinity.blogspot.com</title>

<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">

</head>
<body>

<div class="container">

<h1>Header</h1>
<hr />

<div>
First column here
</div>

<div>
Second column (main content)
</div>

<div>
Third column
</div>

<hr />
<div>Footer</div>

</div>

</body>
</html>

Now its time for adding some 'class' attributes to your HTML for creating the columns. Notice that I said the whole layout consists of 24 columns (or 24 width units). For example, you may want the first column to be 6 units wide, the middle column 12 units, and the third and last column to be 6 units. Therefore, the three columns equal to (6 + 12 + 6) = 24 units.

Notice the code highlighted in bold

<div class="column span-6">
First column here
</div>

<div class="column span-12">
Second column (main content)
</div>

<div class="column span-6 last">
Third column
</div>

Dont forget to add 'last' in the class attribute of your last column. This is important.

Final HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">

<title>frinity.blogspot.com</title>

<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">

</head>
<body>

<div class="container">

<h1>Header</h1>
<hr />

<div class="column span-6">
First column here
</div>

<div class="column span-12">
Second column (main content)
</div>

<div class="column span-6 last">
Third column
</div>

<hr />
<div>Footer</div>

</div>

</body>
</html>

Save your HTML file, and open it in a browser. Your layout is ready!