Mandarin Logo
MainBlogFAQsBox TipsText TricksColor ChartFree GalleryCSS Opacity
TWO CENTS CURRENT ISSUE 2006 WEST SACRAMENTO CALIFORNIA
Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...
Page Down to View All Tips and Tricks
CSS FLOATS
  1. Float Left
  2. Float Left: Matted Border
CSS OPACITY
  1. CSS Opacity BordersOpera update
  2. CSS Transparent Box
Non-Mandarin Link
  1. Little Boxes CSS Templates
CSS BORDERS
  1. CSS Boxes and Borders
  2. Double Border
  3. Easy Box Model
  4. Two-Color Presley Box
  5. Two Dotted Boxes:Beige
CSS PICTURE BORDERS
  1. CSS Filmstrip Border
  2. Border Around Pictures
  3. CSS White Borders
  4. CSS Triple Border
  5. Polaroid Borders
FANCY BORDERS
  1. Centered Box
  2. CSS Dashed Border Box
  3. CSS Gold Matte Around Pictures
  4. CSS White Matte Border
  5. Medieval Law Book Format
IE SHADOW FILTERS
  1. Shadowed Text Box
  2. Shadow Filter Border
  3. BOTTOM
Box and Borders Index
#  Last Updated:  Wednesday, March 15, 2006
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

E=mc²

E=mc² Stu will be celebrating Einstien's birthday with the rest of the world. And more text goes here.

Copy and paste this in your blog or web page.

It will look like this.

E=mc² Stu will be celebrating Einstien's birthday with the rest of the world. And more text goes here. And more text goes here. And knowing Stu, the text will be interesting with a whiz bang punch. Or, something like that. I'm just typing for demonstration. Is this what you wanted Stu? We need to type in enough text to demo what it might look like on your page.

E=mc²
#  Last Updated:  Tuesday, March 14, 2006
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...
updated February 2006

CSS Coded Opacity Borders
Opacity Works in Opera

Thinking inside of the box...
Borders are usually around the outside of a photograph but we thought it might be interesting to apply the border to the inside of this photograph. This is a white border with 50% opacity applied. Opacity works in IE, Firefox, and Opera.

Copy and paste this in your Blog or Web page. Note: The line breaks are removed so that your Blogging tool doesn't interfere.

It will look like this (image included).

The Code: Piece by Piece

Outer Div

Opacity Border

End Outer Div

Put it all together and it will still look like this.

We used the image calla.jpg as a background in the first div. In the second div we put a white border with opacity applied.

Tip: To position the border inside of the image we calculate the placement of the border. For example, we are using a 10 pixel border. That's 10 pixels on the left, right, top and bottom.

The first div that contains the background image is 300 x 200. The second div with the opacity border applied is 280 x 180.

  • Image: calla.jpg
  • Border: 10 pixels
  • Background: 300 x 200 pixels
  • Border: 280 x 180
    • 300 - 20 = 280
    • 200 - 20 = 180

Photograph from the notReality Gallery of Punkclown. This Opacity border works in version 9.0 of Opera. The -moz-opacity:.50 is no longer needed but is included for possible backward compatibility in Mozilla.

CSS Coded Opacity Borders
#  Last Updated:  Tuesday, February 07, 2006
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Transparent Box
Opacity Background Techniques

Can you show me how to make a transparent box?
We need a background first. We'll use the lily. This should work like any other box with some level of opacity applied. Let's use a background color of white and a maroon border for testing.

This is a paragraph with 50% opacity applied.

Copy and paste this in your Blog or Web page.

It will look like this.

This is a paragraph with 50% opacity applied.

Example 1: Transparent Box

This is a paragraph with 50% opacity applied.

We start the paragraph with opacity applied inside of the box at the relative position -190px. Why -190px? We want to backup from the natural flow but stay within the display of the background image. If we don't back up the transparent paragraph would start after the display of the background image.

We could move it up 200 pixels, the same as the height of our background, and start at the top of the image but we want it to start about 10 pixels down from the top of the image. This isn't graceful code. We are explicity telling the browser the start position. It works in Mozilla Firefox and in Internet Explorer.

The text itself has opacity applied. There must be a better way. It's not coming to me right now and I'm still inside of the box.

On a full page that already has a background this may work better. The div we used here only functions to lay down a background. The code that is doing the work is the paragraph that has opacity applied.

Notice that when we type in a paragraph after forcing the browser we need to position the following paragraphs, including this one with positional code.
<p style="position:relative;top:-50px;">

Copy and paste this in your Blog or Web page.

It will look like this.

This is a paragraph with 50% opacity applied.

Example 2 Transparent Box: Opacity 50 on the Background
This is a div with no opacity applied.

Copy and paste this in your Blog or Web page.

It will look like this.

This is a div with no opacity applied.
Transparent Box
#  Last Updated:  Thursday, August 11, 2005
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Monday Triple Border

Monday without a border

CSS Triple Border

Add a triple border with inline CSS style

For the triple border to work the width and height of the image is included in both the img tag and the div that surrounds the image to make the matted frame look. A right-click on the image to view the properties tells us that this image is 200 x 159 pixels.

Copy and paste this in your Blog or Web page.

It will look like this.

Add a triple border using named colors.

It's easier to see how the triple border works when we use color names instead of the hex color code.

Copy and paste this in your Blog or Web page.

It will look like this.

The image is made with TypoGenerator.

Triple Matte and Border
#  Last Updated:  Tuesday, July 26, 2005
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Thin Border Float

Float Image Left

We can create a class named thinborderfloat that will automatically put a thin border around our image with padding and float it to the left. We used a long name, you can name it anything you want.

You will notice that we are typing in quite a bit of text here. If we haven't posted enough text the float may cause the text that follows to collide. The easy solution is to use a a <div style="clear:both;"></div> at the end of any post with a float in it. It's in the copy and paste code. But, a picture floated to the left usually looks best when there is plenty of text to surround the picture anyway. The picture is often used as decoration for a narrative that is too long to read without a pictorial break.

The CSS looks like this.

You can put the CSS in your external style sheet or add it to the HEAD section of your page. If you are using a template look for the <style> and copy the thinborderfloat style anywhere after the <style> and before the end </style>

Copy and paste this in your Blog or Web page.

It will look like this.

We can create a class named thinborderfloat that will automatically put a thin border around our image and float it to the left. We used a long name, you can name it anything you want.

CSS Inline Style: The Type and Go Code

When we want to use a technique or a style just one time we use Inline Style. Otherwise the style sheet would grow over time. Ours would be huge. And, inline style is easy when blogging. Type and go.

Copy and paste this in your Blog or Web page.

It will look like this.

We can create a class named thinborderfloat that will automatically put a thin border around our image and float it to the left. We used a long name thinborderleft, but you can name it anything you want.

Thin Border Float
#  Last Updated:  Saturday, March 26, 2005
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

CSS BOXES and BORDERED IMAGES

Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

Sampling Colors

We used Adobe to sample colors in the fabric.

This is #8BB4AE
This is #F8E78B
This is #D26347
This is #7E4F33
This is #FFC9B4
This is #C0D4AF

Only you can hear the sound of one hand clapping. This is just spacer text. Some white space.

Centered Bordered Box
Background Color #C0D4AF

This is a centered bordered box. The background color is hexadecimal color C0D4AF. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.



The CSS Style code for a simple centered bordered box is made with a DIV.

Copy and paste this in your Blog or Web page.

It will look like this.

This is a centered bordered box. The background color is hexadecimal color C0D4AF. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.

Only you can hear the sound of one hand clapping. This is just spacer text. Some white space.

Centered Bordered Box
with Bordered Image

Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

The CSS Style code for a centered bordered box with an image inside is made with a DIV and a nested SPAN for bordering and floating the image to the left of the text.

Copy and paste this in your Blog or Web page.

It will look like this (image included).


Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.


You can replace our fabric image, change the border colors and the background colors. We had a hard time deciding on the right background color for the fabric. The walls where the fabric curtains were hanging were wood.


End of CSS Boxes and Bordered Images (Part 1)
CSS BOXES and BORDERED IMAGES
#  Last Updated:  Tuesday, March 01, 2005
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Medieval Law Book Format

Email from Stu:

Have a 1747 reprint of a beautiful medieval law book (see photo),which has the typical layout of medieval law books.

The original law (by Pope Pius 13th) is in the two column centered small sub-page. Various judges' commentaries "surround" the original law, flowing around it in two larger columns. (See photo)

