Im pretty new to the whole XHTML/CSS thing but im giving it a go. Im in the process of designing a XHTML and CSS site but im having a problem with my shell (is it called a container?) in that I need to use a table or otherwise I cant seem to center the layout. Wondering if anyone would be able to help me out with this so I no longer need to use a table? Ive highlighted the part in bold
This is my code:
This is my CSS for the shell and the header:
thanks
This is my code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="author" content=" " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<title> Welcome </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
[B]<table id='shell' width='770' cellpadding='0' cellspacing='0' border='0' align='center'><tr><td valign='top' align='left'><[/B]div id='head'></div>
<img src='indexheader.jpg' width='758' height='215' border='0' alt='Contemporary Multimedia - Home' />
<div id='content'><div class="navigationBorder" align="center">
<a href="index.htm" class="sub-nav">Home</a>
<a href="about.htm" class="main-nav">About Us</a>
<a href="services.htm" class="main-nav">Services</a>
<a href="portfolio.htm" class="main-nav">Portfolio</a>
<a href="contact.htm" class="main-nav">Contact</a>
</div>
<div class='body'>
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation </p>
<img src="hline.gif" alt="dotted line" width="410" height="1" border="0" />
<h2>Exposure </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation <a href="portfolio.htm">effectively designed</a> web site should even allow you to cut back on some of your other advertising costs.</p>
<img src="hline.gif" alt="dotted line" width="410" height="1" border="0" />
<h2>Solutions</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation <a href="contact.htm">contact us</a>.</p>
<div class='rightcontent'>
<p class="rightheading"><a href="#">Latest News</a></p>
<p class="right"><a href="#"></a>New site launched. Our site has been completely overhauled and redesigned.</p>
<br />
<p class="rightheading"><a href="portfolio.htm">Recent Projects </a></p>
<p class="right"><a href="portfolio.htm" class="rightlink">Project One</a><br />
<a href="portfolio.htm" class="rightlink">Project Two</a><br />
<a href="portfolio.htm" class="rightlink">Project Three</a><br />
<a href="portfolio.htm" class="rightlink">Project Four</a><br />
</p>
<p class="right">See our full <a href="portfolio.htm">portfolio here</a><br /> <br /> </p>
<p class="rightheading"><a href="portfolio.htm">Contact</a></p>
<p class="right">47 Court Farm Road<br />
Longwell Green <br />
Bristol <br />
BS30 9AD <br />
07970 298623 <br />
<br /></p>
</div></div>
</div>
<img src="footer2.gif" alt="" width="758" height="7" border="0" style="margin-top:3px;" />
<div id='footer'>
<a href='index.htm' class='footerlink'>home</a> | <a href='hhh.htm class='footerlink'>site map</a> | <a href='/' class='footlink'>valid xhtml </a> | <a href='/' class='footerlink'>valid css </a> | copyright ยฉ 2005.</div>
</body>
</html>
Code:
#shell {
background-color: #fff;
min-height: 100%;
height: 100%;
width: 758px;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
#head {
background-image:url("logo.gif") ;
height: 77px;
width: 758px;
color:#CF242A;
}
