Forum Moderators: not2easy
Here's the code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fitness</title>
<style type="text/css" media="screen">
@import 'includes/styles.css';
</style>
</head>
<body>
<div id="container">
<div id="left-column"> <a href="#"><img src="images/logo_global.gif" alt="Fitness For All" width="285" height="176" /></a>
<div id="left-content">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li style="border-bottom: none;"><a href="#">The Facility</a></li>
</ul>
</div>
<div id="teaser_buttons"><a href="#"><img src="images/btn_assessment.gif" alt="Health and Fitness Assessment. Click here to start yours." width="248" height="95" /></a></div>
</div>
</div>
<div id="right-column">
<div id="topnav"><span id="topnav_btns"><a href="#"><img src="images/btn_topnav_home.gif" alt="Home" width="63" height="80" /></a><a href="#"><img src="images/btn_topnav_contacts.gif" alt="Contacts" width="72" height="80" /></a></span></div>
<img src="images/teaser_bg.jpg" alt="Jane and John Doe" width="490" height="213" />
<div id="right-content">
<h1>A Fitness and Wellness Centre . . . </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<div id="footer"><a href="#">Home</a> ¦ <a href="#">About Us</a> ¦ <a href="#">Our Services</a> ¦ <a href="#">The Facility</a> ¦ <a href="#">Contacts</a><br />
copyright © 2006 ¦ all rights reserved ¦ design by:<a href="http://www.example.com" title="Example Media">Example Media</a></div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background: #ffffff url(../images/bg_global.gif) repeat-x;
color: #000000;
margin: 0px;
text-align: center; }img {
border-style: none;
display:block; }
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 110%;
font-weight: normal;
letter-spacing: -1px;
color: #000000;
display: block;
background: #efefef url(../images/bg_hdr.gif) right no-repeat;
padding: 8px;
border-top: 1px solid #cccccc; }
#container {
margin: 0 auto;
width: 775px;
text-align: left; }
#left-column {
margin: 0px;
float: left;
width: 285px; }
#left-content {
font-family: Georgia, "Times New Roman", Times, serif;
text-align: left;
padding: 0px;
margin: 0px 0 0 31px;
width: 248px; }
#navcontainer {
margin: 0;
padding: 0; }
#navlist {
font-size: 140%;
text-align: center;
letter-spacing: -1px;
padding-left: 0;
margin: 25px 0 25px 0;
width: 248px; }
#navlist li {
border-bottom: 1px solid #efefef;
list-style: none;
margin: 0;
line-height: 40px;
font-variant: small-caps;
padding: 1px 0 1px 0; }
#navlist li a:hover {
display: block;
color: #333333;
background: #f5d98c url(../images/bg_navbuttons.gif) no-repeat center; }
#navlist li a {
color: #660066;
background-color: #ffffff;
display: block;
width: 248px;
text-decoration: none; }
#right-column {
float: right;
width: 490px; }
#topnav {
width: 490px;
height: 80px;
color: #000000;
background: #ffffff url(../images/bg_topnav.gif) no-repeat; }
#topnav_btns {
float: right;
text-align: right; }
#right-content p {
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.3em;
font-size: 90%;
color: #000000;
background-color: #ffffff;
text-align: justify; }
#right-content {
margin: 0px 0 0 0;
padding: 8px 5px 25px 10px; }
#footer {
display: block;
background: #efefef;
color: #777777;
margin: 0 0 35px 0;
line-height: 20px;
padding: 8px 12px 8px 8px;
border-top: 1px solid #cccccc;
text-align: right;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif ;
font-size: 65%; }
#footer a {
background: #efefef;
color: #663366;
padding: 2px; }
#footer a:hover {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
text-decoration: none;
color: #ff0000; }
Thanks in advance for any help.
[edited by: DrDoc at 2:44 am (utc) on Mar. 19, 2006]
[edit reason] examplified [/edit]
Please post your code using [quote] and [/quote].
No need to post your CSS as a seperate file when you can put it in the head of the file.
Please post the names of the images that you're trying to get to work and after you respond I'll take a look at it.
John
The images I'm trying to get aligned properly are btn_topnav_home.gif and btn_topnav_contact.gif :
<div id="topnav"><span id="topnav_btns"><a href="#"><img src="images/btn_topnav_home.gif" alt="Home" width="63" height="80" /></a><a href="#"><img src="images/btn_topnav_contacts.gif" alt="Contacts" width="72" height="80" /></a></span></div>
Thanks.
<div id="topnav">
<span id="topnav_btns">
<a href="#"><img src="1.jpg" alt="Home" width="63" height="80" style="float: left;" /></a>
<a href="#"><img src="2.jpg" alt="Contacts" width="72" height="80" style="float: left;" /></a>
</span>
</div>
Just apply the float attribute and the left/right value.
John
