Home arrow Style Sheets arrow Page 4 - CSS: Top Secret Classification
STYLE SHEETS

CSS: Top Secret Classification


This article will self-destruct in twenty seconds. Okay, not really; it will probably take you longer than that to read it, and you may even want to use it as a reference. In this mind-blowing episode, we discuss the many classification properties in CSS, all of which give you the ability to determine how and where your elements are displayed.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
April 14, 2008
TABLE OF CONTENTS:
  1. · CSS: Top Secret Classification
  2. · Floating Elements
  3. · Floating Text for a Fairy Tale Look
  4. · Creating a Menu

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
CSS: Top Secret Classification - Creating a Menu
(Page 4 of 4 )

In this example we create a menu bar (with nifty rollover action) using float:


<html>

<head>

<style type="text/css">

ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

a

{

float:left;

width:6em;

text-decoration:none;

color:white;

background-color:black;

padding:0.2em 0.6em;

border-right:1px solid white;

}

a:hover {background-color:blue}

li {display:inline}

</style>

</head>

<body>

<ul>

<li><a href="http://www.devshed.com">Home</a></li>

<li><a href="http://www.devshed.com">Diets</a></li>

<li><a href="http://www.devshed.com">Equipment</a></li>

<li><a href="http://www.devshed.com">About Us</a></li>

</ul>

<p>

Welcome to Jabba the Hut's Weight Lose Emporium! Click a link above to see what our site has to offer.

</p>

</body>

</html>

And lastly, you can use float to create a web page:

Using Float to Create a Web Page

Here is how you create a web page with float:


<html>

<head>

<style type="text/css">

div.container

{

width:100%;

margin:0px;

border:1px solid yellow;

line-height:150%;

}

div.header,div.footer

{

padding:0.5em;

color:white;

background-color:black;

clear:left;

}

h1.header

{

padding:0;

margin:0;

}

div.left

{

float:left;

width:160px;

margin:0;

padding:1em;

}

div.content

{

margin-left:190px;

border-left:1px solid yellow;

padding:1em;

}

</style>

</head>

<body>

<div class="container">

<div class="header"><h1 class="header">Jabba's Weightloss Emporium</h1></div>

<div class="left"><p>Lose your weight instantly with Jabba's patented weight-loss plan!</p></div>

<div class="content">

<h3>Free Weight Loss Tools</h3>

<p>At Jabba's Weightloss Emporium you will find all the best weight-loss techniques on the web: From The All-You-Can-Eat Bacon Diet to the Eating Big Green Slugs Life Change</p>

<p>No One does it like Jabba!</p></div>

<div class="footer">Jabba pwns you!</div>

</div>

</body>

</html>

Well that's it for this article. In the next tutorial we will continue or discussion of the classification property. So drop by often!

Till then...


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials