Unstoppable Domains

Alignment problem

Spaceship Spaceship
Watch

WillisTi

Established Member
Impact
1
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:
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>
This is my CSS for the shell and the header:

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;

		}
thanks
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
I think you'll find it's rather easy with a div:

HTML
Code:
<div id="container">
content
</div>

CSS
Code:
#container {
width: 760px; /*couldn't tell how wide you wanted it judging by your code*/
margin: 0 auto; /*The value "0" applies to the top and bottom, auto is for left and right sides*/
}
 
0
•••
Yeah figured out the css now. I had to do this:

Code:
#shell {
			background-color: #fff;
			min-height:		100%;
			width:			758px;
                        margin:auto;
			border-left:		1px solid #CCC;
			border-right:		1px solid #CCC;
		}
* html #shell {
			height:			100%;
                  }

		#head {
			background-image:url("logo.gif") ;
			height:			77px;
			color:#CF242A;

		}
 
0
•••
I dont know why you bother using a table when a div will sort out your problem.
 
0
•••
*whispers* Because he didn't know how to do it with a div. ;)
 
0
•••
Rowan W said:
I think you'll find it's rather easy with a div:

HTML
Code:
<div id="container">
content
</div>

CSS
Code:
#container {
width: 760px; /*couldn't tell how wide you wanted it judging by your code*/
margin: 0 auto; /*The value "0" applies to the top and bottom, auto is for left and right sides*/
}
I learn something from your post. Centering content container has been a problem for me. Rep given.
 
0
•••
Dynadot โ€” .com Registration $8.99Dynadot โ€” .com Registration $8.99
Unstoppable Domains
Domain Recover
DomainEasy โ€” Zero Commission
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back