Home arrow Style Sheets arrow Page 3 - Building Floating Lists With CSS
STYLE SHEETS

Building Floating Lists With CSS


In this four-part series of articles Iím going to show you how to build several floating HTML lists by means of a few basic CSS styles, and basic markup. In this manner you can implement this useful approach within your existing or future web sites. This is the first part.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
December 03, 2008
TABLE OF CONTENTS:
  1. · Building Floating Lists With CSS
  2. · Building floating (X)HTML lists
  3. · Creating the structural markup of the floating (X)HTML lists
  4. · Completing the construction of floating lists

print this article
SEARCH DEVARTICLES

Building Floating Lists With CSS - Creating the structural markup of the floating (X)HTML lists
(Page 3 of 4 )

In the previous section, I showed you all of the CSS styles required to build a couple of floating HTML lists, which can be easily included in any web document. However, I have to admit that this process is still incomplete, since it's necessary to create the structural markup of these lists.

Thus, taking into account this important requisite, below I defined a basic web document which contains the markup of two regular HTML lists, properly floated to the left and right of the document by using the CSS styles that you learned earlier.

Having explained that, here's how this primitive web document looks:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Basic example on building floating lists</title>

</head>

<body>

<h1>Basic hands-on example on building floating lists</h1>

<div>

<ul>

<li>This is the list item 1, floated to the left.</li>

<li>This is the list item 2, floated to the left.</li>

<li>This is the list item 3, floated to the left.</li>

<li>This is the list item 4, floated to the left.</li>

<li>This is the list item 5, floated to the left.</li>

</ul>

<ul>

<li>This is the list item 1, floated to the right.</li>

<li>This is the list item 2, floated to the right.</li>

<li>This is the list item 3, floated to the right.</li>

<li>This is the list item 4, floated to the right.</li>

<li>This is the list item 5, floated to the right.</li>

</ul>

</div>

</body>

</html>


So far, nothing unexpected, right? As you can see, the above web document includes two regular HTML lists that will be displayed on the browser following a regular order, that is the first one on top of the second one.

Of course, the way that the previous HTML lists are rendered by the browser will be better understood if you look at the following screen shot, which shows the output generated by Mozilla Firefox:



As you can see from the above image, the lists are displayed in a normal sequence. However, as I explained earlier, it's perfectly possible to use the CSS styles created in the previous section to turn these regular lists into two floating blocks, in this manner implementing floating lists.

Obviously, in this specific case, the first HTML list would be floated to the left of the web document by assigning to it the "leftlist" CSS class that you saw previously, while the second one would be positioned to the right by using the other "rightlist" class.

Nonetheless, all of the above explanations would be rather pointless if I don't show you a concrete example where you can see how these floating lists are finally constructed, by combining the structural markup of the prior web document and the CSS styles defined in the previous section.

Sounds pretty logical, right? Thus, I think this is the appropriate moment to move on and read the last section of this tutorial, where I'll be completing the creation of floating HTML lists with CSS.

What are you waiting for? Jump forward and read the next few lines! I'll be there, waiting for you.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- 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...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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