Nifty Corners

In your HTML document, wrap your text in a <p> tag and then make sure in your CSS that you place the "#content p" tag with a color of "#fff" to make it stand out on your black backround. You are really close!

OK, got the text to show, but the page div doesn’t hold all the text.

The problem with the text not being held by the page div is that you need to set pixel size in "curvy" big enough to contain all your text. Right now you have it set to 700px. Also remember, when you make the height bigger in curvy, you also need to update the positioning of the bottom bullets to be 20 pixels less than that height. That is the inherent problem with this setup, is that you can’t set the height to "auto" so that it adjusts with the content size because you have to absolutely position your bullets to round the corners. That is where the javascript comes in handy, I would imagine, to adjust the positioning of the bullets if you had an "auto" height.

OK. So I have to customize the size of the page div for each document?

With this implementation, yes.

Can’t the css "clearfix" be used in this?

I am not sure. Another alternative would be to just round the top corners and have the bottom of the box come into a square so it lines up with the square footer. Then auto content can be used as you aren’t trying to place the bottom bullets. Plus, as the gradient goes to complete black, the bottom of the black content <div> blends anyway. I’ll look into seeing if there is someway to do this same method with an auto height, nonetheless.

I’m referring to these technics: http://www.positioniseverything.net/easyclearing.html

I would like to use Nifty Cube on a template I am working on.
I found some examples here:

http://www.html.it/articoli/niftycube/index.html

I tried setting it up, but it didn’t work. Here’s what I did:

I had the same problem and just figured it out. You have to add a link to the niftyCorners.css file.



It worked once I did this. Hope ths helps