CODEWITHSUNDEEP
css
borck
borck

Reputation: 926

CSS: How to produce rounded boxed list

I would like to reproduce the following in the simplest way (probably using a <ul>): enter image description here

So, I would like to be able to add as many rows as I want to this list, each row being composed of a picture, a description and a counter. The list should be in a rounded box, and the rows should be separated with lines.

Could someone with CSS skills help me with this?

Thanks a lot!

Upvotes: 0

Views: 6716

Answers (4)

naim shaikh
naim shaikh

Reputation: 1111

HTML:

<ul>
   <li>Event</li>
   <li>Journal</li>
   <li>Task</li>
</ul>

CSS:

ul { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background:#3d3d3; border:1px solid gray; width:400px; }
ul li { padding: 5px 5px 5px 20px; border-top:1px solid gray; }

Here is the JsFiddle for that.

Upvotes: -1

ACarter
ACarter

Reputation: 5697

I'm working on a JSfiddle here for you.

HTML:

<ul>
    <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li>
   <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li>
   <li><img src="http://ghickman.co.uk/images/sidebar/stackoverflow.png"/> <span>text</span> <span class="num">1</span></li>
</ul>

CSS:

ul {
    border-radius:10px;
    border:1px solid #DDD;
    margin:10px;
    width:200px;
}

li:last-child {
    padding:7px;
}

li:not(:last-child) {
    padding:7px;
    border-bottom:1px solid #DDD;
}

span.num {
    float:right;
}
img {
    width:20px;
}

span {
    float:none;
}

Upvotes: 1

Bojangles
Bojangles

Reputation: 101533

Well, here's one way of doing it.

HTML:

<ul>
    <li>
        <img src="http://www.placekitten.com/16/16">
        Item 1
        <span>1</span>
    </li>

    <!-- More list items -->
</ul>

CSS:

/* Container with border and rounded corners */
ul {
    border: 1px solid #ccc;
    width: 200px;

    /* Border radius for Chrome, Webkit and other good browsers */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -border-radius: 10px;
    border-radius: 10px;
}

/* Only add border to bottom of <li> */
li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

/* Get rid of the last <li>'s bottom border to stop overlap with <ul>'s border */
/* :last-child works in IE7+ */
li:last-child {
    border-bottom: none;
}

/* Get the number and float it right */
span {
    float: right;
}
​

Upvotes: 4

mkk
mkk

Reputation: 7693

It does not seem like you even tried to google for "rounded corners" but anyway, you have 2 options:

  1. using CSS property border radius, but note it will not work in IE7
  2. use image and background property

Upvotes: 0

Related Questions