homepage Welcome to WebmasterWorld Guest from 54.211.97.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
List item with number alignment
greencode

5+ Year Member



 
Msg#: 4321248 posted 7:30 pm on Jun 2, 2011 (gmt 0)

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.

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4321248 posted 10:05 pm on Jun 2, 2011 (gmt 0)

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

greencode

5+ Year Member



 
Msg#: 4321248 posted 10:14 pm on Jun 2, 2011 (gmt 0)

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.

greencode

5+ Year Member



 
Msg#: 4321248 posted 8:41 am on Jun 3, 2011 (gmt 0)

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

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4321248 posted 10:04 am on Jun 3, 2011 (gmt 0)

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

lucy24

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



 
Msg#: 4321248 posted 7:44 pm on Jun 3, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved