...

View Full Version : Shell Problem



WillisTi
12-28-2005, 06:59 PM
Im in the process of designing a XHTML and CSS site but im having a problem with my shell (should i call it 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:

<!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>
<table id='shell' width='770' cellpadding='0' cellspacing='0' border='0' align='center'><tr><td valign='top' align='left'><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 &copy; 2005.</div>


</body>
</html>
This is my CSS for the shell and the header:


#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

_Aerospace_Eng_
12-28-2005, 09:40 PM
Use a div instead, change this

<table id='shell' width='770' cellpadding='0' cellspacing='0' border='0' align='center'><tr><td valign='top' align='left'>
to this

<body>
<div id='shell'>
then change this

<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 &copy; 2005.</div>


</body>
</html>
to this

<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 &copy; 2005.</div>
</div>

</body>
</html>
You never seemed to close your table either but that doesn't matter now. Change your CSS from this

#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;

}
to this

#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;

}
No need to set a width on a block level element like a div, the div will expand to fit the width of its container. Also the way you had your height set would mean that the page would always be 100% height in all browsers, using min-height for the browsers that support it and using the * html hack for IE you are able to fool IE because it ignores the height but will still set a 100% height if there isn't enough content.

WillisTi
12-28-2005, 10:34 PM
Thanks Aerospace all works and looks fine and now validates XHTML Transitional. Thanks for the explanation too, much appreciated.

Should I change the name “shell” to “container”?

Im trying to make the code accessible, semantically correct and standards compliant do you think I have achieved that? If not, what could be done to improve it?

Thanks

Ranger56
12-28-2005, 10:36 PM
Thanks Aerospace all works and looks fine and now validates XHTML Transitional. Thanks for the explanation too, much appreciated.

Should I change the name “shell” to “container”?

Im trying to make the code accessible, semantically correct and standards compliant do you think I have achieved that? If not, what could be done to improve it?

Thanks


I don't think that the id of the div matters all too much. Although I see container much more often.

WillisTi
12-28-2005, 10:46 PM
I always like to keep to the "standards" so i will change it to container.

_Aerospace_Eng_
12-28-2005, 10:46 PM
As Ranger said the id doesn't matter though container is more common. If you really are worried about semantics change your navigation to an ordered or unordered list since a navigation usually is a list of links. Move your inline CSS to a stylesheet. You can also get rid of border="0" and use

a img {
border:0;
}
instead, this will take care of all images that are linked.

WillisTi
12-28-2005, 11:08 PM
Thanks i'll sort that out. Quick question about adding a float-right-footer. Am I doing this right? The text indentation does not seem to work for the footer and the float-right-footer goes right at the end of the line and not indented.


img src="footer2.gif" alt="" width="758" height="7" style="margin-top:3px;" />
<div id='footer'> <div class="float-right-footer"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">Valid CSS</a><span class="dash"> | </span><a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid XHTML</a></div>
<a href='index.htm' class='footerlink'>home</a> | <a href='sitemap.htm' class='footerlink'>site map</a></div>
</div>

</body>
</html>



#footer {
text-indent: 6px;
margin-bottom: 5px;
margin-top: 5px;
height: 16px;
background-color: #fff;
color: #999;
font: 10px/12px tahoma, verdana, helvetica, sans-serif;
}

.float-right-footer {
text-align: right;
float: right;
height:16px;
padding: 0;
}

.footerlink {
color:#999;
text-decoration:none;
font-size:10px;
font-weight:normal;
}

.footerlink:hover {
color:#666;
text-decoration:underline;
font-size:10px;
}

Thanks

_Aerospace_Eng_
12-28-2005, 11:22 PM
Why would you be floating that div to the right in the first place? There is no need for the 2nd div in the footer, just use the footer div place the links directly in it and use padding-left:6px and use text-align:right; to get the links to the right. Setting a height to the footer may not be a good idea because people do resize their text and the text will overflow out of the footer div. No need to add a class to the links either. Use CSS for its main purpose cascading.

#footer a, #footer a:link, #footer a:visited {
color:#999;
background:none;
text-decoration:none;
font-size:10px;
}
#footer a:hover, #footer a:active, #footer a:focus {
color:#666666;
background:none;
text-decoration:underline;
}

WillisTi
12-28-2005, 11:29 PM
oh ok. I assumed i needed to float the div.

Thanks for the explanation.

_Aerospace_Eng_
12-28-2005, 11:39 PM
The next step is getting your CSS to validate (http://jigsaw.w3.org/css-validator/).

WillisTi
12-28-2005, 11:51 PM
Yeah just get the usual warnings "You have no background-color with your color". I'll get that sorted out now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum