Posts tagged Web Design

Today we’re going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.

Inline Menu

This is an example of a website menu:

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

#menu {
     background-color:#4c4c4c;
     height:30px;
     font-size:30px;
     font-weight:700;
     padding:5px 0px;
}
#menu ul {list-style:none;}
#menu li {
     display:inline;
     padding:0px 10px;
}

<div id="menu">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
     </ul>
</div>

The CSS is setting the styles for the navigation menu… We have our ID selector #menu that is creating a background of #4c4c4c (grey), a height of 30px, a font size of 30px, a font weight of 700 (in other words, bold), and a padding of 5px that applies to the top and bottom ONLY.

#menu ul is basically saying that all <ul> elements inside of the ID #menu will have a list-style of none.

#menu li is saying that all <li> elements within the ID #menu will be displayed as inline elements (no breaks before or after the element, refer to the Display Property for more information) and will apply a 10px padding to the left and right sides ONLY.

Vertical Menu

A vertical menu is a menu that is, well, vertical.

Side Menus are easier to make than inline menus. Consider the following code:

#side-nav {
     background-color:#4c4c4c;
     display:block;
     width:150px;
}
#side-nav ul {
     list-style-image:url("images/bullet.png");
     margin:10px;
}
#side-nav li {
     padding:5px 0px;
     border-bottom:1px solid #3b3b3b;
}
#side-nav.no-border {border:none;}

<div id="side-nav">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li class="no-border"><a href="url">Link</a></li>
     </ul>
</div>

So we have our ID selector side-nav that is creating the background color of #4c4c4c (grey), displaying the selector as a block element and a width of 150px. Note: since only the width is defined, we can have an unlimited height.

Next, we have our selector that is saying that all <ul> elements within the side-nav selector will have a list style image of “bullet.png” and will have a 10px margin around all sides.

Finally, we have our selector that is saying all <li> elements within the side-nav selector will have a top and bottom padding of 5px ONLY and a bottom border that is 1px wide, solid, and the color #3b3b3b. There is something interesting, however; there is an additional selector defined that states a border is none which we used on the last <li> element of our vertical menu. This will make the menu look better, or at least more symmetrical.

I recommend you downloading Menu.zip (4.46KB) to see these menus in action!

Pseudo-elements are used to add special effects to some html elements.

Pseudo-elements are very much like pseudo-classes. The syntax for pseudo-elements is like pseudo-classes:

selector:pseudo-element {property:value;}

We can also use class selectors with our pseudo-elements:

selector.class:pseudo-element {property:value;}

Pseudo-elements

Since pseudo-elements exist to give some html elements some flair, we have a few special pseudo-elements that we need to be familiar with.

:first-line

As the name implies, this pseudo-element adds special styles to the first line of text. We can only use this pseudo-element with block-level elements (see Display Property for more details).

p:first-line {
     color:#ff9300;
     font-style:italic;
}

The above code would make the first line of text color turn to atomicpages orange and then change the first line of text to be italic. There are, however, certain properties that are not allowed when using the :first-line property. We can use the following:

1. all font properties
2. color
3. all background properties
4. text-decoration
5. clear
6. text-transform
7. letter-spacing
8. word-spacing
9. vertical-align
10. line-height

These are the only properties that are valid to use with the :first-line pseudo-element!

:first-letter

This pseudo-element applies unique styles to the first letter of text. Consider the following code:

p.a:first-letter {
     background:#fff url("images/fancy_a.gif") no-repeat;
     border:1px solid #ff9300;
     margin-left:25px;
}

This will load the first image of all p elements with the class “a” so:

<p class="a">very fancy image at the beginning of this makes this
sentence seem much more grandiloquent that it really is!</p>

This fancy_a.gif will also have a border of 1px which is solid and atomicpages orange and will have a left margin of 25px.

Like the :first-line pseudo-element, there are restrictions on which properties can be used with this pseudo-element.

1. all font properties
2. color
3. all background properties
4. text-decoration
5. clear
6. text-transform
7. letter-spacing
8. word-spacing
9. vertical-align
10. line-height
11. margin properties
12. padding properties
13. float

:before

This pseudo-element is used to insert content before and element is rendered by the browser. Consider the following code:

span:before {background:#fff url("images/fancy_a.gif") no-repeat;}

This is saying that before every span element there will be that fancy “A” that we define earlier in this tutorial.

:after

This pseudo-element is used to insert content after and element is rendered by the browser. Consider the following code:

h4:after {background:#fff url("images/fancy_b.gif") no-repeat;}

This is saying that after every h4 element there will be that fancy “B”.

Now what does that accomplish? Nothing very significant in this case but you can download pseudo-elements.zip (7.76 KB) to see these pseudo-elements in action!

Pseudo-classes are little snippets of code that will add additional effects to some selectors.

Pseudo-classes

The syntax for Pseudo-classes is very much like the syntax for css:

selector {property:value;} /*CSS Syntax*/
selector:pseudo-class { /*Pseudo-class Syntax*/
     property:value;
     property:value;
}

:link, :visited, :active, :hover

A very widely used example of Pseudo-classes is adding styles to links. Consider the following:

a:link, a:visited {
     text-decoration:underline;
     color:#ff9300;
}
a:hover {
     text-decoration:none;
     color:#ff9300;
}

These are called “global link styles”, these are styles that will apply to any and all links on a page where this code is. We have our pseudo-classes a:link, a:visited, a:hover and each is doing something different.

1. a:link

a:link sets the styles for an unvisited link:

a:link {
     color:red;
     font-weight:bold;
}

2. a:visited

a:visited sets the styles for a visited link:

a:visited {
     color:blue;
     font-weight:bold;
}

3. a:hover

a:hover sets the styles for links that you mouse over:

a:hover {
     color:aqua;
     font-weight:bold;
     text-decoration:unerline;
}

4. a:active

This sets the styles for a link that is currently active:

a:active {
     color:coral;
     font-weight:bold;
     text-decoration:unerline;
}

Order

Order is key when using these particular pseudo-classes. When you write these styles you must follow the correct order to make it all work.

a:link { /*This must be first*/
     color:red;
     font-weight:bold;
}
a:visited {  /*This must be second*/
     color:coral;
     font-weight:bold;
}
a:hover {  /*This must be third*/
     text-decoration:unerline;
     color:blue;
     font-weight:bold;
}
a:active { /*This must be last*/
     color:green;
     font-weight:bold;
}

We can also group the pseudo-classes together like this:

a:link, a:visited {
     text-decoraton:none;
     color:#ff9300;
}
a:hover, a:active {
     text-decoration:unerline;
     color:coral;
}

Like other CSS selectors, we can add a class selector to the Pseudo-classes, this would enable us to apply these styles any where on our web page if we desired it to be so.

selector.class:pseudo-class {
     property:value;
     property:value;
}
a.fancy:link, a.fancy:visited {
     text-decoration:underline;
     color:#ff9300;
}

This class fancy will make a link and you visit that link that we create, it will be underlined and be that atomicpages orange color.

:first-child

The first-child pseudo-class is as it sounds. This will apply any styles that you define to the first-child element of a parent element. Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:normal 11px Verdana, "Times New Roman", sans serif;
     color:#fff;
}
p:first-child {
     color:blue;
     text-decoration:underline;
     font-weight:700;
}

We can use the first-child pseudo-class in some very helpful ways too! If, for instance, you wanted to apply a style that would make the first paragraph unique, we could use the first-child pseudo-class to achieve this goal. Consider the following:

.fancy p:first-child {
     color:red;
     font-style:italic;
}

This would set the first paragraph of the class “fancy” to be red and italic and all subsequent paragraphs to be whatever we set the styles to.

If you want to see pseudo classes in action feel free to check out pseudo-casses.zip (1.88KB) and see these examples in action!

In this tutorial we’re going to talk about the float property. For this tutorial you will need to be familiar with the Basics of CSS and you should be familiar with the Advanced CSS tutorials until this point.

Float Property

The float property allows for an element to be pushed to the left or the right so other elements can wrap around it. Floated elements can only be moves horizontally (left or right). All floated elements will move as far right or as far left as it possibly can; this is dependent upon the nature of the container that the element is in.

Values

1. left – floats element to the left
2. right – floats element to the right
3. none – specifies no floating

Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:verdana, "Times New Roman", san-serif;
     font-size:11px;
     color:#fff;
}
#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}

We have made the body element have a width of 1000px (the rest of the styles are irrelevant) and then we defined an ID selector that has a width of 300px and a min-height of 125px (it has to be at least 125px tall) and this element will be pushed to the edge of the right side of the container.

Since floated elements allow other elements to wrap around the floated element. All elements before the float property will not be affected, however, all element thereafter the float property will be affected. Consider the following code:

body { /*...*/ }
#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}
.float-right {float:right;}

<html>
<body>
<div id="container">
     <p>This element will be on the right edge of the page that is
1000px across.</p>
</div>
<p>This is some text</p>
<img src="image/img.gif" height="100" width="100" alt="img"
class="float-right" />
<p>This is some text</p>
</body>
</html>

This example would allow for the text to wrap around “img.gif” no matter what size the image is (in the case of the example it is 100px by 100px).

Floating Elements

As we mentioned before, floating an element will push the element to the right or left side of the container if possible. Consider the following code:

.fancy {
     width:500px;
     float:left;
}

<h2>Title here</h2>
<div class="fancy">
<img src="img.gif" height="64" width="64" alt="img" />
<p>Description here</p>
</div>

This will put the image inside of an area of 500 px wide and infinitely tall (depending the amount of content in that class selector).

Clear Property

How do we “turn off” floated elements? The clear property specifies which sides of a floated element you want to keep clear of other floating elements.

Values

1. left – clears the left side of the element
2. right – clears the right side of the element
3. both – clears both the left and right side of the element
4. none – does not clear either side of the element

Consider the following code:

<html>
<head>
<style type="text/css">
.clearfix {clear:both;}
.fancy {
     width:500px;
     float:left;
     margin5px;
}
</style>
</head>
<body>
<div class="fancy">
<h2>Fancy Pictures</h2>
<img src="img.gif" height="64" width="64" alt="img" />
<img src="img2.gif" height="64" width="64" alt="img" />
<img src="img3.gif" height="64" width="64" alt="img" />
<img src="img4.gif" height="64" width="64" alt="img" />
<img src="img5.gif" height="64" width="64" alt="img" />
<p class="clearfix">Some explanatory text here</p>
<img src="img6.gif" height="64" width="64" alt="img" />
<img src="img7.gif" height="64" width="64" alt="img" />
</div>
</body>
</html>

In the code above, you would have all of the styles we defined in the fancy class and then a break of text where no floated element is allowed (neither left or right). This will clear a space for the explanatory text where no floated element will exist. This can be useful for adding more titles or text to the “fancy” class we created.

It is recommended that you download the float.zip (41.4KB) to see this property in action!