Redesign from tables to css

dancing_mathilde · March 4, 2011, 11:21am

I want to change some table based design into full css and hope to get some help.

I am happy to provide a link to the page, but please PM me so I can give you.


<html>
<head>
</head>
<body>
<div id="content">
<div id="top">top info here</div>
<div id="banner">banner info here</div>
<div id="nav">nav coding here</div>
<div id="contentleft">This is main content which has to be in same length always as the 'sidebar' div or can be longer when more text (like three column design with equal columns</div>
<div id="contentright">longest or equal lenth as contentleft</div>
<div id="footer"></div>
</div>
</body>
</html>

the css


html,body {margin: 0;
           padding: 0;
		   background:#fcf9f0;
		   font:Verdana 10px #162847;
		   line-height:16px;
		   }

#content {height: auto     ;	*/not sure about this */
          margin: 0 auto;
          text-aligh: justify;
          position: relative;
          }

#top {height: 30px;
      font: Verdana 9px #ac967f;
	  line-height:12px;
      text-align: right;
     }

#banner {background-color : #ffffff;
      }

#nav {background-color:#fcf9f0;
      }

#contentleft {float:left;
              width:560px;
              margin:0;
              background:#ffffff;
              }

#contentright {float:right;
              width:380;
              margin: 0;
              backgroun:#773344;
              display:inline;
              }

#footer {margin: 0 auto;
         background:ffffff;
         text-align:center;
        }

When possible in such way that the content of the ‘contentleft’ div will be first (for SEO reasons)

Thanks voor the tips and help. Again PM me for the link.

mathilde

Divisive_Cotton · March 4, 2011, 12:07pm

What exactly do you need help with mathilde?

If #contentleft is 450px wide and #contentright is 380px wide (float that left, not right and no need for display:inline) then the parent container (Content) needs to be 830px wide. At the moment it doesn’t have a width.

PicnicTutorials · March 4, 2011, 12:09pm

Looks good to me. Googlebot doesn’t get lazy or procrastinate. It doesnt get half way down your page and then say “haaaa… I’m tired… I’ll save the rest for another day”. So I see no need to put the whatever content first.

dancing_mathilde · March 4, 2011, 1:06pm

Thanks for the remarks.

About the width, I see I not mentioned : 950px (contentleft:560 and contentright:380)

I struggle with the clean way of writing the css (so it is for all browsers)

contentleft first i want because of the different links in the first div’s of the page.

Thanks again.

Mathilde

PaulOB · March 4, 2011, 1:19pm

Careful with your typing as you have a lot of typos:)


 width:380;
 margin: 0;
 backgroun:#773344;

It should be:


 [B]width:380px[/B];
 margin: 0;
[B]background[/B]:#773344;

And don’t forget your doctype.

If you want equal columns then use a repeating background gif on the content wrapper to create that illusion.

Tidied up a little (but your 10px and 9px fonts are really too small - you should use ems anyway).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
}
body {
    background:#fcf9f0;
    color:#162847;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:16px;
    font-size:10px;
}
#content {
    width:940px;
    margin: 0 auto;
    text-align: justify;
    position: relative;
    overflow:hidden;/* clear floats*/
    background:url(images/equalcolumn.gif) repeat-y 0 0;/* faux column here*/
}
#top {
    height: 30px;
    color:#ac967f;
    font-size:9px;
    line-height:12px;
    text-align: right;
}
#banner {
    background-color : #ffffff;
}
#nav {
    background-color:#fcf9f0;
}
#contentleft {
    float:left;
    width:560px;
    margin:0;
    background:#ffffff;
}
#contentright {
    float:right;
    width:380px;
    margin: 0;
    background:#773344;
}
#footer {
    clear:both;
    background:ffffff;
    text-align:center;
}
</style>
</head>
<body>
<div id="content">
    <div id="top">top </div>
    <div id="banner">banner</div>
    <div id="nav">nav</div>
    <div id="contentleft">This is main content</div>
    <div id="contentright">Rightcontent</div>
    <div id="footer"></div>
</div>
</body>
</html>

The leftcontent will come before the right content which should be fine for seo.

Don’t forget to use headings and semantic html also.

dancing_mathilde · March 4, 2011, 1:57pm

