CODEWITHSUNDEEP
csshtmlheightoverflowhtml-lists
Kamy D
Kamy D

Reputation: 1101

height not adjusting for UL and DIV container

Anyone has any idea how to make this slider to adjust the height?

http://www.awesomeget.net/#steps-slider

right now the height is set in DIV "container", but if you remove the height then nothing gets displayed. It appears the UL element somehow doesn't give its height to the parent. i added overflow:hidden to the "steps-holder" and "slide-holder" which are the parent containers... and made sure this UL element is not floated....but still nothing changes..

any help would be appreciated.

Thanks,

Upvotes: 1

Views: 3380

Answers (3)

Musa
Musa

Reputation: 97672

The ul and li elements within the div are positioned absolutely, which means they are removed from the normal flow, so the div they are contained in is not affected by their size. Removing the absolute positioning will fix the problem, though it might be the cause of others.

Upvotes: 1

skip405
skip405

Reputation: 6279

In your black.css file on line 705 there is a height property set to all a elements of the slides. Remove that part for a start... then remove the overflow: hidden and height properties from the container with a class of steps-holder. I actually found no div with a class of container in your steps-slider block... please specify if it's a class. It's a bit misleading :)

If this is the effect you wish to achieve of course) http://clip2net.com/s/1Qyvr

Upvotes: 0

Sammy D
Sammy D

Reputation: 34

Like mentioned above since the List Items are positioned absolutely, you won't be able to do this with just css unless you remove the "absolute" positioning. However you can do it with jQuery:

remove the height: 300px for div.container and add this code:

$(document).ready(function() {
   tmpHeight = $(".slides li").height() + 46; // I added 46 to get to 330, but you should do this with padding in css or something
   $("div.container").css("height", tmpHeight + "px");

}

Upvotes: 1

Related Questions