T
Ted
Hi,
I've started playing with html pages with no tables. My goal is a
completely
tableless layout. I've read on some pages on how to do this, but I'm having
trouble with a couple of things.
1. I want the page to be a width of 800 and centered on the page. I've
done
this by wrapping everything in a div and setting align = "center", but
that seems
to center everything in the sub divs as well.
2. I want to have two divs laid out side by side, like a portal. I've
tried the float: left;
in a different css tag, but I can't seem to get these two divs to lay
out side by side.
The gist of the look and feel I want is like msn.com. I've looked at their
source and
css file and can't seem to figure out what they do to make it work.
I put up some sample code here:
http://www.geocities.com/ted_jones5791113/index.html
geocities puts it's own stuff in it. Here is the source of my html and css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<div class="pageborder">
<div class="header">Page Title</div>
<div class="pageSectionTitle">Section Title Right</div>
<div class="pageSectionBody">
<li>Body Right</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Fusce dictum dictum mauris.</li>
<li>Sed ultricies pretium erat.</li>
<li>Sed sed metus ac sem mattis gravida.</li>
<li>Nam rutrum elementum diam.</li>
<li>Nullam at lorem et lectus mollis imperdiet.</li>
<li>Vivamus convallis volutpat ante.</li>
<li>Nam volutpat nunc tincidunt arcu.</li>
</div>
<div class="pageSectionTitle">Section Title Left</div>
<div class="pageSectionBody">
<li>Body Left</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Fusce dictum dictum mauris.</li>
<li>Sed ultricies pretium erat.</li>
<li>Sed sed metus ac sem mattis gravida.</li>
<li>Nam rutrum elementum diam.</li>
<li>Nullam at lorem et lectus mollis imperdiet.</li>
<li>Vivamus convallis volutpat ante.</li>
<li>Nam volutpat nunc tincidunt arcu.</li>
</div>
</div><!--pageborder-->
</div>
</body>
</html>
div.pageborder
{
border: 1px solid #0033FF;
width: 800px;
padding: 2px;
margin-left: auto;
margin-right: auto;
}
div.header
{
background-color : #0066ff;
border: 1px solid #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
width: 798px;
}
div.pageSectionTitle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px solid #0099FF;
width: 300px;
color: #0000FF;
background-color: #E2EAF8;
margin-top: 2px;
margin-bottom: 0px;
font-weight: bold;
padding: 2px;
text-align: left;
}
div.pageSectionBody
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 300px;
margin-top: 0px;
margin-bottom: 2px;
color: #0000FF;
border-top: 0px solid #0099FF;
border-right: 1px solid #0099FF;
border-bottom: 1px solid #0099FF;
border-left: 1px solid #0099FF;
text-align: left;
padding: 2px;
}
Any tips would be appreciated.
Thanks!
-TJ
I've started playing with html pages with no tables. My goal is a
completely
tableless layout. I've read on some pages on how to do this, but I'm having
trouble with a couple of things.
1. I want the page to be a width of 800 and centered on the page. I've
done
this by wrapping everything in a div and setting align = "center", but
that seems
to center everything in the sub divs as well.
2. I want to have two divs laid out side by side, like a portal. I've
tried the float: left;
in a different css tag, but I can't seem to get these two divs to lay
out side by side.
The gist of the look and feel I want is like msn.com. I've looked at their
source and
css file and can't seem to figure out what they do to make it work.
I put up some sample code here:
http://www.geocities.com/ted_jones5791113/index.html
geocities puts it's own stuff in it. Here is the source of my html and css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<div class="pageborder">
<div class="header">Page Title</div>
<div class="pageSectionTitle">Section Title Right</div>
<div class="pageSectionBody">
<li>Body Right</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Fusce dictum dictum mauris.</li>
<li>Sed ultricies pretium erat.</li>
<li>Sed sed metus ac sem mattis gravida.</li>
<li>Nam rutrum elementum diam.</li>
<li>Nullam at lorem et lectus mollis imperdiet.</li>
<li>Vivamus convallis volutpat ante.</li>
<li>Nam volutpat nunc tincidunt arcu.</li>
</div>
<div class="pageSectionTitle">Section Title Left</div>
<div class="pageSectionBody">
<li>Body Left</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Fusce dictum dictum mauris.</li>
<li>Sed ultricies pretium erat.</li>
<li>Sed sed metus ac sem mattis gravida.</li>
<li>Nam rutrum elementum diam.</li>
<li>Nullam at lorem et lectus mollis imperdiet.</li>
<li>Vivamus convallis volutpat ante.</li>
<li>Nam volutpat nunc tincidunt arcu.</li>
</div>
</div><!--pageborder-->
</div>
</body>
</html>
div.pageborder
{
border: 1px solid #0033FF;
width: 800px;
padding: 2px;
margin-left: auto;
margin-right: auto;
}
div.header
{
background-color : #0066ff;
border: 1px solid #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
width: 798px;
}
div.pageSectionTitle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px solid #0099FF;
width: 300px;
color: #0000FF;
background-color: #E2EAF8;
margin-top: 2px;
margin-bottom: 0px;
font-weight: bold;
padding: 2px;
text-align: left;
}
div.pageSectionBody
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 300px;
margin-top: 0px;
margin-bottom: 2px;
color: #0000FF;
border-top: 0px solid #0099FF;
border-right: 1px solid #0099FF;
border-bottom: 1px solid #0099FF;
border-left: 1px solid #0099FF;
text-align: left;
padding: 2px;
}
Any tips would be appreciated.
Thanks!
-TJ
