Geek Answers Handbook

Unordered list style for displaying list items in a rounded corner field

I would like to style <ul>to display all the elements in a rounded rectangle (see below):

enter image description here

Is it possible to use CSS only <ul>(without additional <div>tables), how am I going to use it in the CMS system to style everything <ul>created by the user?

+5
source share
5 answers

I was able to recreate your image using the following (X) HTML and CSS:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>UL Corners</title>
        <style type="text/css">
            ul {
                background-color: #EBEBEB;
                list-style-image: url(arrow.png);
                font-family: Verdana, Helvetica, sans-serif;
                font-size: 11px;
                padding: 15px;
                width: 410px;
                border-radius: 20px;
                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
            }
            li {
                margin: 10px;
                margin-left: 25px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                Functional DR (Disaster Recovery)
            </li>
            <li>
                Virtual off site contact centre management
            </li>
            <li>
                Technology, Connectivity, Process and Resource Management in disaster recovery site
            </li>
            <li>
                Mission Critical Response Service Level Agreements and Logistical management
            </li>
        </ul>
    </body>
  </html>

The end result is as follows:

screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png

Firefox, Chrome, Safari , CSS3. , , IE.

+1

CSS3: CSS3

Firefox Safari.

+2

jQuery Corner ;-) JS, CSS, - .

+1

li, - .

ul {background:transparent url(rc_top.jpg) 0 0 no-repeat;width:459px;padding:20px 0 0 0;}
ul li {background-color:#ebebeb;padding-left: 40px;}
ul li.last {background:transparent url(rc_bot.jpg) 0 bottom no-repeat;padding-bottom:20px;}

<ul>
    <li>one</li>
    <li>two</li>
    <li class="last">three</li>
</ul>

IE6 7 , ul li:last-child ul li.last.

+1

Using only the UL tag, I don't know a clean CSS 2 solution for a variable-height block (for a fixed height: you have a sliding door technique).

Maybe you should take a look at the JS + CSS solution: great angles .

0
source

More articles:


All Articles