More fun with Css signs & floats

Some additional ideas that you can do with floats

1.

control on a css sign to make it look like a corner was taken out

This would be making a point using the borders

kind of control in design work

Or to place an image. Plenty of ways to us this

too

The eagle

To turn the borders off and on use a zero  border-width:
1px 1px 1px 1px ;
 | top | right | bottom | left |

The above float uses 4 floats a picture and the text with a black background.

See if you can figure it out.
The top left float is the same as the one on the far left. No border top & left.

The bottom right float is the same color as the background and turns the right and bottom borders off.

The the maroon box with all of the borders on, and the black text background with a full border.

So you can mix and conmbine stuff to do fairly complex stuff.

Like this
This is the code to do that:

<div style="width:100%; height:100%;
background-color: black;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: gold;">
</div>
See:  border-width: 0 1px 1px 0;
That turns the top border off with 0
the right and bottom on at 1 pixel wide, and the left border off with 0
The above float  is actually 2 floats. Both with tthe same background color.
The top left float has the #1 and uses two borders.

This is a float using an HTML object and text on top.

You can drag this any size just as you can the square floats.
Then you have to position the text on top

To change the border color change the 4 places where it says chocolate
To change the background color change the 2 places it says biege

In the header....:

<style type="text/css">
    .xtop, .xbottom {display:block; background:transparent; font-size:1px;border:0;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:beige; border-left:1px solid chocolate; border-right:1px solid chocolate;}
    .xb1 {margin:0 5px; background:chocolate;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    .xboxcontent {display:block;background:beige; border:0 solid chocolate; border-width:0 1px;}
</style>

..and into the HTML object:

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent" style="height:100%">
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

I find this method more stable but more steps as you have to position the text.
Here is the code:

This page last modified on Sunday, June 11, 2006

TnMountainMan expanded on the tutorial so it is easier to follow.
Re-sizeable Rounded Corners Tutorial for WS4