Test Drive this on IEx 8 guys (I had to use a different image from DOLPHIN because it was, erm . . . swimming away 
heh heh).
What I'd like to accomplish is a "plumping out" of the hilighting that occurs in the footer text. Any thoughts?
Thanks.
s
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>FONT STYLING with "STRICT" + <img style="display: BLOCK; . . .</title>
<!-- ======================================================================================== -->
<style type="text/css">
body {
background-image: url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
background-position: 50% 0;
font-family: helvetica, arial, sans-serif;
text-align: center; /* Center aligns inline objects. */
padding: 0;
margin: 70PX 0 50PX; /* Applies {margin-top: 70PX} and {margin-bottom: 50PX} to the top and bottom of the page. Zero's left and right side defaults. */
}
img {
display: block; /* eliminates extra white space beneath the image */
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; /* the {box-sizing: border-box} property includes the dimensions of the border with the image. */
margin: 0 auto; /* "auto" centers the image in its container */
}
.WRAPPER {
outline: 1PX solid magenta; /* show-and-tell testing. Delete whenever.... */
width: 64%; /* the WRAPPER div will expand to 90% of the width of the window or whatever percentage you choose. */
margin: 35PX auto 0PX;
}
.MUSHROOMS {
width: 80%; /* the image will expand to the width of the WRAPPER div or whatever percentage of it you choose. */
max-width: 600PX; /* you can assign a max-width here or in the .WRAPPER, if you wish. */
}
.LEAVES {
width: 80%;
max-width: 400PX;
}
.HILIGHT1 {
margin-top: 20PX;
margin-left: 24%;
margin-right: 24%;
width: 100%;
max-width: 552PX;
font-size: 14PX;
line-height: 16px;
color: RED; /* #444444 */
}
.HILIGHT2 {
background-color: WHITE;
margin-left: 24%;
margin-right: 24%;
width: 100%;
max-width: 552PX;
font-size: 10PX;
line-height: 12PX;
color: BLUE; /* #666666 */
}
</style>
<!-- ======================================================================================== -->
</head>
<body>
<!-- 1. MUSHROOMS -->
<div class="WRAPPER">
<img class="MUSHROOMS" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
</div>
<!-- 2. BORDER-PLAID (PINK) -->
<div style="text-align: center; margin-top: 35PX;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
<div>
<img style="display: BLOCK; max-width: 450PX; max-height: 450PX; margin: AUTO; width: 100%; padding: 25PX; border: 4PX dashed black; background-color: white;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 3. BORDER-ARCHWAY -->
<div style="text-align: center; margin-top: 35PX;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="margin-left: 18%; margin-right: 18%; text-align: CENTER; vertical-align: CENTER;">
<div>
<img style="display: BLOCK; max-width: 700PX; max-height: 509PX; margin: AUTO; width: 100%; border: 44PX RIDGE #BFBFBF;" src="http://www.fineliving.ro/wp-content/uploads/2012/11/vacanta_muntenegru1.jpg" alt="">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 4. FALL LEAVES -->
<div class="WRAPPER">
<img class="LEAVES" src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-LEAVES.jpg" alt="">
</div>
<!-- TESTING LINE-HEIGHT with HILIGHTING -->
<div class="HILIGHT1">
<span style="background-color: WHITE;">
XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</span>
</div>
<div class="HILIGHT2">
XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
XXX XXXXXXXX XXXX X XXXXXX
</div>
</body>
</html>
Originally Posted by John_Betong
@ronpat ;
Reply With Quote
nowhere else
Bookmarks