Forum Moderators: not2easy
img { border-width: 20px; } would do it, but it doesn't seem to work. My style sheet is very simple. I suspect I have some context issues. Would someone point out the error of my ways here? I'm obviously very new at this.
body { background-color: #F2F2F2; font-family: Times New Roman; font-size: 12pt; padding-left: 10%; padding-right: 10%; }
img { border-width: 20px; color: #F2F2F2; }
img { border: 20px solid #F2F2F2; }
1) The font-family: declaration in <body> is not valid. font-family: selections that include spaces, MUST be quoted. Also, it is best practice to end the <family-name> list with with the appropriate <generic-family> as a last resort fallback option.
{font-family: "Times New Roman", TimesNR, serif;}
W3C - Font Family [w3.org]
2) In this case, padding can probably be shorthanded to {padding: 0 10%;}
3) color: is a pointless property declaration to the <img> selector. There is no color: to render.
4) border-width: is not adequate. Declare:
{border: 20px solid #f2f2f2;}
~ ~ ~ This will push what is essentially a 20px; margin: all around the image. All around. Do you really want that?
~ ~ ~ You could match the background-color: and apply only to where it is really needed. ".....for text flow around....." suggests floated image?
~ ~ ~ ~ ~ ~ border-right: 20px solid #f2f2f2;
~ ~ ~ ~ ~ ~ I would bypass the border trick altogether, and set a class to the image and create space with margin:, as with the example below. There are other options. This is but one. Best choice, if there is a 'best', depends upon how the <img> are being brought in with the HTML. If not floated, this would not be a good example (though still might work well). Depends upon the specific markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
background-color: #f2f2f2; font-family: "Times New Roman, serif"; font-size: 12pt; padding: 0 10%;
}
.sample-container img.left {
float: left; margin: 0 20px 0 0;
}
.sample-container img.right {
float: right; margin: 0 0 0 20px;
}
.sample-container {
margin: 10% auto; border: .3em solid #900; padding: .5em;
}
</style>
</head>
<body>
<div class="sample-container">
<p>
<img class="left" style="width: 200px; height:200px;" src="aaa.jpg" alt="" title="" />
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
<img class="right" style="width: 200px; height:200px;" src="aaa.jpg" alt="" title="" />
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<!--##########
I would like to control the border width of all images on a site to provide a 'wider birth' for text flow around images. I had thought something likeimg { border-width: 20px; } would do it, but it doesn't seem to work. My style sheet is very simple. I suspect I have some context issues. Would someone point out the error of my ways here? I'm obviously very new at this.
body { background-color: #F2F2F2; font-family: Times New Roman; font-size: 12pt; padding-left: 10%; padding-right:
10%; }
img { border-width: 20px; color: #F2F2F2; }
-->
</body>
</html>
