I've used CSS in the past for styling, but with attempting to be 100% XHTML compliant I find that I am using it more as I should have been in the past -- for presentation. That said, I'm still stuck in a tabular world, somewhat unable to visualize laying out a page using just CSS. I've read through Patrick Griffiths' XHTML & CSS guide, so I'm fairly comfortable with a basic header, nav, content layout, but beyond that I'm still not grasping this entirely I'm working to redesign my company's public site. For one thing, it's a bare for our tech guy to maintain. Secondly, there are image files that need not be image file and several other issues I have with it. Are tables really that big of a problem or is it the spacer images, etc. that are the real concern? To redo the layout/frame, I used tables for structure, but the presentation is entirely controlled by CSS. Thoughts and opinions? So I guess I learn better by example and ask that someone take a look at this page (http://data-inc.com/about.htm) and give suggestions on how they would start to redesign it using XHTML & CSS. I already have the frame of the page established using tables & CSS, so I'm working at redoing the center content (the part in white without the footer links) and trying to use CSS. My goal is to 1) remove the textual images (shouldn't be a problem) and 2) achieve a bit of consistency, as well as reusability in the design. The part I struggle with is layout and positioning without tables. I could toss the content of these pages together in no time using tables, but I figured I'd take this as an opportunity to learn a bit about page design using CSS. And as a final note, is there any reason I wouldn't want to use CSS? I've read about browser compatibility, etc. How valid is this concern and which browsers generally have the problems?
WOW! You're in a world of a mess! First off, I would go here and get a basic layout. Then just add everything in as you need it (header, menu, etc.) just leaving out the tables. It is WAY easier to setup a page using CSS rather than tables and css! You end up with a zillion tables where you could have maybe 6 div's for the whole page! As far as "spacer images" you can use padding and margins in CSS, it is much easier and nicer on bandwidth and the tech guy Also, as far as browser compatibility, IE5/6 have problems where they don't turn out the same way as IE7 and FF do with certain CSS styles (padding, margins, etc.) but it is only a minor problem and easy to fix, much easier than using tables!
Yeah, I know. The company who designed this site for us...Sheesh! The "just leaving out the tables" is the part that I'm working to figure out. I already invested the time in redoing the main layout of the page using tables, so I'm not going to change that. I would, however, like to use CSS + XHTML for the content piece, as mentioned above. I'd use CSS for the entire site, but I don't feel comfortable doing so without first understanding all of the issues with doing so (IE5/6 vs IE7, etc.). Plus, I need to get this out the door sooner than later. So I figure once I get the gist with an example of one page, I can work my way through the remaining pages. Otherwise, I'm going to stick to tables and work on understanding CSS at another time.
So I've toyed around a bit and while I'm close, I'd like to know that I'm going about this in the right way. The code below sits inside a <td> tag inside the main frame layout. Ignore the accuracy of colors, etc. as I'm just going for layout now. Also, the layout doesn't have to be 100%, just within reason. One thing I notice is the misalignment of the two border-lefts. I assume this has something to do with the width of the text between each. <h2 class="sectionHeader">Our strength is in the quality of our people & the quality of our services.</h2> <p>D.A.T.A. is your one-source IT solution. We provide high caliber IT solutions to contracts and subcontractors in the public and private sectors. Our expertise is in working with agencies supporting the Department of Defense, many of whom are major contractors in that market niche.</p> <h2 class="sectionHeader">Our management</h2> <h2 class="emphasized">D.A.T.A.’s management team is devoted to serving the needs of our clients and employees, and to the ultimate success of the mission.</h2> <div id="managerQualities"> <ul> <li>Experienced</li> <li>Flexible</li> <li>Proactive</li> <li>Responsive</li> <li>Proven Success</li> </ul> </div> <p>We respond quickly and effectively to solve problems, and our skills and experience allow us to provide innovative solutions for our client’s unique business and mission critical challenges. We are also extremely dedicated to our employees and, as a result, have a high level of employee retention. Ultimately, our management’s commitment yields successful, long-term relationships with both our clients and employees.</p> <h2 class="sectionHeader">Our employees</h2> <div id="employeeQualities"> <ul> <li>Highly Qualified</li> <li>Team Players</li> <li>Self Starters</li> <li>People Oriented</li> <li>Dedicated</li> </ul> </div> <p>Whether you need a single employee or a full team of IT professionals, we ensure that our employees have the skills, experience, and credentials to match your needs. As “People Friendly IT Professionalsâ€, our employees are critical players in projects and are dedicated to your project’s success.</p> Code (markup): p { padding-bottom: 7px; } h2.sectionHeader { background-image: url('images/upcoming_bullet.gif'); background-position: center left; background-repeat: no-repeat; color: Blue; font-weight: bold; font-size: 1.2em; padding-left: 15px; } h2.emphasized { color: #333333; font-weight: bold; font-size: 1.2em; } div#managerQualities, div#employeeQualities { float: right; padding-left: 15px; padding-right: 30px; border-left: solid 1px #000; margin-left: 20px; font-weight: bold; font-size: 1em } #managerQualities li { color: Green; } #managerEmployees li { color: Maroon; } Code (markup): I also noticed that the unordered list in does not have a list-type: none attribute defined, but I do have them defined in a seperate stylesheet. Am I missing something on inheritance? Why is the bullet not showing up on these? Am I going about this all in the wrong way? body { font: 80% arial, helvetica, sans-serif; margin: 0; background-color: #fff; } /*a { color: #336699; }*/ .small { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #666666} form {margin: 0px 0px 0px 0px; } td.spacedContent { padding-left: 25px; padding-right: 25px; } td#center { vertical-align: top; } td#main { padding-top: 10px; } td#extras { width: 250px; background-image: url('images/upcoming_bg2.gif'); background-repeat: repeat-y; vertical-align: top; border: solid; border-width: 0px 0px 0px 1px; border-color: #999999 #999999 #999999 #666666 } td#header { height: 114px; background-image: url('images/header_bg.gif'); background-repeat: repeat-x; } td#logo { width: 218px; } td#horizontalBar { height: 27px; width: 300px; background-image: url('images/nav_bg.gif'); background-repeat: repeat; text-align: left; } td#horizontalBar form { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #333333; background-color: #99CCFF; border: #003366; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; margin: 0; } td#slogan { height: 87px; vertical-align: bottom; } td#subpage { background-image: url('images/subpage_bg.gif'); background-repeat: repeat-x; height: 88px; } td#mainpage { background-image: url('images/header.jpg'); background-repeat: repeat-x; height: 243px; } img.slogan { padding-right: 20px; padding-bottom: 10px; float: right; } form#searchform { padding: 0; margin: 0; } /* Subpage image */ td#submain { width: 312px; vertical-align: top; } td#subright { width: 420px; vertical-align: top; } img.subright { float: right; } td#subnav { padding-top: 2px; background-repeat: repeat-x; /* Taken from LightMix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; /* Removed for spacing consistency! padding: 2px 30px 0px; */ background-color: #D7E5F3; margin: 0px; background-image: url(images/subnav_bg.gif); border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #2E6AA1; border-right-color: #2E6AA1; border-bottom-color: #2E6AA1; border-left-color: #2E6AA1; } td#subNavImage { padding-bottom: 11px; } ul.subNav { padding: 9px 0 12px 0; margin: 0; } li.subNav { list-style: none; display: inline; /* From Lightmix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #4A8CC6; } li.subNav a:link, li.subNav a:hover, li.subNav a:visited, li.subNav a:active, li.subNav a:focus { list-style: none; display: inline; /* From Lightmix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #4A8CC6; } li.subNavSpacer { padding: 0 10px; list-style: none; display: inline; /* From Lightmix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #4A8CC6; } /**************************************** Main Navigation ****************************************/ td#navigation { text-align: left; padding: 0 10px; width: 520px; } #nav, ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; position: relative; width: 10em; } #nav li ul { display: none; position: absolute; top: 1.5em; left: 0; background: #fc6; } #nav li li { float: none; } #nav li:hover ul, #nav li.sfhover ul { display: block; } /**************************************** Extras ****************************************/ div#extrasSpacedHeader { background-image: url('images/upcoming_bg.gif'); padding: 0 20px; } div#extrasSpacedEvents { background-image: url('images/upcoming_bg1.gif'); background-repeat: repeat-y; padding: 10px 15px 40px 0px; /* Additional 10px on bottom from <li> */ } div#extrasSpacedEvents div.eventDate { /* Taken from LightMix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFCC33; margin-bottom: 0px; } div#extrasSpacedEvents div.eventDesc { /* Taken from LightMix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #FFFFFF; } div#extrasSpacedEvents ul { list-style-position: outside; list-style-image: url(images/upcoming_bullet.gif); padding: 0; margin-left: 25px; /*padding-top: 0px; padding-right: 0px; padding-bottom: 10px; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px*/ } div#extrasSpacedEvents li { margin-bottom: 25px; } div#extrasEmploymentOps { padding: 5px; } div#extrasEmploymentOps input.employmentInput { border: 0px; width: 78px; height: 20px; } div#extrasEmploymentOps table#employmentMain { background-color: #abcceb; } div#extrasEmploymentOps table#employmentFrame { /* Taken from LightMix */ background-color: #d6ebff; border: #99c2d6; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } .employmentTitle { /* Taken from LightMix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #006699; text-align: center; padding-bottom: 12px; } /**************************************** Footer ****************************************/ td#address { width: 250px; background-image: url('images/upcoming_bg2.gif'); background-repeat: repeat-y; padding: 15px 0; border: solid; border-width: 0px 0px 0px 1px; border-color: #999999 #999999 #999999 #666666 } td#footer { vertical-align: top; min-width: 732px; } p.address { padding-left: 20px; margin: 0 0; /* From original LightMix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #336699 } hr.footer { width: 100%; height: 1px; margin-top: 25px; margin-bottom: 25px; color: #999999; background-color: #999999; vertical-align: top; border: 0; } ul.bottomNav { padding: 0; margin: 0; } li.bottomNav { list-style: none; display: inline; /* From Lightmix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #999999; } li.bottomNav a:link, li.bottomNav a:hover, li.bottomNav a:visited, li.bottomNav a:active, li.bottomNav a:focus { list-style: none; display: inline; /* From Lightmix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #999999; } li.bottomNavSpacer { padding: 0 10px; list-style: none; display: inline; /* From Lightmix */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #999999; } td#bottomNav { width: 500px; text-align: left; } td#bottomMarker { text-align: right; } Code (markup):
The key to switching to using CSS for layout is to go through the page and break it down into the most minimalist semantic markup you can. What do I mean by semantic? If a section is a header, put it in a header tag... if a section is a list, mark it up as a list. Your tags should say what things are NOT how they appear. Once you have that THEN you can go back and add a few meaningless spans and DIV's as needed for visual effects, but on the whole ANYTHING relating to appearance should be in the CSS. There are also some standard techniques that once you know them can speed up page creation AND make the page rank better in searches AND be more accessable, such as image replacement. You've got WAY too much text in there as images for no reason other than wasting bandwidth and throwing accessability out the window. For example, your header should be something like: <h1> <strong>DATA</strong><br /> People Friendly IT Professionals<br /> <span></span> <em>Providing High Quality IT Services and Solutions since 1996</em> </h1> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact Us</a></li> </ul> <form id="searchSite" action="search.asp"> <div> <label>Search Site</label> <input type="text" id="zoom_query" size="12"> <input type="image" src="images/searchSubmit.png" /> </div> </form> Code (markup): As you can see, that's about a third the source and doesn't even use .js for the menu - frankly that would be the FIRST thing I'd swing the axe at as javascripted menus = accessability failures, especially since .js off there's no way to actually navigate the site. ALL of that 'text' in the header should be present in a header tag. Separating them with strong and em not only makes the search engines sit up and take notice, but will let you style and format them for when images aren't loaded. The empty span would be where we stuff our image to put atop at least some of the text to 'hide it'. If I have time later, I'll toss together a rewrite of that page with the CSS to show you what I mean.
I made the content section of each page just as you mentioned. Headers are marked up <h#> tags, lists are lists, etc. As I go through the exercise of creating these pages using CSS, I'm more inclined to do the same with template pages (header, right side nav, footer). I agree on the javascript front and will suggest having it transitioned into CSS as well, but given the timeline it'll have to stay for the time being. I'd appreciate the quick write-up. Thanks in advance.