Welcome to WebmasterWorld Guest from 54.166.224.46

Forum Moderators: not2easy

Message Too Old, No Replies

Sidebar with rounded corners and expanding content default height

     
3:07 pm on Jan 12, 2010 (gmt 0)

5+ Year Member



Hi everyone

I am trying to put together a sidebar for my site and am 99% done but there's one last thing I want to achieve which I'm having trouble with, so I'm wondering if anyone here can help.

First the css and html are pretty standard, and follow at the end of this post (if there's a better way of doing this though I'd appreciate hearing about it).

It all works, the corners are output and the bar expands and contracts vertically as more or less content is added to it.

What I'd like be able to do however, is stop it contracting past a certain point. i.e. have it display at a set hight initially and only expand down the page if the content exceeds the initial height of the bar.

As you'll see from the html, I've tried achieving this by stacking a copy of the bar behind itself with a transparent gif to set the intial height, but obviously this doesn't completely work as the bottom corners in the top layer still appear higher up the bar than they should.

Does anyone have any good examples of how to do this effectively or can anyone suggest a better way of doing this altogether?

CSS:
----
.corner-container {background:#ccc; color:#fff; margin:0 15px;}
.corner-top, .corner-bottom{
display:block;
background:#fff;
}
.corner-top *, .corner-bottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.corner1{margin: 0 5px}
.corner2{margin: 0 3px}
.corner3{margin: 0 2px}
.corner4{
margin: 0 1px;
height: 2px
}

HTML:
-----
<!-- setup the sidebar with rounded corners and default dimensions specified by the gif as a background -->

<div class="corner-container" style="display:inline; position:absolute; float:left; width:200px; z-index: -300;">

<div class="corner-top"><div class="corner1"></div> <div class="corner2"></div> <div class="corner3"></div> <div class="corner4"></div></div>
<img src="images/spacer.gif" width="200" height="400" />
<div class="corner-bottom"><div class="corner4"></div> <div class="corner3"></div> <div class="corner2"></div> <div class="corner1"></div></div>
</div>

<!-- setup the foreground version -->
<div class="corner-container" style="display:inline; position:absolute; float:left; width:200px; z-index: -150; ">
<div class="corner-top"><div class="corner1"></div> <div class="corner2"></div> <div class="corner3"></div> <div class="corner4"></div></div>
Demo Text
<div class="corner-bottom"><div class="corner4"></div> <div class="corner3"></div> <div class="corner2"></div> <div class="corner1"></div></div>
</div>

4:28 pm on Jan 12, 2010 (gmt 0)

5+ Year Member



Looks like a rather complicated way to do it, but if it works then hey..

try the CSS property max-height, just remember, it is not properly supported in IE6. However, IE6 treats height as if it was max height, use a different stylesheet for css and include the height rule with the same value as max height in the normal stylesheet.

4:29 pm on Jan 12, 2010 (gmt 0)

5+ Year Member



Looks like a rather complicated way to do it, but if it works then hey..

try the CSS property max-height, just remember, it is not properly supported in IE6. However, IE6 treats height as if it was max height, use a different stylesheet for css and include the height rule with the same value as max height in the normal stylesheet.

5:48 pm on Jan 12, 2010 (gmt 0)

5+ Year Member



Thanks I'll give that a try
7:59 pm on Jan 12, 2010 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'm not sure if it's min-height or max-height you might use, but to teach IE6 how to do either: try IE7.js: it teaches IE6 a few manners.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month