PDA

Click to See Complete Forum and Search --> : CSS Page

Dysan
02-18-2008, 08:23 PM
Hi,

Using CSS, whats the best way to create the page found in the following image?:

http://www.freewebs.com/ticstacs/image.bmp
NogDog
02-18-2008, 09:28 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Test Layout</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 10px 15px;
background-color:white;
font: 90% arial, helvetica, sans-serif;
}
#container {
background-color: black;
width: 600px;
margin:0 auto;
padding: 0 0 0 150px;
border: solid 1px black;
}
#content {
margin: 0;
padding: 60px 0 0 0;
background: transparent url(http://www.charles-reace.com/image/red_bg.png)
repeat-x 0 0;
}
#text {
background-color: white;
width: 290px;
float: right;
margin: 0 0 0 0;
padding: 5px;
}
#image {
background-color: white;
width: 300px;
margin: 0;
padding: 0;
float:left;
}
#image img { display: block; }
.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div><!-- text -->
<div id="image">
<img src="http://www.charles-reace.com/Photos/noggin3.jpg" alt="NogDog"
width="300" height="231">
</div><!-- image -->
</div><!-- content -->
<div class="clear"></div>
</div><!-- container -->
</body>
</html>

See result at http://www.charles-reace.com/test/dysan.html
Dysan
02-19-2008, 08:30 AM
How would you do it, without using an image for the red background?
NogDog
02-19-2008, 11:29 AM
How would you do it, without using an image for the red background?
I wouldn't. :p

I suppose you could create another DIV element with a fixed height and the desired background color; but I dislike creating more HTML elements than necessary, as you then start using what should be semantically meaningful mark-up purely for visual presentation purposes, which makes your mark-up more closely coupled with the current visual presentation (which may change over time) than with the meaning and structure of the document.