Hi Paul,

Thanks for the remarks about typing and the notes in the coding.

If you want equal columns then use a repeating background gif on the content wrapper to create that illusion

Here I miss the point.

I meant to have left and right the same length as in the three column version. I not using an img for that as well. What I thought was the ‘display:inline’ for the left and right column made the column look same length.

as in the example url, I want that both colors are till footer (ie bottom of column)

example page wellness /for /body and soul /dot test dot /html


html, body {
 margin:0;
 padding:0;
 background:#fcffec;
 color:#333;
 font:11px Verdana, Arial, Helvetica, sans-serif;
}
body {
 padding:4px;
}
#content {
 width:770px;
 margin:0 auto;
 
 text-align: justify;
position:relative;
}
* html #content {width:772px;w\\idth:770px;}


#contentleft {	 
	  float:left;
	  width:170px;
	  margin: 5px 5px 0 0;
	  background:#fcffec;
        display:inline;
	  }
#contentcenter {	  
	  width:407px;
	  margin: 5px  170px 5px 185px;
	  background:#fcffec;	  
	  }
#contentright {	  
	  float:right;
	  width:165px;
	  margin: 5px 0;
	  background:#fcffec;
	  display:inline;
	  }

thanks
mathilde

PaulOB · March 4, 2011, 3:28pm

You can’t do equal column colours unless you use a background image (faux column) technique or one of the more complicated negative margin tricks or absolute background trick.

Normal css can’t accomplish equal columns unless you want to use display:table-cell which isn’t supported in IE7 and under.

example page wellness /for /body and soul /dot test dot /html

You’ll have to PM me the link because I tried all variations of that one and got nowhere

AtSea_webdesign · March 4, 2011, 3:41pm

Actually Paul you can do equal column heights with a simple jQuery fix. However for purists your technique with the background images works great and is an adequate non JS technique.

PaulOB · March 4, 2011, 5:42pm

Oh no not the dreaded “J” word

I find those equal column scripts a little bit disconcerting though as it either holds the page up or you get a page jump at page load and on resize. Both undesirable. But of course probably easier to implement than some of my fixes.

Although the absolute overlay is my preferred method and can be made to work everywhere.

Equal columns - Including IE6
CSS Equal Columns

dancing_mathilde · March 4, 2011, 6:51pm

AtSeaWebdesign : Thanks but Jquery I see more as tool for interaction.

Paul : Some homework to be busy with this weekend

both thanks for the tips.
Mathilde

AtSea_webdesign · March 4, 2011, 7:22pm

I wasn’t advocating using JQ this way. It was just another technique that can be used to achieve the desired effect.

I agree it’s pointless to load JQ and the plugin when Paul’s method is sufficient.

PaulOB · March 4, 2011, 7:47pm

I was only joking, I knew what you meant - sorry

PaulOB · March 5, 2011, 10:37am

I’m not sure why you don’t want to use the repeating image method as its so simple and means the mark up can remain the same. It only takes 10 seconds to make the image and it’s less that half a k so there are no real overheads.

To do it without an image and have full length column colours and the ability to have borders on those columns also then you need to complicate the mark up a little to accomplish this.

Here is an example that has all those things in place.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p,h1,h2 {
    margin:0 0 1em
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    background:#fcf9f0;
    color:#162847;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:16px;
    font-size:10px;
}
#content {
    width:940px;
    margin: 0 auto;
    text-align: justify;
    position: relative;
    overflow:hidden;/* clear floats*/
    border:1px solid #000;
}
#top {
    height: 30px;
    background:#ab977f;
    font-size:9px;
    line-height:12px;
    text-align: right;
}
#banner {
    background : #ffffff;
    heigth:180px;
    marging:0;
    padding:0;
}
#nav {
    background-color:#fcf9f0;
}
#contentleft {
    float:left;
    width:560px;
    margin:0;
    border-top:1px solid #000;
}
#contentright {
    float:right;
    width:380px;
    margin: 0;
    margin-right:-381px;
    border-left:1px solid #000;
    border-top:1px solid #000;
    position:relative;
    left:-1px;
}
#footer {
    clear:both;
    background:#335544;
    text-align:center;
}
#main {
    border-right:380px solid #d9db56;/* right full length column color*/
    width:560px;
    background:#fff;/* left full length column colour*/
}
#maincol {
    border-right:1px solid #000;
    padding:1px 0;
}
#main:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
</style>
</head>
<body>
<div id="content">
    <div id="top">top </div>
    <div id="banner">banner</div>
    <div id="nav">nav</div>
    <div id="main">
        <div id="contentleft">
            <div id="maincol">
                <h1>This is Main content</h1>
                <p>text here</p>
                <p>text here</p>
                <p>text here</p>
                <p>text here</p>
                <p>text here</p>
                <p>text here</p>
            </div>
        </div>
        <div id="contentright">
            <h2>Here right content</h2>
            <p>text here</p>
            <p>text here</p>
            <p>text here</p>
            <p>text here</p>
            <p>text here</p>
            <p>text here</p>
            <p>text here</p>
            <p>text here</p>
        </div>
    </div>
    <div id="footer">Footer</div>
</div>
</body>
</html>

The full length column colours are achieved using a very thick border of the main element to provide the column background and then shifting the right float over this background.

To enable normal borders as well you then have to nest another element and then overlap the floats so that the right border on one element sits on top of the left border on the other element to provide a continuous border.

dancing_mathilde · March 5, 2011, 11:23am

thanks Paul,
I will think about the remarks.

Can you explain me this part of the code?

#main:after {
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}

First two lines?

Other question: size of possible bg img 380*1px?

Mathilde

Stomme_poes · March 5, 2011, 11:29am

Can you explain me this part of the code?

I can.

#main is a box containing floats. If you give #main a background colour or some borders, you may not see that show up on the page at all! This is because normally a static block like #main won’t expand to contain floated children. It’s as if it thinks that it’s empty. That whole chunk of code makes an invisible “child” who comes after the floats and clears them. Basically a pure CSS version of the old clearing div.

The content created (the new “child” of #main) is just a space: the " " you see. It doesn’t matter what it is, but a space is invisible (in the old days, people used a dot).

Then, only blocks can clear stuff, and the content is naturally inline, so Paul makes it a block.

Re the image: a 1px tall image repeating down is a smaller filesize… works so long as it’s a solid colour (not a pattern or gradient). Is that the question?

dancing_mathilde · March 5, 2011, 12:19pm

stomme poes : Thanks for explaining. Yes the ‘after’ and empty ‘’ were unknown.

Mathilde

dancing_mathilde · March 5, 2011, 12:21pm

Paul: You mentioned the font size as real small. What size is minimum?

Mathilde

Stomme_poes · March 5, 2011, 12:44pm

9px is about the limit of small you can get and still have a glyph a computer can render. It is universally too small.

When choosing a font size, it’s ideal to choose em or %-based fonts. This allows browsers and users to grow or shrink it to their reading preference. When you set in px, you’re setting a size that may be miles too small for people. I have a large screen, so it has a high resolution. This makes 14px very tiny for me. If I set my screen resolution back down to 600X800, it becomes more readable… but I don’t use that resolution. For some people, 20px is necessary to make stuff readable.

So if you set your fonts in something like 1em, not only can text-enlarge in a browser enlarge it (IE 6-9 will not enlarge px fonts, and zooming can distort), but you are potentially starting with the same font size the user has set on their computer. Someone with bad eyes may have all their base fonts set to the equivalent of 20px. Someone else with an older screen may be ok with the equivalent of 12px. With em/% fonts, it’s no longer your problem. The user has more control.

But they do take some getting used to (using them as a developer) and there are pitfalls.

In the meantime, if you must stick with px, I would call 14px the minimum text size for body text. But know that for many people, that will still be too small.

dancing_mathilde · March 5, 2011, 12:51pm

Thanks for explaining. What is the effect of a site design when people enlarge the font size for their screen? Suppose you have a div with fixed sizes. Ok, some different subject as the start of the thread.

AtSea_webdesign · March 5, 2011, 3:25pm

One way I work around that is to set the font through the body tag to say 76%.

From there I assign % values for fonts on the page. Although I’ve done minimal testing with this I haven’t run into any issues with resizing.

However if the user enlarges the type size significantly it may break the layout.