Home arrow Style Sheets arrow Page 4 - 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 - Completing the construction of floating lists
(Page 4 of 4 )

Having defined in the two previous sections the CSS styles and the markup required to build a couple of floating HTML lists, the only thing that remains to do is glue these pieces together, in this manner finalizing this introduction to creating these fancy lists with CSS.

That being said, please pay close attention to the definition of the following (X)HTML file, which constructs the aforementioned lists in a few basic steps:

<!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 with CSS</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 18pt Arial, Helvetica, sans-serif;

color: #000;

}

#listcontainer{

width: 70%;

}

ul.leftlist{

float: left;

}

ul.rightlist{

float: right;

}

</style>

</head>

<body>

<h1>Basic example on building floating lists with CSS</h1>

<div id="listcontainer">

<ul class="leftlist">

<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 class="rightlist">

<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>


Didn't I tell you before that building floating HTML lists with CSS was indeed a no-brainer process? And the veracity of my claim is demonstrated by the above sample file. As you can see, the two lists have been adequately floated to the left and right of the web document by using the couple of CSS classes defined previously.

You should notice that I decided to include the respective lists within a general container, but logically the use of this additional containing element is completely optional.

Finally, in order to demonstrate more clearly how these floating HTML lists are displayed by most non-IE browsers, below I included another small screen capture, which shows their visual appearance:



At this point, you have at disposal all of the source code required to build a few floating lists with CSS. But what a minute! If you test the previous (X)HTML file with Internet Explorer, you'll realize that it does float the lists correctly on the web page, but the bullets are missing.

Pretty weird, huh? Don't feel disappointed, because this issue will be addressed in the next tutorial.

Final thoughts

In this first episode of the series, I showed you how to build a pair of floating HTML lists by using some CSS styles and basic markup. However, as I explained before, the bullets of the floated lists won't be displayed by IE, which is certainly a bug that must be quickly corrected.

However, to learn how this IE-related issue will be fixed up, you'll have to read the upcoming article, so you don't have any excuses to miss it!


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 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