I’ve been doing some CSS and HTML work and it feels good. I haven’t done this type of stuff since I started at Microsoft and I love how CSS will constantly make you want to cry to get it to work.
So I’ve been using 2 different types of ways to get rounded corners for appearance since everyone wants their stuff to look Web 2.0’ish. Images and JavaScript. I hate using images since you have to render them first so I’ve used javascript. There are two scripts to do this, the first is Nifty Cube and the second is called Curvy Corners. Each has pro’s and con’s.
Nifty Corners is very easy and can be applied on anything to use BUT can’t do borders and let the image from a background bleed through while Curvy Corners can do just this but really only gets along with DIV tags. BTEO right now uses Curvy Corners currently for the background image bleed, this will 99% not be there for the next version.
However I’m developing a site for my brother and liked the Engadget header more or less. While the color scheme for his site will be different, I’m going to clone it pretty much exactly while he does whatever he does.
Curvy Corner could do it but once you started to get a bit deep, and the border issue pretty much screwed it came changing the link background colors when you roll over them with rounded corners. But you’re asking, Clint, the spec requires a border and you said Nifty couldn’t do borders.
That is why you do something like this: note the double div
HTML:
<div class="headerBottom">
<div>
<ul>
<li><a href="#">Test 1</a></li>
</ul>
<div class="inner">Bob Dole Likes Peanut Butter</div>
</div>
</div>
With some CSS:
<style type="text/css">
.headerBottom
{
top: -3px;
position: relative;
background-color: #E7E7E7;
padding: 3px;
}
.headerBottom div
{
height: 50px;
background-color: #F1F1F1;
}
</style>
JavaScript:
window.onload=function(){
Nifty("div.headerBottom div","bl small");
Nifty("div.headerBottom","bl transparent fixed-height");
}
By nesting, I can fake the appearance of a border. I get something that looks like this and with everything as pure HTML. Below is a screen grab of the render however.
Slight of hand but I do get my corners curved with a border. Why care? The client (my brother) can change the colors and I don’t have to render the borders. Everything can be updated via CSS. I say this as I’m looking at a render he did that marked a section that is colored gray but has a hex value of pure white (#FFFFFF).
Tags [
Coding
]
Share this Post: