Style Sheets
  Home arrow Style Sheets arrow Page 2 - Adjusting Padding and Margins on Floating ...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Adjusting Padding and Margins on Floating Lists with CSS
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2008-12-17

    Table of Contents:
  • Adjusting Padding and Margins on Floating Lists with CSS
  • A review of our cross-browser approach
  • Assigning padding, margins and widths
  • Controlling the indentation of bullets

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Adjusting Padding and Margins on Floating Lists with CSS - A review of our cross-browser approach


    (Page 2 of 4 )

    Before I start teaching you how to improve the visual appearance of the floating HTML lists built in the previous tutorial of the series, I’d like to spend a few minutes listing the complete definition of the (X)HTML file required to create them, as it was defined in the article.

    That being explained, here’s the full signature of the file in question, so have a look at it, please:


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

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

    list-style-position: inside;

    list-style-type: square;

    }

    ul.rightlist{

    float: right;

    list-style-position: inside;

    list-style-type: square;

    }

    </style>

    </head>

    <body>

    <h1>Basic example on building floating lists</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>


    If you examine in detail the definition of the above (X)HTML file, then you’ll surely recall how easy it is to build a pair of floating HTML lists using only a couple of CSS classes and basic structural markup. As you can see, the pertinent lists are floated to the left and right sides of the web document via the helpful “float” CSS property, meaning that you shouldn’t have major problems understanding how this technique functions.

    So far, so good, right? At this point, you should be very familiar with the approach that I explained to you a few lines above, with reference to constructing floating HTML lists using a few CSS styles.

    Nevertheless, as I expressed in the introduction, the visual appearance of these lists is still pretty primitive, and there are certain details that definitely need to be fine-tuned, including the lists’ margins, padding values and widths.

    Therefore, in the following section, I’m going to assign specific values to the aforementioned CSS properties of the floating lists, with the purpose of making them look more appealing.

    To learn how this styling process will be performed on the previous floating lists, please click the link that appears below and read the next few lines. 

    More Style Sheets Articles
    More By Alejandro Gervasio


       · This third article of the series demonstrates how simple is to adjust certain...
       · How do you handle the expanding box problem with these floats?
       · In most cases, overflow: hidden; will fix up the bug, but it depends on the content...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek