How do I get a double outline?

[OM2]

I want to have text or an image have a double outline.

I'm not sure how to do this.

I need to make sure that the outline is a certain distance away.

 

I would assume I would have a div with an outline that is inside another div that has an outline?

 

But how do I specify the distance?

 

Thanks.

 

 

OM

 

[Bongeh]

http://www.w3schools.com/Css/css_outline.asp

 

You don't actually need a div at all, use <p> as shown in the link for your double outline, and put padding on it in the css to make the outline a certain distance away.

[obsidian]

Try something like this for double outlines right on the border:

 

HTML:

<div class="image-holder">
  <img src="whatever.jpg" border="0" />
</div>

 

CSS:

.image-holder {
  border: 1px solid #000000;
  padding: 2px;
  float: left;
}

.image-holder img {
  border: 1px solid #000000;
}

 

Notice that by changing the padding on your image-holder div, you can change the space between the borders. If you want to go with the double border and still have space around the image, you'll need to try something slightly more complex:

 

HTML

<div class="image-holder-out">
  <div class="image-holder-in">
    <img src="whatever.jpg" border="0" />
  </div>
</div>

 

CSS

.image-holder-out, .image-holder-in {
  border: 1px solid #000000;
  padding: 2px;
  float: left;
}

 

You may also be able to get your additional space by adding padding to the image itself, but this can get a bit hairy in some browsers.

 

Hope this helps!

[obsidian]

http://www.w3schools.com/Css/css_outline.asp

 

You don't actually need a div at all, use <p> as shown in the link for your double outline, and put padding on it in the css to make the outline a certain distance away.

 

This does not give you any control over the space between the borders, though.

[Bongeh]

http://www.w3schools.com/Css/css_outline.asp

 

You don't actually need a div at all, use <p> as shown in the link for your double outline, and put padding on it in the css to make the outline a certain distance away.

 

This does not give you any control over the space between the borders, though.

 

True enough, it also doesn't work in IE I think. Sorry OM2!

[OM2]

Try something like this for double outlines right on the border:

 

HTML:

<div class="image-holder">
  <img src="whatever.jpg" border="0" />
</div>

 

CSS:

.image-holder {
  border: 1px solid #000000;
  padding: 2px;
  float: left;
}

.image-holder img {
  border: 1px solid #000000;
}

 

Notice that by changing the padding on your image-holder div, you can change the space between the borders. If you want to go with the double border and still have space around the image, you'll need to try something slightly more complex:

 

HTML

<div class="image-holder-out">
  <div class="image-holder-in">
    <img src="whatever.jpg" border="0" />
  </div>
</div>

 

CSS

.image-holder-out, .image-holder-in {
  border: 1px solid #000000;
  padding: 2px;
  float: left;
}

 

You may also be able to get your additional space by adding padding to the image itself, but this can get a bit hairy in some browsers.

 

Hope this helps!

 

thank u thank u thank u!

u really are a master coder.

works exactly how i wanted.