Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: Shell Problem

  1. #1
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shell Problem

    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:
    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:

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Use a div instead, change this
    Code:
    <table id='shell' width='770' cellpadding='0' cellspacing='0' border='0' align='center'><tr><td valign='top' align='left'>
    to this
    Code:
    <body>
    <div id='shell'>
    then change this
    Code:
    <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
    Code:
    <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
    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;
    
    		}
    to 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;
    
    		}
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WillisTi
    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.

  • #5
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I always like to keep to the "standards" so i will change it to container.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    a img {
    border:0;
    }
    instead, this will take care of all images that are linked.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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>

    Code:
    #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

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    #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;
    }
    Last edited by _Aerospace_Eng_; 12-29-2005 at 12:38 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh ok. I assumed i needed to float the div.

    Thanks for the explanation.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The next step is getting your CSS to validate.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah just get the usual warnings "You have no background-color with your color". I'll get that sorted out now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •