SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member Steven Audis's Avatar
    Join Date
    Nov 2003
    Location
    UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Converting a site from tables to layout CSS.

    Hi Everyone,

    I'm after some advice has how to convert a webpage that uses table's into a HTML page that has a style sheet for layout. If anyone knows of any programs which will help me achieve this task, I'm willing to give them a try.

    Currently I'm converting the page by creating DIV boxes that are a fixed size. I know that this approach has its limitations, especially when looking at it in different screen resolutions. Therefore I'm open to suggestions as to how much of the page should be converted. Do I leave the layout table and give them "id's" which would enable more control over there content.

    I'm reasonable new to the use of CSS for layout having being using CSS for some time to do the styling. I'm currently reading "Eric Meyer on CSS" by Eric Meyers and "Designing with web standards" by Jeffrey Zeldman. Both books are a must have and I recommend them to anyone who hasn't already purchased them.

    Any help would be most appreciated.

    Merry Christmas,

    Steven Audis.

  2. #2
    SitePoint Zealot HeatherID's Avatar
    Join Date
    Jun 2003
    Location
    Maine, USA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Steven Audis
    Hi Everyone,

    I'm after some advice has how to convert a webpage that uses table's into a HTML page that has a style sheet for layout. If anyone knows of any programs which will help me achieve this task, I'm willing to give them a try.

    Currently I'm converting the page by creating DIV boxes that are a fixed size. I know that this approach has its limitations, especially when looking at it in different screen resolutions. Therefore I'm open to suggestions as to how much of the page should be converted. Do I leave the layout table and give them "id's" which would enable more control over there content.

    I'm reasonable new to the use of CSS for layout having being using CSS for some time to do the styling. I'm currently reading "Eric Meyer on CSS" by Eric Meyers and "Designing with web standards" by Jeffrey Zeldman. Both books are a must have and I recommend them to anyone who hasn't already purchased them.

    Any help would be most appreciated.

    Merry Christmas,

    Steven Audis.
    Might sound like a shameless plug, but the Sitepoint book about table-less CSS is really quite good. I had been working with CSS for about a year before I got the book, and I've learned a lot, plus it's always great to have a refresher.

    As far as online resources, there are a ton of sites that can help:
    www.alistapart.com
    www.thenoodleincident.com
    www.csszengarden.com

    The trick is, take a layout thats already built, play around with some of the numbers in the CSS and figure out what they do, then apply it to the page you're modifying.

    Good luck!
    Heather

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We'd need to know a bit more about the page before we could give specific advice that would be of any use. Have you got a link to the page in question or some code so that the type of layout can be seen?

    First you will also have to make a decision whether you want to keep the layout the same or let css do what it's designed for. There are some table layouts that are hard (if not impossible) to achieve with css
    and vice versa.

    It all depends on the type of layout you have as to which method you choose. There is no specific way of designing a CSS layout. The usual way is to let as much of the page flow as possible and only absolutely place those elements that need to be placed. If you absolutely place everything then you will have a rigid layout that is hard to make fluid. This of course may be what you want.

    I don't know of any programmes to automate the task and even if there were I would be inclined to do it by hand anyway. This is the best way to learn and produces the most reliable code (when done properly) and also makes it easier to fix bugs and make changes.

    If you post a link to the page in question or provide some code then I could probably tell you the best way to go about the conversion.

    Paul

  4. #4
    SitePoint Member Steven Audis's Avatar
    Join Date
    Nov 2003
    Location
    UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Follow-up

    Thanks Heather and Paul,

    I'll look into the book you mentioned Heather. The main aim of moving over to HTML+CSS is to enable me to make changes relatively quickly and to a large number of sites.

    Here is one of the pages which I'm aiming to convert, please ignore the content in the middle of the page as the basic layout is used across most of the website:

    http://www.lincoln.ac.uk/prospectus.html

    The page has to be accessible across a large number of browsers and must take into account different screen resolutions. I know you can't guarantee that a page with HTML+CSS will work across a number of browsers, so it would be fair to say IE & Netscape 4+.

    Many thanks,

    Steven Audis.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    so it would be fair to say IE & Netscape 4+.
    Did you mean you want to support ie4 and netscape 4? If so then you should only use the basic styles for these browsers and import (using import) a more advanced stylesheet for other browsers.

    However it always amazes me that people still want to support these browsers which must have a usage of about 2% each but are quite happy to stick javascript code in their page which 10-15% of users have switched off or can't use. It seems like a case of priorities in the wrong place.

    However I know some institutions (such as universities) which should be leading the field are the worst offenders and have old browsers installed. So you do need to know your audience.

    I haven't had time to look at you page properly yet but it looks quite straightforward to me. I would just work from the top down trying to make as much flow as possible. Then place absolutely only those elements that really need to be. This will help to make the page more readable in older browesrs (although nothing is guaranteed and you will need to check in these browsers each step of the way.)

    You also need to consider whether you want to copy the fixed layout or make it a bit more friendly and fluid while you're at it.

    Hope that's a start (if I get a chance later I'll have another look at your page and give some specific info).

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's a quick idea of how it would all look in CSS.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="keywords here"  />
    <title>Prospectus Request</title>
    <meta name="description" content="Page description here" />
    <link rel="stylesheet" href="global/style/main.css" />
    <style type="text/css">
    p {font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 0.8em; font-style: normal;  } 
    .p2 {font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10pt; font-style: normal;  } 
    .space {font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 0.8em; font-style: normal;  line-height : 150%; } 
    li {font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10pt;} 
    ul {font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10pt;} 
    ol {font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10pt;}  
    .white {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    color: White;
    }  
    .caption {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt;}
    .tenpt {font-size: 13px; font-family:  Arial, Geneva, Helvetica, sans-serif; } 
    h1 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 24pt;}  h2 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 18pt;} h3 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14pt;} h4 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt;} h5 {font-family: Arial, Geneva, Helvetica, sans-serif;} 
    A:link {font-family: Arial, Geneva, Helvetica, sans-serif; text-decoration: none; color:#999900;} A:active {color: #999900; font-family: Arial, Geneva, Helvetica, sans-serif; text-decoration:none;}  A:hover {color:#000000; font-family: Arial, Geneva, Helvetica, sans-serif; text-decoration:none;}  A:visited {color: #999900; font-family: Arial, Geneva, Helvetica, sans-serif; text-decoration:none;}  A:visited:hover{color:#000000; font-family: Arial, Geneva, Helvetica, sans-serif; text-decoration:none;}  
    .w:link{color:#ffffff; font-size: 10pt; text-decoration:none;}  .w{color:#ffffff; font-size: 10pt; text-decoration:none;}   .w:active{color:#ffffff; font-size: 10pt; text-decoration:none;}   .w:hover{color:#000000; font-size: 10pt; text-decoration:none;}  .w:visited{color:#ffffff; font-size: 10pt; text-decoration:none;} .w:visited:hover{color:#000000; font-size: 10pt; text-decoration:none;}   
    .d:link{color: #8B4513; font-size: 10pt; text-decoration:none;}  .d{color:#808000; font-size: 10pt; text-decoration:none;}   .d:active{color: #8B4513; font-size: 10pt; text-decoration:none;}   .d:hover{color:#000000; font-size: 10pt; text-decoration:none;}  .d:visited{color: #8B4513; font-size: 10pt; text-decoration:none;} .d:visited:hover{color:#000000; font-size: 10pt; text-decoration:none;}   
    .b:link{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; font-weight: bold; text-decoration:none;}  .b{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; text-decoration:none;}  .b:active{font-family: Arial, Helvetica, sans-serif; color:#000000; font-weight: bold; text-decoration:none;}  .b:hover{font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-weight: bold; font-size: 10pt; text-decoration:none;}  .b:visited{font-family: Arial, Helvetica, sans-serif; color:#000000; font-weight: bold; font-size: 10pt; text-decoration:none;}  .b:visited:hover{font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size: 10pt; font-weight: bold; text-decoration:none;}  
    .bz:link{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; text-decoration:none;}  .bz{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; text-decoration:none;}  .bz:active{font-family: Arial, Helvetica, sans-serif; color:#000000; text-decoration:none;}  .bz:hover{font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size: 10pt; text-decoration:none;}  .bz:visited{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; text-decoration:none;}  .bz:visited:hover{font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size: 10pt; text-decoration:none;} 
    .gz:link{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt;  text-decoration:none;}  .gz{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; text-decoration:none;}  .gz:active{font-family: Arial, Helvetica, sans-serif; color:#000000;  text-decoration:none;}  .gz:hover{font-family: Arial, Helvetica, sans-serif; color:#99AA33; font-size: 10pt; text-decoration:none;}  .gz:visited{font-family: Arial, Helvetica, sans-serif; color:#000000;  font-size: 10pt; text-decoration:none;}  .gz:visited:hover{font-family: Arial, Helvetica, sans-serif; color:#99AA33; font-size: 10pt;  text-decoration:none;}   
    .g:link{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; font-weight: bold; text-decoration:none;}  .g{font-family: Arial, Helvetica, sans-serif; color:#000000; font-size: 10pt; text-decoration:none;}  .g:active{font-family: Arial, Helvetica, sans-serif; color:#000000; font-weight: bold; text-decoration:none;}  .g:hover{font-family: Arial, Helvetica, sans-serif; color:#99AA33; font-weight: bold; font-size: 10pt; text-decoration:none;}  .g:visited{font-family: Arial, Helvetica, sans-serif; color:#000000; font-weight: bold; font-size: 10pt; text-decoration:none;}  .g:visited:hover{font-family: Arial, Helvetica, sans-serif; color:#99AA33; font-size: 10pt; font-weight: bold; text-decoration:none;}  
    .bulge:link{color: #808000; font-size: 10pt; text-decoration:none;}   .bulge{color:#999900; font-size: 10pt; text-decoration:none;}   .bulge:active{color: #999900; text-decoration:none;}   .bulge:hover{color: #000000; font-weight: bold; font-size: 10pt; text-decoration:none;}   .bulge:visited{color: #999900; font-size: 10pt;}  .bulge:visited:hover{color: #000000; font-size: 10pt; font-weight: bold; text-decoration:none;}  
    .hide {font-size: 10pt; color: #99aa33}
    body{
     padding:0;
     margin:0;
     background:#fff;
     color:000;
    }
    #header {
     height:132px;
     white-space: nowrap;
    }
    img {border:0;}
    #navrightblock {
     position:absolute;
     top:57px;
     right:0px;
     width:19px;
    }
    #navright {
     position:absolute;
     top:57px;
     right:25px;
     width:150px;
     text-align:right;
    }
    #navright p {margin:2px 0}
    #content {
     width:100%;
     background-image:url(http://www.lincoln.ac.uk/global/graphics/bg1.gif);
     background-repeat: no-repeat;
     background-position: left top;
    }
    #contentinner {
     margin-left:200px;
    } 
    #contentinner img {border:0;margin-right:18px;}
    #contentinner h2 {padding-top:20px}
    #contentinner li {margin:3px; 0}
    #navleft{
     float:left;
     margin-top:7px;
     width:170px;
     text-align:right;
    }
    * html #navleft {margin-top:20px;}/* for ie only */
    #footer {
     margin-top:0px;
     padding-left:30px;
     padding-top:10px;
     background:#99AA33 url(http://www.lincoln.ac.uk/global/grap...een_block2.gif) no-repeat left top;
     color: #FFFFFF;
    }
    </style>
    <script src="http://www.lincoln.ac.uk/global/scripts/360.js" type="text/javascript"> </script>
    </head>
    <body>
    <a id="top"></a> 
    <div id="header"> 
      <!-- HEADER GRAPHICS-->
      <a href="/index.html"><img src="http://www.lincoln.ac.uk/global/graphics/minerva.gif" width="151" height="132" alt="University of Lincoln" /></a> 
      <img src="http://www.lincoln.ac.uk/global/grap...i_building.gif" width="400" height="132" alt="University of Lincoln Header graphic" /> 
    </div>
    <div id="content"> 
      <div id="navleft"> 
    	<p> 
    	  <!-- MENU -->
    	  <a href="courses/index.html" class="g">Course Information</a><br />
    	  <a href="accommodation/index.htm" class="g">Accommodation</a><br />
    	  <a href="opendays/index.html" class="g">Open Days</a><br />
    	  <a href="how-to-apply.shtm" class="g">How to Apply</a><br />
    	  <a href="prospectus.html" class="g">Prospectus Request</a><br />
    	  <a href="lincoln/index.html" class="g">Lincoln Campus</a><br />
    	  <a href="hull/index.html" class="g">Hull Campus</a><br />
    	  <a href="javascript:openWin360()" class="gz"><strong>360<sup>o</sup> Virtual 
    	  Tour</strong></a> <br />
    	  <a href="overseas/index.html" class="g">International Students</a><br />
    	  <a href="events/index.html" class="g">Events</a><br />
    	  <br />
    	  <a href="faculties/index.html" class="g">Faculties</a><br />
    	  <a href="university-services/index.html" class="g">Support Departments</a><br />
    	  <a href="contacts/index.html" class="g">Staff Directory</a><br />
    	  <br />
    	  <a href="businessservices/index.html" class="g"><strong>Business Services</strong></a><br />
    	</p>
      </div>
      <div id="contentinner"> 
    	<h2>Prospectus Request</h2>
    	<h3>UK Addresses</h3>
    	<ul>
    	  <li><a href="prospectus-uk.shtm"><strong>Undergraduate Prospectus</strong></a> 
    		(ALL Degree/HND/Foundation Degree)</li>
    	  <li><a href="prospectus-p.shtm"><strong>Postgraduate Prospectus</strong></a> 
    		(Masters/Doctorate) </li>
    	  <li><a href="prospectus-lsa-fe.shtm"><strong>Lincolnshire School of Agriculture</strong></a> 
    		(FE Courses only)</li>
    	  <li><a href="prospectus-lsad-fe.shtm"><strong>Lincoln School of Art &amp; 
    		Design FE Prospectus</strong></a> (FE Courses only)</li>
    	</ul>
    	<p><img src="http://www.lincoln.ac.uk/graphics/un...ectus-2004.jpg" alt="2004 Undergraduate Prospectus available from March 1st " width="101" height="101" /> 
    	  <img src="http://www.lincoln.ac.uk/graphics/po...prospectus.jpg" width="144" height="100" alt="Postgraduate Prospectus" /><img src="http://www.lincoln.ac.uk/graphics/pr...lsa_2003_4.gif" alt="School of Agriculture procpectus cover" width="101" height="101" /><img src="http://www.lincoln.ac.uk/graphics/pr...sad_2002_3.gif" alt="Lincoln School of Art &amp; Design Prospectus Cover" width="101" height="101" /><br />
    	  <br />
    	</p>
      </div>
    </div>
    <div id="navrightblock"><img src="http://www.lincoln.ac.uk/global/grap...een_block4.gif" alt=" " width="19" height="75" usemap="#Map" /> 
      <map id="Map">
    	<area shape="rect" coords="1,2,18,18" href="javascript:history.back()" alt="Back" />
    	<area shape="rect" coords="2,20,19,37" href="/quickfind.html" alt="Quickfind menu" />
    	<area shape="rect" coords="2,38,38,56" href="/index.html" alt="University homepage" />
      </map>
    </div>
    <div id="navright"> 
      <p><a href="javascript:history.back()" class="g">Back</a></p>
      <p><a href="/quickfind.html" class="g">A-Z Quick Find</a></p>
      <p><a href="/index.html" target="_top" class="g">University Home</a></p>
    </div>
    <div><img src="http://www.lincoln.ac.uk/global/grap...een_block1.gif" alt=" " width="96" height="19" /></div>
    <div id="footer"> 
      <p>University of Lincoln<br />
    	Brayford Pool<br />
    	Lincoln<br />
    	LN6 7TS</p>
      <p class="white">E-mail: <a href="mailto:enquiries@lincoln.ac.uk?subject=Enquiry_from_website" class="w"> 
    	enquiries@lincoln.ac.uk </a><br />
    	Tel: +44 (0)1522 882000<br />
    	Minicom: 01482 311211</p>
      <p><a href="mars/web/legal.htm" class="w">Legal Notices</a> <br />
    	<a href="mars/web/web.htm" class="w">Web Team</a></p>
      <p>&nbsp;</p>
    </div>
    </body>
    </html>
    ok in IE5, 5.5. & 6, Moz 1.2, firebird 0.61, opera7.

    Hope that helps.

    Paul

  7. #7
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Damn paul, i hope they nominate you for some sort of award for this year, you certainly deserve it

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Damn paul, i hope they nominate you for some sort of award for this year, you certainly deserve it
    Thanks - I try my best.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Steven,

    To improve the page further you could convert the left hand navigation into a list (without the bullet) and then you could get rid of all those unsightly break tags at the end of the line. The spacing between could be controlled in the css.

    Also in your original css (which i didn't touch ) you have used definitions over and over agian when there was no need. Remember that some styles will cascade through the stylesheet. e.g. If you declare the font-family in the body style then there is no need to keep declaring it in the <div>, <p>, <ul> etc.

    You have used this same declaration about 10 times:"font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10pt;". Once in the body would suffice. If you need to change the size for a different element then you only need to change the size and not declare everything else again.

    Also pt are best used for printing. Use px or better still use ems or % for a more fluid layout although they are not as cross browser compatible as pixels yet.

    Hope that helps.

    Paul

  10. #10
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    you should add "Hope that helps, Paul" to your signature

  11. #11
    SitePoint Member Steven Audis's Avatar
    Join Date
    Nov 2003
    Location
    UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Thanks

    Thank you Paul, Much appreciated,

    I'm working toward making the website a lot more modern looking and I personally feel that the use of CSS for more than just styling is the way to go. Currently it's a bit of a trial but if they like the idea maybe itís something that I can rollout on a bigger scale across campus. The biggest concern of the University is trying to make sure we are not restricting the audience which the site is viewable to. I think this is a concern of every web developer, at some point though there has to be a cut-off to which technologies we strive to make the site work on.

    Thank you for your help, No doubt I'll be speaking to you more as time progresses and I work towards implementing the ideas further.

    Steven Audis.


Bookmarks

Posting Permissions

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