Welcome to WebmasterWorld Guest from 54.166.220.138

Forum Moderators: not2easy

Message Too Old, No Replies

List item with number alignment

     
7:30 pm on Jun 2, 2011 (gmt 0)

5+ Year Member



I am wanting to create a list item that has a number next to it but the number needs to have a background and be raised slightly above the corresponding text. I'm really struggling at present to get it looking correct cross browser (I realise the box will be squared off in IE7/8 - that's not a problem)

I have this code:

<ul>
<li><a href="#">Messages <span>100</span></a></li>
</ul>


and this css:

#subnav ul li {
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: 36px;
margin-right: 25px;
}

#subnav ul li a {
padding: 10px 12px;
}

#subnav ul li span {
font-size: 11px;
color: #fff;
background-color: #aba59e;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 2px;
padding: 2px 5px;
vertical-align: top;
}


But because the smaller numbered span text remains on the same horizontal alignment as the larger text and I'm also adding a background to that span it then appears as though the span is below the main text.

It's also pretty bad in IE7 at present.

Any help or ideas would be much appreciated.
10:05 pm on Jun 2, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there greencode,


does this help....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#subnav ul li {
display: inline-block;
font-size:16px;
font-weight:bold;
line-height:36px;
margin-right:25px;
}
#subnav ul li a {
padding:0 12px;
}
#subnav ul li span {
float:right;
line-height:1.2;
font-size:11px;
color:#fff;
background-color:#aba59e;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-top:6px;
padding:2px 5px;
}
</style>

</head>
<body>

<div id="subnav">
<ul>
<li><a href="#">Messages <span>100</span></a></li>
</ul>
</div>

</body>
</html>

birdbrain
10:14 pm on Jun 2, 2011 (gmt 0)

5+ Year Member



Hi birdbrain. I'll check this tomorrow - absolutely shattered at the moment but will reply tomorrow and let you know how I get on. Thanks for your help - really do appreciate it.
8:41 am on Jun 3, 2011 (gmt 0)

5+ Year Member



Hi birdbrain. Just realised another problem. I have a background hover on list item and so when I hover over that it only highlights the list item and not the span item. If I remove the float:right then all works okay except the alignment issue is back normal. The code I'm using for hover is:

#subnav ul li a:hover {
background-color: #797979;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
color: #fff;
}
10:04 am on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there greencode,

try this amendment, it will give you far greater control of the elements...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#subnav ul li {
display:inline-block;
font-size:16px;
font-weight:bold;
line-height:36px;
margin-right:25px;
}
#subnav ul li a {
display:block;
padding:0 12px;
text-decoration:none;
}
#subnav ul li a #m {
text-decoration:underline;
}
#subnav ul li a #n {
float:right;
line-height:1.2;
font-size:11px;
color:#fff;
background-color:#aba59e;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin:6px 0 0 5px;
padding:2px 5px;
}
#subnav ul li a:hover{
background-color:#797979;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
color:#fff;
}
</style>

</head>
<body>

<div id="subnav">
<ul>
<li><a href="#"><span id="m">Messages</span><span id="n">100</span></a></li>
</ul>
</div>

</body>
</html>

birdbrain
7:44 pm on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Quick clarification: do you want the special properties to apply to the entire list item or only to the marker?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month