Home » Internet » Web Programming » CSS

CSS Codes Demonstration

Ranked #2,051 in Internet, #120,449 overall

How I Did It: Crazy CSS Tricks

Here's the code for this ridiculous CSS widget I made for my Fancy Table of Contents tutorial.

I've color coordinated it, but it's still complicated. You may want my CSS Codes Quick Reference to help decipher all this.

Feel free to cannibalize the code. In exchange, I ask for a link back to one of my lenses.

The Widget

My Happy Holidays LensesHallowe'enChristmasValentine's Day

icons by Icondrawer

You'll need to understand how I color coded the different parts:


  • Darkgreen: Outer box.
  • Lightgreen: Top row.
  • Orange:Text. (Words.)
  • Red: Middle row, the white area containing the three graphics.
  • Navy: cells in middle row, invisible boxes containing each graphic.
  • Gray: Individual graphics
  • Purple: Third Row containing captions
  • Brown:Cells of third row, the colored boxes containing each caption

The Code

And I didn't even add link-codes!

I also didn't use span, because Squidoo didn't let us use it when I built this. I couldn't have done it with span alone. Once you get three "boxes" nested inside each other, you have to use CSS Kung Fu to override b, i, or u and get yourself some extra containers.

<p style="text-align: center; border: solid 3px green; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 0px; margin-bottom: 0px; margin-left: 30px; float: right;width: 300px;"><i style="display: block; -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px;-moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; padding: 5px; background-color: green; background-image: url(http://www.istad.org/squidoo/toc/green-mosaic.png); color: white; text-align: center; font-family: Trebuchet MS; font-weight: bold; border-bottom: solid 3px green;">My Happy Holidays Lenses</i><i style="font-style: normal; display: block; padding: 5px 0px; height: 106px;"><b style="display: block; margins: 0px; width: 100px; float: left;"><img src="http://www.istad.org/squidoo/toc/halloween.png" style="width: 100px; height: 104px;" /></b><b style="display: block; margins: 0px; width: 90px; float: left;"><img src="http://www.istad.org/squidoo/toc/christmas.png" style="width: 90px; height: 104px;" /></b><b style="display: block; margin: 0px; width: 110px; float: left;"><img src="http://www.istad.org/squidoo/toc/valentines-day.png" style="width: 110px; height: 104px;" /></b></i><i style="clear:both; float: left; font-style: normal; display: block; -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; padding: 0px; background-color: white; font-size: 9pt; font-family: Arial; line-height: 18pt;"><b style="display: block; margins: 0px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; width: 100px; background-color: #f90; width: 100px; float: left; color: white;">Hallowe'en</b><b style="display: block; margins: 0px; background-color: green; color: white; width: 90px; float: left;">Christmas</b><b style="display: block; margins: 0px; background-color: red;-moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; color: white; width: 110px; float: left;">Valentine's Day</b></i></p><i style="display: block; padding: 3px; clear: both; text-align: right; float: right; width: 300px; font-size: 8pt;">icons by <a href="http://www.icondrawer.com/free.php">Icondrawer</a></i>

Um. So. Yeah.

You'll Probably Want to Go Back to My Easier Lenses now...

Or else Jump Back to the Module Where You Were in my Fancy Table of Contents tutorial or the CSS Kung Fu section of my CSS Codes Tutorial.
Loading

Thanks for stopping by!

Hope I didn't scare ya too much with that mess.

  • Aquavel Jan 7, 2012 @ 11:41 pm | delete
    This is exactly what I was looking for! But it's too advanced for me! I'm off to work with your simpler styling tricks and I'm bookmarking this one for later! Thanks for your example and for showing us how make the code! (Now I'm off to search for a lens on how to make a vertical column of images with aligned descriptions & links. I saw it somewhere and think it was one of yours....)
  • olpampam Jun 4, 2011 @ 11:13 pm | delete
    You know what? I'm completely new to this and I have to say, I am slowly coming to understand the coding. You are a good teacher. I'm definitely not here yet, but I made a table of contents in a box with a border, so I was proud of that. I even changed the colours a bit. I would like if I could put a more decorative border around my box, but I'm sure I will figure it out with time. I know it's not much, but I'd love for you to see what you taught me. My lens is Best Business Cards Online.
  • Psycho-Gamer Feb 24, 2011 @ 3:12 am | delete
    loooool so much coding for such a small widget.....YOU ARE SUCH A BRAVE GIRL

    THANK YOU SO MUCH
  • SEM-SEO-SMM Feb 9, 2011 @ 4:03 am | delete
    LOL. That's a lot of coding! Added to my Featured Lenses Module on Squidoo Lens Customization!
  • daoine Apr 28, 2010 @ 5:42 am | delete
    Thanks so much for your tutorials. This was actually very helpful; I just used and tweaked a tiny portion of the code and got exactly what I wanted. :-)
  • Load More
Show All

by

Greekgeek

I've written several Squidoo Tutorials to help you, including a newbie guide to CSS & HTML codes! more »

Feeling creative? Create a Lens!

Related Tags