CSS Learn: March 2009

Wednesday, March 18, 2009

Vertical and horisontal CSS menu

The CSS menu is just elements in order, which elements are clickable. Here we will create a horizontal menu. The vertical menu is based on the same principles. The difference between horizontal menu and vertical menu is that - in the horizontal menu you order the elements horizontally, in the vertical menu you order you elements vertically.

The techniques in this lesson is based on the attribute "float: left", which aligns the elements on the left.

Here is the CSS code

body {font: 14px Verdana, Arial, sans-serif;}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}

li { float: left;} /* lists aligned to the left */
.menu a {
margin: 0 2px;
width: 100px; /* definition of menu button size */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;}

Labels: CSS menu

Tuesday, March 17, 2009

Fixed background image with CSS

May be you was impressed when you've see a web page with non-scrollable background image (fixed position).

Now you can create your own fixed background. Your HTML code must looks like this:

<html>
<head>
<style type="text/css">
body {
background-image: url('background.gif'); /*the choice of background is yours*/
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>

<body>
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content
Type your text here or fill with content

</body>

</html>

If you load this page and have a lot of content, when scroll down the image will not move.

Keep CSS-ing.

Create a CSS template for Joomla

In this tutorial you will learn how to make a CSS template for Joomla

Saturday, March 14, 2009

CSS Learn

CSS lessons. Tips and tricks. Useful things. CSS resources.