Given that I have 2 separate text files, law and commentary, for some other legal stuff,what is the HTML and CSS I would need to 'pour' these 2 files into the aforementioned layout?

It is beyond my skills :-(

Stu, I tried a few different versions. This one is the most flexible but is sensitive. If it breaks when you work with it change the showme class to have a border color of red so that you can see where it falls apart. It is too wide to post in my Blog post area but will fit in any space over 400 pixels wide.

The style is included in the post. I tried to use names that will not conflict with your existing style sheet.

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(18) but if the water repelled him and he floated, he was condemned. In the ordeal of hot iron, the accused walked barehanded with a hot iron bar. Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned.

Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned... But in 1215 the Church forbade priests to officiate at ordeals and suddenly stripped these rituals of their divine imprimatur.

Paragraph 2: This is the right side text. The width is 45 percent which will make the page fluid but I'm not minding all of the rules here. Just typing in what I think might work. The graceful way to do this is not clear. This demonstrates only that it can be done in our browser.

The use of a shim or a spacer.gif is considebeige a cheat by some but for this one to make sense to most people the invisible image is useful. It allows us to make the left column and the right column a fixed size. Best of all, it works. There are a number of considerations for this code. The first line of paragraphs are indented. The padding is adjusted for this font size.

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him;

Although the jury's origins lie hidden in Dark Ages rituals, we can trace the origins of the sort of jury that concerns us here--the criminal trial jury--with something like pinpoint accuracy: The first true criminal jury trial seems to have taken place at Westminster in 1220.(16) Juries had long acted to resolve various civil disputes, especially claims about land, and they had for decades served as accusing bodies in criminal cases in the manner of modem grand juries. But not before 1220 did a jury sit in judgment of a criminal accused with the discretion either to acquit or to condemn.

The occasion of this sudden birth of trial by jury was the sudden death of trial by ordeal.(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him...

You will not see this line but it is needed. Take it out to see the background color beige disappear from the center. Surely there is a better way. Thinkity, thinkity

Copy and paste this in your Blog or Web page.

It will look like this.

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(18) but if the water repelled him and he floated, he was condemned. In the ordeal of hot iron, the accused walked barehanded with a hot iron bar. Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned.

Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned... But in 1215 the Church forbade priests to officiate at ordeals and suddenly stripped these rituals of their divine imprimatur.

Paragraph 2: This is the right side text. The width is 45 percent which will make the page fluid but I'm not minding all of the rules here. Just typing in what I think might work. The graceful way to do this is not clear. This demonstrates only that it can be done in our browser.

The use of a shim or a spacer.gif is considebeige a cheat by some but for this one to make sense to most people the invisible image is useful. It allows us to make the left column and the right column a fixed size. Best of all, it works. There are a number of considerations for this code. The first line of paragraphs are indented. The padding is adjusted for this font size.

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him;

Although the jury's origins lie hidden in Dark Ages rituals, we can trace the origins of the sort of jury that concerns us here--the criminal trial jury--with something like pinpoint accuracy: The first true criminal jury trial seems to have taken place at Westminster in 1220.(16) Juries had long acted to resolve various civil disputes, especially claims about land, and they had for decades served as accusing bodies in criminal cases in the manner of modem grand juries. But not before 1220 did a jury sit in judgment of a criminal accused with the discretion either to acquit or to condemn.

The occasion of this sudden birth of trial by jury was the sudden death of trial by ordeal.(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him...

You will not see this line but it is needed. Take it out to see the background color beige disappear from the center. Surely there is a better way. Thinkity, thinkity

With the borders on

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(18) but if the water repelled him and he floated, he was condemned. In the ordeal of hot iron, the accused walked barehanded with a hot iron bar. Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned.

Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned... But in 1215 the Church forbade priests to officiate at ordeals and suddenly stripped these rituals of their divine imprimatur.

Paragraph 2: This is the right side text. The width is 45 percent which will make the page fluid but I'm not minding all of the rules here. Just typing in what I think might work. The graceful way to do this is not clear. This demonstrates only that it can be done in our browser.

The use of a shim or a spacer.gif is considebeige a cheat by some but for this one to make sense to most people the invisible image is useful. It allows us to make the left column and the right column a fixed size. Best of all, it works. There are a number of considerations for this code. The first line of paragraphs are indented. The padding is adjusted for this font size.

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him;

Although the jury's origins lie hidden in Dark Ages rituals, we can trace the origins of the sort of jury that concerns us here--the criminal trial jury--with something like pinpoint accuracy: The first true criminal jury trial seems to have taken place at Westminster in 1220.(16) Juries had long acted to resolve various civil disputes, especially claims about land, and they had for decades served as accusing bodies in criminal cases in the manner of modem grand juries. But not before 1220 did a jury sit in judgment of a criminal accused with the discretion either to acquit or to condemn.

The occasion of this sudden birth of trial by jury was the sudden death of trial by ordeal.(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him...

You will not see this line but it is needed. Take it out to see the background color beige disappear from the center. Surely there is a better way. Thinkity, thinkity
Medieval Law Book Format
#  Last Updated:  Friday, February 04, 2005
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Change the Border Around a Picture

CSS Border Style

Some of the templates are styled to automatically put a border around an image or picture. The CSS style code is between the <STYLE> and </STYLE> in the <HEAD> section of the template or in your external style sheet.

The CSS style to automatically border images looks something like this.

.post img {
  padding:4px;
  border:1px solid #ddd;
  }

Or like this.


.img {
  padding:4px;
  border:1px solid #ddd;
  }

With this style in place every time you insert an image it will automatically have a border that looks like this.

You can remove the code if you don't want the automatic border. Or you can style the border to suit your taste.

What does that CSS style code do?


.img {
padding:4px;
border:1px solid #ddd;
}

  1. img refers to any image on the page.
  2. padding:4px; is the amount of space you want between the image and the border.
  3. border:1px solid #ddd is a 1 pixel solid border colored #ddd.

You can change the padding and the border style.

Solid Black Border
.img {
padding:0px;
border:1px solid black;
}

Now your images will all have no padding between the image and the border and the border will be solid black.

No Border

Change the padding and the border to 0. That will let you leave the code in for future use.

.img {
padding:0px;
border:0px solid black;
}
Gold Colored Border
.img {
padding:5px;
border:1px solid gold;
}
Orange Dotted Border
.img {
padding:5px;
border:2px dotted orange;
}
Matted Border Gold
.img {
padding:5px;
background:gold;
border:1px solid black;
}
Matted Border Silver
.img {
padding:5px;
background:silver;
border:1px solid black;
}

Change the Border with Inline Style

If you don't want to change your CSS style sheet you can change the border around any image with Inline Style.

Thin border with 4 pixel padding

Copy and paste this in your Blog or Web page.

It will look like this.

Dashed 1 pixel black border

Copy and paste this in your Blog or Web page.

It will look like this.

Gold matte with solid black border

Copy and paste this in your Blog or Web page.

It will look like this.

Change the image name to your image name, or use it as it is (image included). More named colors are in the Color Chart.


#  Last Updated:  Tuesday, February 01, 2005
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Little Boxes

If you landed here looking for layout template boxes go to The NoodleIncident Box Lesson Tutorial.

Just click on a box for a one-column, two-column, three-column and more layout technique. The full CSS is included for each. Very simple.

LIttle Boxes
#  Last Updated:  Saturday, November 06, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Polaroid Picture Borders
CSS Inline Style

Combining Borders and Text Overlay
Noded is posting photographs with a Polaroid style border. The border looks something like this.


Image by TypoGenerator

Copy and paste this in your Blog or Web page.

It will look like this.


Image by TypoGenerator

The code above was tested in IE 5.5, IE 6.0, and Mozilla Firefox 6.0 It should work in all browsers, if you don't see a Polaroid looking border in your browser please leave a message in the comments.

Polaroid Picture Borders
CSS Style Sheet

CSS Style for Polaroid Border

For one-time or occasional use CSS Inline Style works fine. If you want to reuse the Polaroid effect you can add a style to your external style sheet or in the HEAD section of your page.

We used an image that is the same size as a Polaroid, but if you look at Noded you will see that the borders work well on varying image sizes. The trick was to use negative spacing to move the text Image by TypoGenerator up inside the border.

Where do you put the style code? If you are using a template look for the <style type="text/css"> and put the code below it. Noded added a class named polaroid to the style sheet for easy reference. The style looks something like this.

CSS Style Sheet Code

To reference polaroid and polaroidtext type this in your Blog or Web page.

Code to type in your Blog or Web page

It will look like this.

Image Made at TypoGenerator

More Picture Border Styles

Polaroid Picture Borders
#  Last Updated:  Wednesday, August 18, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

White Borders Around Pictures

This is our blogging friend Dipta who lives in Indonesia. He posts interesting pictures and says today's post is about the holiday season Eid Mubarak. We borrowed Dipta's simple table and pictures. He uses a defined width and height combined with white borders around the pictures to create visual white space.

Copy and paste this in your Blog or Web page.

It will look like this.

Pictures:
images/tnsholat1.jpg
images/tnsholat2.jpg
images/tnsholat3.jpg

  1. Change the name of the pictures.
  2. Change the TABLE bordercolor="#ACCAE1" (light-blue) to match your picture.
  3. Adjust the TABLE width="320" and height="150" to fit your pictures.
  4. The border: 3px solid #FFFFFF is a 3 pixel solid white (#FFFFFF) border.
CSS White Borders Around Pictures
#  Last Updated:  Monday, July 26, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Two-Color CSS Box
Going for the Gold

BEFORE ANYONE DID ANYTHING,
ELVIS
DID EVERYTHING

The Color Gold

Just a few days ago we were posting a box about Elvis. The intent was to render the color Gold. Here is our box using the named color Gold.


BEFORE  ANYONE  DID  ANYTHING,
ELVIS 
   DID   EVERYTHING

Copy and paste this code in your Blog or Web page.

It will look like this.

BEFORE ANYONE DID ANYTHING,
ELVIS
DID EVERYTHING


The Color Gold in Hex #CCCD94

The Gold color we wanted is more like the hex color #CCCD94. So let's try it here. Change the backgound-color:gold; to the hexadecimal color background-color:'#CCCD94'.

BEFORE ANYONE DID ANYTHING,
ELVIS
DID EVERYTHING

Copy and paste this in your Blog or Web page.

It will look like this.

BEFORE ANYONE DID ANYTHING,
ELVIS
DID EVERYTHING
Two-Color Presley Box
#  Last Updated:  Tuesday, July 20, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

CSS Borders and Mattes
CSS White Matte Around Pictures

For this image we want a white matte 3 pixels wide around the picture, and then a black border that looks like a picture frame.

  1. First we put a white border around the image by adding style="border: 3px solid white" to the IMG tag. We can't actually see the white border yet since our background is white.
  2. We add a div with a black border that looks like a picture frame. And just because we wanted to we added another div to center the image on the page. We worked from the inside out.

Copy and paste this in your Blog or Web page.

It will look like this.

Our image is 300 pixels wide. We used a width of 306 for the black outside border.

CSS White Matte Around Pictures
#  Last Updated:  Tuesday, June 08, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

CSS Gold Matte Around Pictures

1. Picture Matted and Framed, Centered

Copy and paste this in your Blog or Web page.

It will look like this (image included).

This image is 300 pixels wide. We added a DIV that is 312 pixels wide with a gold background and a black border. Keep it as it is or change the image name, width, and height.

  • Image name is http://www.mandarindesign.com/bannerblank1.gif
  • Gold matte 6 pixels wide added to IMG tag.
  • Background on DIV is gold background:gold.
  • Black solid border on DIV.
  • Centered using margin:0px auto;

2. Picture Matted and Framed, not Centered

Copy and paste this in your Blog or Web page.

It will look like this (image included).

This image is 300 pixels wide. We used a width of 312 pixels for the black outside border.

CSS Gold Matte Around Pictures
#  Last Updated:  Monday, June 07, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Matted Style Border Gold: Float Left

This image with a frame and matte is coded for floating an image to the left with a margin of 15 pixels between the image and the text. You can copy the code (image included) and use it as it is. Or copy the code and then insert the name of your image and the width and height of your image. The rest of the code doesn't need to be changed. But, because it is designed for floating the image to the left you need enough text typed in so that it continues to the bottom level of the image. I'm just typing in words here so that it will fill and then let the text spill around the bottom of the image. If you don't have enough text it may look OK, and it may overlap. This is one to copy and then fiddle with to get it perfect for your page. This is spread wide here so we have to enter quite a bit of text to make it to the bottom of the image that is 137 pixels high. How much text is enough? It depends.

Copy and paste this in your Blog or Web page.

It will look like this.

Your text can go here for a wrapped look. There's probably a better example already here but this one might be close to what you are looking for Claude. The span is the magic. The rest is just text. We can put text above the span and below the span.And the rest of Your Text Can Go Here. And let's keep typing so that we see the clean wrap.

CSS Boxes and Borders
There's more about CSS Borders and Mattes with copy and paste centered borders using white mattes and other colors. This example uses the span tag with padding to put the gold around the image and then a solid black border around the image. The code changes with the mood. There are many different methods for achieving the same result. It renders the same in IE as it does in Mozilla (today).

All that says (above) is copy and paste this span code anywhere you want the image to appear.

Copy and paste this in your Blog or Web page.


You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Easy CSS Box Model

In CSS everything is a box. You don't have to define a margin, a border, or padding but it is always there waiting to be defined if you want to be able to see it.

The div for this box looks like this
<div style="margin:20px;width:300px;border:10px solid black;background:gold;padding:10px;">

The margin around the box is defined as margin:20px;, a 20px margin for all four sides of the box. The margin is used for positioning and doesn't have a color.
                Margin (no color)
                 Border
                 Padding
                 Box Contents

This is the content area where we can put text or images. The padding of 10px around all four sides allows space between this text and the black border.

From the outside working in, a box is made up of a margin, then a border, then the padding, and in the center the content.


Copy and paste this in your Blog or Web page.

It will look like this.

This is the content area where we can put text or images. The padding of 10px around all four sides allows space between this text and the black border.

We are demonstrating a block level box using a DIV but you can use the P or Table. And you can put boxes inside of boxes. While testing you might want to put a border around your box so that you can see what the code is doing.

Inline boxes that use the SPAN or other tags work the same.

It gets confusing when you start positioning the boxes using position:absolute and float. For more details see the W3.org Box Model.

     _________________________________________
    |                                         |
    |           MARGIN (TRANSPARENT)          |
    |           margin:20px;                  |
    |   ___________________________________   |
    |  |                                   |  |
    |  |        BORDER                     |  |
    |  |        border:10px solid black;   |  | 
    |  |   _____________________________   |  |
    |  |  |                             |  |  |
    |  |  |     PADDING                 |  |  |
    |  |  |     padding:10px;           |  |  | 
    |  |  |   _____________________     |  |  |
    |  |  |  |                     |    |  |  |
    |  |  |  |  CONTENT            |    |  |  |
    |  |  |  |                     |    |  |  |
    |  |  |  |  This is the        |    |  |  |
    |  |  |  |  content area       |    |  |  |
    |  |  |  |  where we put       |    |  |  |
    |  |  |  |  text and images    |    |  |  |
    |  |  |  |                     |    |  |  |
    |  |  |  |  content            |    |  |  |
    |  |  |  |_____________________|    |  |  |
    |  |  |                             |  |  |
    |  |  |     padding                 |  |  |
    |  |  |     padding:10px;           |  |  | 
    |  |  |_____________________________|  |  |
    |  |                                   |  |
    |  |        border                     |  |
    |  |        border:10px solid black;   |  | 
    |  |___________________________________|  | 
    |                                         | 
    |           margin:20px;                  |
    |_________________________________________|


Easy Box Model
#  Last Updated:  Wednesday, May 26, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Double Border

This small image has a double border. Add style="border:4px double black" to the IMG tag to add a double border to the image.

Copy and paste (or type) this is your Blog or Web page.

It will look like this.

More...


style="border:4px double purple"



style="border:4px double black"



style="border:2pt double black"



style="border:2pt double maroon"

Double Border Around Image
#  Last Updated:  Wednesday, May 05, 2004
You are viewing one post
VIEW ALL    BACK TO TOP

Boxes and Borders Index of Boxes and Borders
"For People Who Make Mistakes"...

Centered Box

1. How do you Center a Bordered Box?

Let the browser automatically calculate the left margin and the right margin with margin:0px auto;

A Centered Bordered Box

Copy and paste this in your blog or Web page.

It will look like this .


YOUR TEXT GOES HERE

&margin:0px auto;