homepage Welcome to WebmasterWorld Guest from 54.234.2.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Sidebar with rounded corners and expanding content default height
ChrisDean




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

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>

 

chasehx




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

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.

chasehx




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

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.

ChrisDean




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

Thanks I'll give that a try

swa66




msg:4059284
 7:59 pm on Jan 12, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved