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>
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.
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.
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
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
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.
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.
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.
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.
#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?
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.
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.