Forum Moderators: open
Thinking of designing a site as a central column with blank either side as seen on many sites, with blank to either side, which is the best method to use to do this (smallest/neatest/fastest ect) and are there any ramifications to using this design? Does it have to be done using a frame (i use DW mainly) in which case we get back to the old frames are awful thing...
Any help at all would be most welcome...
Thanks all for such a great forum
Harley
[pre]
body {
margin-left: 10%;
margin-right: 10%;
}
[/pre]
Or add padding to a div containing the body of your page.
But why?
Why do you want to limit the page size, seems kind of odd to me?
Nick
is it possible to simply centralise the page, and have it a set width
and if it is, what should that be..? 1024?
Thanks
harley
Go with the flow, allow your page to fill the browser, those with high rez monitors generally resize their browser windows to a comfortable level.
Fixed width design... Yeush, this ain't print media, the web is a fluid, adaptable medium.
If you stop trying to control every aspect of the suer experience and worry more about making sensible suggestions to the browsers and devices that access your pages you'll be happier, your users will be happier and your code will be much more efficient.
xhtml/css layout... A little investment of time and you'll never look back...
Nick
You can always do a table (align="center"). Make sure that the table width is set to nothing wider than 750 px.
Or alternatively, you can set the width to 100% and let it resize to fit the browser.
Okay, you can now let your tomatoes fly. :o
Traitor.... ;-)
Nick
It works, it looks nice in all browsers, it's easy to maintain.
What's the crisis?
Each to their own, as long as you know there's a better alternative it's up to the individual to decide whether to use it or not...
(Bad wilson! you wern't going to write that last bit were you? Go stand in the corner!)
Nick
i agree with your comments Nick_w, but not all web pages should look the same, be boring with tiny super fast loading images, tons and tons of text and hyper links per page, and crammed full of optimisation. if they were all like this then the web would be a boring place. im sure many car makers have gone "yeesh" to many ideas, but if all cars were the same, that wouldnt work either.
Be it using CSS any form of HTML or any other format, it is my prfessional design opinion that the design will look better centralised, and so that is what i shall do...
Gimme a "T"! Gimme a "A"!
(etc)
too much caffeine this afternoon I guess.
Here's something I did <table>less that demonstrates my original <body> tag and margins post...
[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
margin: 0;
padding: 1em 20% 1em 20%;
background-color: #FFFFFF;
color: #000000;
} p, ul, li, dt, dd, h4 {
font: 1em verdana, arial, helvetica, sans-serif;
}
h1 {
font: 1.7em bold arial, helvetica, sans-serif;
padding: .2em;
border: 1px solid #000000;
}
h4 {
font-weight: bold;
}
</style>
<title>Example of centered column</title>
</head>
<body>
<h1>Example of centered column</h1>
<p>You can stick anything in here, even <em>Gasp!</em> tables!
This is something I had already that demonstrates what you want to
do, to a certain extent. You'll need to mess with it of course ;-)
</p>
<p>By using percentages as opposed to fixed fixed width you allow
your users to see a page that flows with their browser window.</p>
<ul>
<li>Really high rez types resize their browsers</li>
<li>Really low rez types still see a nicely proportioned
page</li>
<li>Most users see the page at a very comfortable level</li>
</ul>
<h4>Adjustments</h4>
<p>Just mess with the percentages in the body rule, there's no
reliable way to center a fixed width div with CSS without resorting
to nested divs as demonstrated in an earlier discussion by
<strong>Mivox</strong>.</p>
<p>Have fun!</p>
</body>
</html>
[/pre]
Nick
(However, the "margin: auto" technique that makes nested divs work with a fixed-width center layout wasn't my idea... My nested div layout was to create a centered, fluid-width layout that worked in NN4. ;) I almost never used fixed-width layouts anymore!)
anyway, some good thoughts, and thank you very much for all your comments.
One last thing, how would i best get it so at say 800/600 it would display say 90% or 100% width, but once the window is resized and enlarged it then proportionatly scales like it does at present...?
Indeed a good example and definitely preferable to tables because, among other reasons and correct me if I'm wrong, it takes less processing power/time to render than it does to render a table.
However, the border around the h1 doesn't render in NN 4.7. In fact, for some reason, it looks like either the css font formatting isn't taking hold on nn 4.7 or it just plain looks different.
I've made a choice to include NN 4.7 people for my site and so do some of my clients. Some clients don't care and for them I'll style it a little more modern.
I'm not really interested in doing sniffers and multiple pages for different browsers, however. Unless I'm being paid by the hour. :)
strait HTML?
That is straight HTML. As defined by the w3c. There's nothing fancy about it, it's how you are supposed to write html documents.
As for 'faster to load' etc:
Yes. Build it with tables, see just how much more code you need. If you put that CSS in an external sheet you can call it on every page of your site and then:
how would i best get it so at say 800/600 it would display say 90% or 100% width, but once the window is resized and enlarged it then proportionatly scales like it does at present...?
Just set those margins to 10% each and it will look pretty good an the most popular resolutions and like I said, those with high rez will be used to resizing their browsers anyway...
Liquid design - Valid code - CSS layouts - Accessibility etc is all one mindset. If you can get your mind round the idea of a fluid, changeable page you'll have lot's of fun. Rather than pixel tweaking all day every day.
Don't take my designs as good examples as I'm hopeless visually, I can't even pick nice colors. Have a look at the Mod's of this forums sites and some of the other CSS die hards that hang out here ;-)
<added>
takes less processing power/time to render than it does to render a table.
Damn right! Tables need two passes if they contain images and stuff I believe. If you're happy with your pages flowing into place as the browser interprets your styles (I love that!) then you're laughing ;)
NN4? What's that? ....just kidding, didn't even consider it in my example. It's a problem with the shorthand font declaration and not specifying a border rule for each border I believe...
</added>
Nick
while were talking of layouts not working..what about the "start new thread" and "reply to thread" links on the bottom right...? hehe...
xhtml/css layout... A little investment of time and you'll never look back...
yeah! this is definitely a good one!
<table width="100%"
border="2"
cellspacing="0"
cellpadding="4"
align="center"
bordercolor="#800000">
(this for the left margin)
<tr><td width="20%"
align="center"
valign="top"
bgcolor="#FEBBB1">
some text here
</td>
(this for the center area)
<td width="60%"
valign="top"
bgcolor="#DDEED1">
Some more text here
</td>
(this for the right margin)
<td width="20%"
align="center"
valign="top"
bgcolor="#FEBBB1">
Text here
</td></tr></table>
Works for me and in most browsers.
Ann
Nick
Ann
With the notable exception of NN4 though! If your visitors show a high percentage of NN4 users then a table based layout is probably wht way you should go...
Nick
the idea of a site that is identical in all browsers was never a realisable goal...it's getting further away not closer...so my view is that it's far easier and far more effective to embrace the idea of a site looking very different to different users whilst remaining usable for all of them
You say tomatos and I say tamatoes....I use what I like and know the most about....I am not into the whole keeping up with what one browser shows and one doesn't...I like to call it the kiss system....my personal kiss system.
Some do, some don't, some will and some won't...what can I say...shoot me, I'm gonna go take a nap!
:)
Ann
Of course, it's always smart to learn how to do it the CSS way, and I do. Ironically, it's easier to do good css than it is to do it with tables. And I wish I could skate along by sticking with it but reality dictates I have to, for some clients, stick with tables.
Oh no! Tomatoes again!
Yawn...I still haven't had my nap yet.
Ann
Edited by ann: If you go with the tables and decide to add a bottom table as I did in my page be sure you do not have a carriage return (white space) between the ending table tags and the beginning table tags...netscrape hates that.
