Applying css positioning to li

iceman90289 · March 8th, 2009, 01:53 AM

i am using the <li> tag in my user control to list a few asp:LinkButtons.

they are under the following CSS rules:

Code:

 
li
{
position:absolute;
left:-15px;
}
li:hover
{
position:absolute;
left:+15px;
}

my issue is that all the links show on top of one another. not one below the other...

my code looks like this:

Code:

 
<ul>
  <li><asp:LinkButton ...Properties... /></li>
  <li><asp:LinkButton ...Properties... /> </li>
</ul>

the properties are the id, runat, and text, (no actual link to another page quite yet...)

iceman90289 · March 8th, 2009, 02:12 AM

ok wow... i used absolute positioning... i wanted relative... okay this issue was just caused by my ignorance...

it looks great now.

meow · March 8th, 2009, 06:54 AM

Since I wrote this before I saw you had already figured it out, I post it anyway. Maybe it can help you figure out how it works. It's often good to try things out on a very simple page instead of the actual markup you want to use it for. Makes one see the wood for all the trees.

-------------------------------------------------------------------------

Quote:

my issue is that all the links show on top of one another. not one below the other...

Yes, that's what you would get of you position them the in the same place. A box that's positioned absolute is taken out of the normal document flow, It takes up now space. You could say that it's "layered" on top of other content.

Create some colored boxes and play with them. Something like this.

Code:

#foo               { width: 300px; height: 140px; background: yellow }
#bar               { width: 400px; height: 160px; background: red }
#baz               { width: 500px; height: 180px; background: blue }

Code:

<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>

Make one box at the time 'position: absolute' (without offset), then two at the time, then all three. Add offset, z-index and so on and change those properties around until you understand what they do. Read the spec and try the things you read about out on your boxes.
http://www.w3.org/TR/CSS2/visuren.html
Especially:
http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
http://www.w3.org/TR/CSS2/visuren.html#q30

That said, there's probably no reason to use 'position: absolute' at all for your list items.