All postsSo you want make a list with rounded corners..i hope this simple tutorial can help you.
This is the final result: demo.
First of all we ‘re gonna to design the corners with Photoshop:
- Create a new file: 335px * 110px, resolution 72px, rgb/8 bit
- draw with the tool (shift+U) a rounded rectangle (270px*30px = height of your item) and fill it with color: #cccccc
- duplicate the layer and fill the new rectangle with color: #333333
- make 4 slices with the tool (shift+K) on the corners of the same width, like in the image:
- now save for web.. the 4 slices in .gif format (my files: crn_03.gif, crn_05.gif, crn_09.gif, crn_10.gif) and move it in the same directory of the .html file.
The html code is simple and semantic:
<li><a title="item1" href="#">This is an item with text</a></li>
<li><a title="item2" href="#"><img src="star.png" alt="star" /> This is an item with an image</a></li>
</ul>
i make an item with only text and another with an icon 24px*24px.
Copy and paste the following Css code in the <head> tag of your page.
/* reset the element */
html, body, div, span, h1, h2, p, a, img, ul, li{
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline
}
body{
font: normal 80% Verdana
}
a:hover{
outline: none
}
ul.crn{
float: left;
list-style: none
}
ul.crn li{
background: #ccc url(crn_05.gif) no-repeat top right;
float: left;
height: 30px; /* same height of the image */
margin: 0 20px;
text-align: center
}
ul.crn li a:link, ul.crn li a:visited{
background: url(crn_03.gif) no-repeat top left;
color: #333;
float: left;
font-weight: bold;
height: 30px; /* same height of the image */
line-height: 30px;
padding: 0 10px;
text-decoration: none
}
ul.crn li:hover{
background: #333 url(crn_10.gif) no-repeat top right
}
ul.crn li a:hover, ul.crn li a:focus{
background: url(crn_09.gif) no-repeat top left;
color: #EBD938;
text-decoration: none
}
ul.crn li img{
float: left;
margin-top:2px;
}
I reset all the element of the page, then i add float:left to all tag of the list and at the end i use the image of the corners as background for the tag <li> and <a>.
Download here the tutorial: you ll find an extra code to make the same effect for the tag <p>.
If you want to customize it, just remember to use the same height and the same color to draw the rounded rectangle and for the tag <a>, <li>.
It is supported by IE7+, FF2+, Opera and Safari; you can help me to find an hack for support pseudoclass :hover in IE6.
this method won’t work in ie6
@guile: i know ie6 doesn t support the pseudoclass :hover, but isn’ t it time to upgrade to ie7? Please ’save the developers’
Very nice article
Btw there are a few javascript snips that actually allow you to use :hover on anything at IE6…
Two very usefull examples:
http://www.xs4all.nl/~peterned/csshover.html
http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector
But in any case… IE6 sucks anyway
If you use links inside the <li /> elements, you can use :hover.
Great manual
@George Antoniadis: tanks a lot for the links, i never seen that tricks!
@aNieto2k: what do you mean? also the pseudoclass :hover on tag < li > isn t supported by IE6.
Clear article! Thanks for sharing!
for ie6 :hover issue you could try this
http://code.google.com/p/ie7-js/
3 Trackbacks
[...] How to make a list with rounded corners, auto width and hover effect [...]
[...] 17- How to make a list with rounded corners, auto width and hover effect [...]
[...] How to make a list with rounded corners, auto width and hover effect [...]