Positioning absolute inside list with positioning relative for jQuery animation

Question

Im trying to achive an animation of a horizontal list.

Like

Item 1 * Item 2 * Item 3 * Item 4

But only two items is visible at one time.

Each item contains a div with a picture, a text and a link. The picture should always be aligned to top and the link to the bottom.

<ul>
<li><div>
<img src="somepic"/>
<p>SomeText</p>
<a href="url">Link</a>
</div></li>
<li><div>
<img src="somepic2"/>
<p>SomeText2</p>
<a href="url2">Link2</a>
</div></li>
</ul>

Here is the problem, the list-item must be positioned with "postition:relative" and if i use absolute positioning inside the div the animation gets messed up. I animate by appending and prepending to the list.

Does anyone have a nice and easy solution to this?

EDIT:

Here is a sample: http://jsfiddle.net/39bhW/

I think i need the positioning to be absolute within the list items...

Maybe you have a fiddle link or something that explains your problem more practical? The restrictions you describe are blurry, could you f.ex set the link absolute to the bottom of the DIV? — David Hellsing, Mar 03 '12 at 21:38
whenever you use absolute position keep in mind without css dimensions the element has 0 width and height — charlietfl, Mar 03 '12 at 21:49
johan, without seeing an example/demonstration (http://jsfiddle.net) of what you're after/where you're at, it's hard to know what you need help with. — Jared Farrish, Mar 04 '12 at 00:51

Jared Farrish · Accepted Answer · 2012-03-04T16:46:43.060

When you apply positioning to an element, it will use the positioning available on it's parents. If none is provided, it will position to the body element. So when you position: absolute to get the text/link at the bottom of the element, you have to position: relative (or position: absolute) one of it's parents, otherwise it won't know which you want it to position in relation to. Conversely, whichever it finds first, it will use that element to position against.

I think it's possible you've got too much markup to accomplish what you're doing here (what is the .placeholder for? why not just use the li?), and the spans that wrap one of the blocks looks out of place (and should be a div if you really need a wrapper there). And I'm not sure, but you might want to change #items to a class, if you need to reuse it. It looks out of place as an id. And your id and class names are not descriptive, and your selectors are not specific enough (generally, stay away from ul and li for styling specific parts of a page, as these have a global effect).

Nonetheless, I think this is what you're looking for. Note how I use padding on #items li, and then compensate bottom: 5px. You also don't need to position the img tag if it's just going to be at the top of the block, centered.

HTML (Fragment)

<li>
    <div class="itemplaceholder">
        <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
        <p>
            Test title<br/>
            Description A
            <a href="#">Link</a>
        </p>
    </div>
</li>

CSS

#items {
    display: inline;
    position:relative;
    margin: 0;
    padding: 0;
}
#items li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
}
#items .itemplaceholder {
    height:200px;
    width:160px;
    text-align: center;
    position: relative;
}
.placeholder {
    width:640px;
    height:200px;
    overflow: hidden;
}
.content {
    width:800px;
    height:240px;
}
#items .itemplaceholder p {
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 50%;
}
#items .itemplaceholder p a {
    position: absolute;
    display: block;
    bottom: 0;
    text-align: center;
    width: 100%;
}

http://jsfiddle.net/39bhW/3/

Thanks alot! But this works incredibly bad in IE7 you don't happen to know how this could be solved? — johan, Mar 04 '12 at 20:09
It's a combination of two problems: Use `left: 0` on the `p` and `a`, and [see IE 6/7's mishandling of `position: relative` and `overflow: hidden`](http://stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-overflow-hidden-position-relative-combo). You can "fix" the second by giving a width/height and `overflow: hidden` to the `ul` as well. [Demo here](http://jsfiddle.net/39bhW/6/). — Jared Farrish, Mar 04 '12 at 20:47
"When you apply positioning to an element, it will use the positioning available on it's parents. If none is provided, it will position to the body element." - saved my life :D — Sorin, Oct 14 '15 at 14:10

score 0 · Answer 2 · answered Mar 04 '12 at 10:30

0

so basically you want to have 2 items visible at one time, am i right?

well, change the width of .placeholder to 320px

answered Mar 04 '12 at 10:30

Joseph

117,725
30
181
234

Thats not the big deal. I want the link aligned to bottom and the text to be at the same level regardless of image size – johan Mar 04 '12 at 10:34
At the same height in each item. Lets say 40px from the bottom of the div. – johan Mar 04 '12 at 10:43

Positioning absolute inside list with positioning relative for jQuery animation

2 Answers2