...

View Full Version : lists and nested spans? (floating some text right)



lilqhgal
06-27-2007, 05:29 PM
I have a vertical list that I want to have some text and then a little character (such as an ! or a $ or a *) floated to the right of the list. I've tried it different ways but it doesn't seem to line up in IE or FF correctly. It staggers the right side if I set the span to float: right, or it just doesn't match up if set to align-right. Here's the code:

CSS:


#navlist
{
padding-left: 0;
margin-left: 0;
width: 200px;
}

#navlist li
{
list-style: none;
margin: 0;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: gray;
}

#navlist li a { text-decoration: none; }
.redX {
color: red;
text-align: right;
right: 0px;
float: right;
clear: right;
position: fixed;
}


HTML:


<div id="navcontainer">
<ul id="navlist">
<li>in the same sentence <span class="redX">/s</span></li>
<li>in the same paragraph <span class="redX">/p</span></li>
<li>within "n" terms of <span class="redX">/n</span></li>
<li>root expander <span class="redX">!</span></li>
<li>universal character <span class="redX">*</span></li>
<li>both words appear in a document <span class="redX">AND or &amp;</span></li>
<li>either word appears in a document <span class="redX">OR</span></li>
</ul>
</div>



Can anyone help me figure out how to get them to align right and stay inline? Thanks!!!

koyama
06-27-2007, 05:57 PM
Keep in mind that you cannot simultaneously float and specify position: fixed for an element. That may be why it isn't working the way that you expect. You probably don't want fixed positioning.

Read more: CSS 2.1 Working Draft, 9.7 Relationships between 'display', 'position', and 'float' (http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo)

I think that you may get better help if you provide a link to the live page. For example, from the code you have pasted, we don't know what document type you have specified.

lilqhgal
06-27-2007, 06:08 PM
Thanks for the reply... unfortunately, I can't post it live anywhere. I can however include the entire html here. I have made some change and I'm getting closer, but I still can't get it to line up height wise correctly. I need each line to be a tad bit smaller and to be good in both IE and FF but cant seem to get the right line-height or height combo. Here's the code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {padding: 0; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
#left_box {
float: left;
width: 207px;
}
#left_box .title {
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
background-image: url(img12.jpg);
background-repeat: no-repeat;
height: 19px;
vertical-align: middle;
line-height: 19px;
padding-left: 10px;
}
#left_box .content_corner {
color: #000000;
background-color: #F4F4F4;
background-position: right top;
background-image: url(leftFrame_TLcurve.jpg);
background-repeat: no-repeat;
font-size: small;
border: none;
}
#left_box .content {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
position: relative;
}
#navlist
{
padding-left: 8px;
margin-left: 0;
font-size: 10px;
padding-top: 5px;
width: 190px;
}

#navlist li
{
list-style: none;
margin: 0;
border-bottom: 1px dashed gray;
clear: both;
vertical-align: middle;
padding-bottom: 3px;
width: 190px;
height: 10px;
line-height: 10px;
}
#navlist .last {border-bottom: none;
}
.search_keys {
color: red;
float: right;
position: relative;
top: -10px;
right: 5px;
line-height: 10px;
vertical-align: top;
width: 25px;
}

-->
</style>
</head>

<body>

<div id="left_box">
<div class="title">Search Connectors</div>
<div class="content_corner">
<div class="content">


<ul id="navlist">
<li>in the same sentence <span class="search_keys">/s</span></li>
<li>in the same paragraph <span class="search_keys">/p</span></li>
<li>within "n" terms of <span class="search_keys">/n</span></li>
<li>root expander <span class="search_keys">!</span></li>
<li>universal character <span class="search_keys">*</span></li>
<li>both words appear <br /> in a document <span class="search_keys">AND <span style="color: #000;">or</span> &amp;</span></li>
<li class="last">either word appears <br /> in a document <span class="search_keys">OR</span></li>
</ul>
</div>
</div>
</div>

</body>
</html>

Thanks again! Oh and I realized that position: absolute issue right after I had posted this message. I was just messing around trying to see if *anything* would work.

koyama
06-27-2007, 06:37 PM
To get the appearance that you want try this:


#navlist li
{
list-style: none;
margin: 0;
border-bottom: 1px dashed gray;
clear: both;
vertical-align: middle;
padding-bottom: 3px;
width: 190px;
/* height: 10px; */
line-height: 10px;
overflow: hidden; /* float containment */
}
.search_keys {
color: red;
float: right;
position: relative;
/* top: -10px; */
margin-right: 5px;
display: inline; /* IE 6 double float margin bug fix */
/* right: 5px; */
line-height: 10px;
vertical-align: top;
width: 25px;
}

while changing the order in the markup from this:


<li>in the same sentence <span class="search_keys">/s</span></li>

to this (all places):


<li><span class="search_keys">/s</span>in the same sentence</li>

With that said, a definition list may be more appropriate to use than a plain unordered list.

lilqhgal
06-27-2007, 07:01 PM
With that said, a definition list may be more appropriate to use than a plain unordered list.


.....well, I'll be a monkey's uncle. *smacks self in forehead*



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum