|
|
Posted by Chris F.A. Johnson on 09/04/06 02:43
On 2006-09-04, Ted wrote:
> 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.
Do you mean you would avoid tables even for tabular data?
> 1. I want the page to be a width of 800
Why? That will be too wide for small windows and unnecessarily
small on large ones and may make the text hard to read.
If you want a margin on each side, use 'width: 80%;'.
> 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>
Why are you using list items outside a list?
> <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;
Before you do anything else, remove all 'width: XXpx;' and
font-size: XXpx; styling. Then use em instead of px, and only where
absolutely necessary.
> 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;
That size is illegible in my broswer unless I turn on a minimum
font size, in which case there is a good chance it will break your
layout.
> 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;
> }
See <http://cfaj.freeshell.org/testing/testx.html> for a stab at
what you want. It's not finished, but should get you started.
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
[Back to original message]
|