|
|
Posted by Jonathan N. Little on 03/11/07 19:41
al jones wrote:
> I seem to get volunteered for odd stuff. This isn't that odd but I don't
> like what I've 'had' to do to get it to sort of lay out.
>
> URL: http://aljones.us/ab/bcm.html
>
> I'd like to do away with the table, but cannot find a way to lay out the
> three pictures - along with the heading that's found at the top of this
> page.
>
> Yes, I reallize there's a 'left over' picture from a previous attempt
> hanging in the background - that should go away if I (with help) can lay
> the header out correctly.
>
> Suggestions / guidance??
>
This will get you started:
<!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>Tableless</title>
<style type="text/css">
BODY {
margin: 0; padding: 0; line-height: 1.2;
color: #000; background-color: #fff;
}
#banner { margin: 0; padding: 0; height: 175px; width: 100%; }
#banner IMG, #banner H1 { float: left; }
#banner IMG.hands { padding: 40px 10px; }
#banner H1 EM { display: block; font-size: .75em; }
#banner H1 { width: 12em; text-align: center; margin-top: 2em; }
#banner H1 EM SPAN { color: #f00; }
#navbar {
margin: .5em; padding: 0; clear: both; float: left;
width: 10em; list-style: none;
color: #000; background-color: #5cb3ff;
}
#navbar LI { margin: 0; padding: .2em; }
#content { margin: 0 0 0 11em; padding: 1em; }
</style>
</head>
<body>
<div id="banner">
<img src="http://aljones.us/ab/images/header-lighthouse.jpg"
width="195" height="175" alt="Broken Chains Lighthouse Logo"</img>
<img class="hands" src="http://aljones.us/ab/images/handsleft.jpg"
width="63" height="95" alt="Left Hands">
<h1>Broken Chains Ministry <em>...finding <span>Christ in the
darkness</span></em></h1>
<img class="hands" src="http://aljones.us/ab/images/handsright.jpg"
width="63" height="95" alt="Right Hands">
</div>
<ul id="navbar">
<li>Links here</li>
<li>Links here</li>
<li>Links here</li>
<li>Links here</li>
<li>Links here</li>
<li>Links here</li>
</ul>
<div id="content">
<p>The rest of your page....</p>
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|