Submit Your Article Forum Rules

Results 1 to 6 of 6

Thread: Site Redesign from tables to pure CSS layout

  1. #1

    Site Redesign from tables to pure CSS layout

    My site is rather old, early 2003 and it was never finished, as the home page top navigation is in flash, and it uses a table layout, lately it suffered from a deep drop in rank, so I decided to do something radical and completely redesign it from scratch and this time, finish it. Then I went into marketing forums, and read, the redesign shouldn't be that radical, but even with a mere PR 1, I decided to stick to the old visual design, but changing completely the way it's displayed, as I went from an old tables layout to pure css, the only thing that remains from the old time is the flash presentation, and top nav, everything else has been carefully positioned, using div tags, and believe me this is the first time I try something like this so I carefully planned the layout but doing just the layout without any content, first, and test it in all major browsers, Firefox, Chrome, Safari, and IE, I don't have Opera installed so I didn't have the chance to test it there. My old tables layout, was very limited as I didn't have much space for text, so with this redesign I tried to create the same look and feel, but as I can use divs now, I can add much more content. At this time I only made the home page and I am working on the flash presentation, as this will only appear in the main page. My footer nav bar is still in the works, as many links are going to pages that are not created yet, but the only thing that matters now is the redesign works. I would like some tips and advise as I uploaded a test version of the pure css site, compared to the old one.
    The new one is http://www.theoutletseason.com/indexnew.html
    The old one is http://www.theoutletseason.com // This is an old table layout with rendering problems
    Rick Fitzgerald
    Outlet Season
    http://www.theoutletseason.com

  2. #2
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,743
    Whenever I get looking at someone's code the little things pop out, in no particular order, so why fight it? Let's start with the outer and work inward:

    1) Open the page to full screen? (For now I'm viewing in Chrome and Opera) See anything odd?

    The top container is pinned right, the bottom container pinned left.

    Trick here is to make sure everything is inside the outer wrapper. Give the body a text-align: center; property, then to the outer wrapper give a width property in %, margin: 0 auto; text-align: left; and now the main container will stay centered. This will all agree with the footer navigation, which is centered already.

    2) id="footer" is semantically in the 'wrong' element, which element scope is navigation. It means a little more structure but it's not a bad thing to wrap the link list in an UL or a DIV id="nav" or class="nav". The P needs to be inside the footer container, as well. It's kind of just hanging off the end of the page.

    This will give a bullet list when styles are turned off:
    Code:
    CSS
    
    ul.nav {
     text-align: center;
     margin: 0;
     padding: 0;
    }
    ul.nav li {
     display: inline;
    }
    HTML Code:
    <body>
    ..
    <div id="footer">
     <ul class="nav">
      <li><a href="#">Link one</a> |</li>
      <li><a href="#">Link two</a> |</li>
      <li><a href="#">last in list</a><li>
     </ul>
     <p>Copyright</p>
    </div>
    </body>
    For more control with spacing you can squeeze all the LI's into one code line, like so:

    HTML Code:
    <body>
    ..
    <div id="footer">
     <ul class="nav">
      <li><a href="#">Link one</a> |</li><li> <a href="#">Link two</a> |</li><li> <a href="#">last in list</a><li>
     </ul>
     <p>Copyright</p>
    </div>
    </body>
    To really dial in control, wrap the <span>link text</span> and apply padding to the left and right of the <a/a>, then a whitespace is not needed in the markup. There are a tonne of things you can do to tweak the spacing.

    The <span> technique with pad on <a> lets you increase the FOCUS zone on the anchor, while limiting the effect of text-decoration.

    Code:
    CSS
    
    ul.nav li a {
     padding: 0 1em;
     text-decoration: none;
     color: #fff;
     background: transparent;
    }
    ul.nav li a span {
     text-decoration: underline;
    }
    ul.nav li a:hover {
     color: #b34234;
     background:#396 url(images/tile06_on.jpg) repeat-x; 
    }
    ul.nav li a:hover span {
     text-decoration: none;
    }
    Notice the underline does not exceed the text in the span, but the focus area includes the clear space as well?

    3) display: inline-block; is not a widely supported property: value; in older browsers. Best to include display: inline; or use it by itself in this instance.

    4) background:url(images/tile06.jpg) #396 repeat-x; may give a burp in older browsers. background-color should appear first in the shorthand, as in,

    background:#396 url(images/tile06.jpg) repeat-x;

    Notice above that an _on image is used for onmouseover effect.

    5) There are two "content-type' declarations in the <head>. I'd go with the UTF-8 and drop the other one.



    Will keep poking away. Something else might pop out. Cheers!
    Last edited by weegillis; 10-21-2010 at 02:16 PM.

  3. #3
    Senior Member ran_dizolph's Avatar
    Join Date
    Jul 2005
    Posts
    554
    Give the body a text-align: center; property
    Don't do that...it's not the best way. Give your main container div a fixed width, and add 'margin:auto;' to it, which will keep it all centered.

    From the quick peek I had, it looks like you're suffering from the same condition many do when converting to divs...it's called 'divitus'.

    You could do away with many of the divs, and position the elements inside themselves (navigation for example, doesn't really need three div tags).

    This'll also aid in sematically-proper markup, which helps with accessabiltiy issues.

  4. #4
    For centering a div, I have found it is best to set width, auto margin the left and right AND also put text-align:center; in the parent container. Then in the centering div, you may need to align the text left again. Older IE versions do not read auto margins correctly...but the day is approaching that we can forget about the old internet exploder!

  5. #5
    Quote Originally Posted by weegillis View Post
    Whenever I get looking at someone's code the little things pop out, in no particular order, so why fight it? Let's start with the outer and work inward:

    1) Open the page to full screen? (For now I'm viewing in Chrome and Opera) See anything odd?
    I forgot completely about this one! when testing, even though my intention was to recreate the old look using entirely css, is a work in progress. As I can't use two backgrounds in CSS2 and CSS3 is still not widely supported, I am not able to use the small gif, that draws a light blue stripe, to the left, that's why I keep the background white. I positioned the site's container to the right on purpose, my other sites are centered, and if I positioned it with margin:0 auto, I'm afraid I can't do the seamless background, if I don't position the site that way, I tried the other way but it didn't work, because if the background image is centered then it leaves an ugly white gap, in the right hand side ...

    2) id="footer" is semantically in the 'wrong' element, which element scope is navigation. It means a little more structure but it's not a bad thing to wrap the link list in an UL or a DIV id="nav" or class="nav". The P needs to be inside the footer container, as well. It's kind of just hanging off the end of the page.
    As far as the footer is not even finished yet, so thanks for the tip, as my intention is to do a multi-columns css.
    As Google is considering seriously loading speed I am also optimizing the code for that ...
    Rick Fitzgerald
    Outlet Season
    http://www.theoutletseason.com

  6. #6
    Member 3DGrunge's Avatar
    Join Date
    Jul 2010
    Location
    NC, USA
    Posts
    49
    Quote Originally Posted by outletseason View Post
    I forgot completely about this one! when testing, even though my intention was to recreate the old look using entirely css, is a work in progress. As I can't use two backgrounds in CSS2 and CSS3 is still not widely supported, I am not able to use the small gif, that draws a light blue stripe, to the left, that's why I keep the background white. I positioned the site's container to the right on purpose, my other sites are centered, and if I positioned it with margin:0 auto, I'm afraid I can't do the seamless background, if I don't position the site that way, I tried the other way but it didn't work, because if the background image is centered then it leaves an ugly white gap, in the right hand side ...
    I do not see why you would need two backgrounds to achieve the look of the old site.
    Anywho I'll throw my two cents in... navigation of any form should never ever be flash or javascript based. Enhance it never depend on it.
    The nice part about being a pessimist is that you are constantly being either proven right or pleasantly surprised. ~George F. Will

Tags for this Thread

Posting Permissions

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