Web Development

CSS Price Lists – NetCog

NetCog

Member

Posts: 149
From:
Registered: 06-15-2006
 		Figured this one out pretty much on my own. It's interesting I haven't found anything reference this kind of usage.

Anywho have fun:

*To make a "price list" with periods between ItemName and ItemPrice.

HTML


<ul id="pricelist>
    <div id="pspace">
        <li id="productlist>
            <div id="pname"SomeItem</div>
            <div id="pamt"Some#</div>
        </li>
    </div>
</ul>


CSS - default text height is 12pt I think, might be 8...anyways


#pspace {
height: 11px;
position: relative;
line-height: 12pt;
width: 300px;
border-bottom: 3px dotted #444;
}
#pname {
position: absolute;
left: 0px;
padding-right: 5px;
background: ((this is the same background as the body or main page color))
}
#pamt {
position: absolute;
right: 0px;
padding-left: 5px;
background: ((this is the same background as the body or main page color))
}

adjust the padding-left and -right pixels to adjust how close the 'periods' get to the text
adjust the pspace border pixels to adjust the size of the 'periods'
tehriddler

Junior Member

Posts: 8
From: Portland, Oregon
Registered: 05-07-2007
 		That's pretty cool NetCog. I'm sure you could use it with some sorta shopping system.

One thing though, I copied the code, and it wasn't working correctly (in Firefox). Though I understand what it's supposed to look like. Just letting you know really. Can't wait to see what else you come up with.

God Bless!
-Teh Riddler