Solarpitch Posted January 5, 2007 Share Posted January 5, 2007 Hi Guys,Could someone please tell me how or even show me a tutorial where I can allign my web page in the center based on the user's screen size/ resolution.http://uk.gamespot.com/ has a PERFECT example of what I am talking about. When you resize the window, the design stays centered. I need it to adjust like that.Appriciate any help,Gerard Quote Link to comment Share on other sites More sharing options...
chronister Posted January 5, 2007 Share Posted January 5, 2007 If you are using tables, then add align="center" to the table, if you are using a <div> css type layout, then add an attribute to your css to specify the topmost div tag be centered.I may be off base here, but that's how I keep all my stuff centered. I usually use a table layout. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 5, 2007 Share Posted January 5, 2007 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOuse css for thisin your css put thishtml { width: 100%; }body { margin: 0px auto; }if you give your body a %width or a fixed width it will be centered in your page. Quote Link to comment Share on other sites More sharing options...
Solarpitch Posted January 5, 2007 Author Share Posted January 5, 2007 cool . . that sonds good. ill give it a try later, thanks. Quote Link to comment Share on other sites More sharing options...
chronister Posted January 6, 2007 Share Posted January 6, 2007 ToonMariner , you are obviously a css layouts person. It is still debatable whether to use css layouts or table layouts. I understand the "proper way" is to use CSS, but I answered the question with both items tables and css.I find it easier to use tables, and maybe one day will tackle the whole css layouts thing, but for now I use tables as do millions of other web designers, so the NOOOOOOOOOOOOOOOOOOOOOOOOOO is uncalled for. Maybe Solarpitch is using table layouts... if so, then a simple align="center" will work, which is why I gave that answer and the css answer.Nathan Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 6, 2007 Share Posted January 6, 2007 Apologies mate - I didn't read anything after 'If you are using tables, then'......I do apologize its just tables anger me a great deal - unless you are using them for TABulating data of course;) Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 9, 2007 Share Posted January 9, 2007 [quote author=ToonMariner link=topic=121090.msg498380#msg498380 date=1168118369]Apologies mate - I didn't read anything after 'If you are using tables, then'......I do apologize its just tables anger me a great deal - unless you are using them for TABulating data of course;)[/quote]What angers me is still having to often use tables for layout in the first place. In the real world, Microsoft simply does not allow us to code properly. And so long as a large percentage of users still use IE 5.5 (and now IE 7.0), I am FORCED to compromise all integrity and occasionally use tables for business websites.And (speak of the devil) now with the BS they pulled with IE 7.0 (fixing the bugs that permitted the work around "hacks" without fixing the reason the hacks were necessary), MS has proven to be the snakes they are. They want the world to use IE, period. And they will do anything they can to force coders to compromise.So we have three choices - use tables for quick, easy and guaranteed layout positioning, continue using web standards CSS (with the hacks) and potentially have your web pages now blow up in IE 7; learn their annoying, proprietary conditional expressions to force proper layout and conformity with web standards (while bloating your page weight with more code).I feel and share your pain TM. But try as we might, attempting to force MS to get with the program is futile for business websites.The only way for coders to unite and force MS to give in, is if we all make entertainment and personal websites using 100% w3c web standards code.But with the garbage put out by most web editors and online web generating sites like "myspace" etc., it's a tall order.Look at most of the posts here ... they are either: "My site works fine in IE" or "My site doesn't look right in FF".Look at 99% of the sites created in the "website critique" forum. No doctypes, massive markup styling, dreadfull html tagging, broken table nesting, missing <html> tags, etc. And nearly all of them will work in IE but no where else.Look at most of the large commercial grade websites ... most are still quirks mode crap code (even the new ones!) Do you think the coders who were paid reall big buck to create them don't know standards? No, their clients want to reach the widest possible audience. And unfortunately that audience using various flavors of IE.It's going to be a long drawn out battle until we are out of the dark ages of website creation - it will take MS finally knuckling under.Meanwhile, we need to get a paycheck.(sorry for the rant, LOL). Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 10, 2007 Share Posted January 10, 2007 I switched to table-less layouts about 2 and a bit years ago. The only time I use a table is to display tabulated data.I have changed my design approach (not graphics - I can't drive photoshop to save my life - seriously a drop shadow is a major achivement for me ;) ) to the extent that in the last 12 - 18 months I don't remember using any css hacks to get my sites having the same feel in ie, ff, opera and (of late I might add) safari. I don't bother with other browsers apart from amaya - which I just use to see what my sites will look like in years to come ;).The reason for this is that in order to make your sites as usable as possible on as many platforms/devices as possible is that you HAVE to compromise somewhere. Where? Standards compliance - although 'compromise' is so far away from the right term there; the real term is probably more like awakening - from the land where tables were teh dominant gene and seeing past them was impossible because of teh sheer mass of junk html needed to maintain their presence.I have found that adopting a standards compliant method actually reduces the development time for sites - I am sure those who have made the switch will agree. Many ignore the importance of the doc type declaration and what that can do for you. (If you are un-aware google 'doctype switching'.) I now exclusivle design in strict xhtml 1.1 and validate my code. According to bobby/webxact my recent sites have all met the wca priority 3 checkpoints (the automatic ones - manual check points are compliant but only my word for that!)Clients are much happier getting something for 'nothing' and while most are unaware of accessibility issue and whether it applies to them, or the mechanisms in getting a good search engine rating etc. etc. they quickly see the benefit of having these on there site with minimal sacrifice on design (ok some but very little) and more importantly cost.It is far cheaper to build and maintain one site that serves the web, mobile phones, hand held pcs, screen readers, braille devices etc etc. than creating something for each. Standards allow you to achieve this - without a table in sight unless you WANT to use one not NEED. Quote Link to comment Share on other sites More sharing options...
fenway Posted January 10, 2007 Share Posted January 10, 2007 I'm curious... what specific sacrifies are we talking about? Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 10, 2007 Share Posted January 10, 2007 ???Example - client wanted a div positioned absolutely at the bottom of another div. All browsers complied except safari and IE 5.5 and less. By placing the div just below the what was intended to be its parent solved everything - withoud using some relative position it leaves a slightly longer gap after the main content area - but not so that you'd cry - a little compromise has brought that particular aspect of the site into a consistent display on ie5+ opera, safari firefox etc. Quote Link to comment Share on other sites More sharing options...
fenway Posted January 11, 2007 Share Posted January 11, 2007 And you don't cringe when you have to do vertical centering of an arbitrary element? Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 11, 2007 Share Posted January 11, 2007 TM, do you never have to show equal sized boxes side by side?For most of my real estate site work, I need to have a list of available apartments. This list shows a small photo, a description, price and agent name and contact info.Since the data is entered by our listings dept. I can't control how much description, amenities, etc to include. So if I use floated divs, unless I fix the heights, the boxes will have inconsistant heights when dynamically generated from the DB.There was an intrepid attempt to force equal height boxes by Roger Johansson [url=http://www.456bereastreet.com/lab/equal_height_ii/]http://www.456bereastreet.com/lab/equal_height_ii/[/url] but it only works in real browsers and not any IE flavor.This is where I am occasionally forced to use a table. I have two real estate sites where I was able to control content size and/or make the height of all boxes the size of what I know to be the largest amount of data (http://www.regisresidential.com/drentallist.php?comment=new) and for those that may have more description, I just put a "more" link to the item detail page.But it is still not an easy solution. How do you handle dynamic equal height boxes (if you need to)?Dave Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 12, 2007 Share Posted January 12, 2007 float the left panel. at the very end of teh right hand panel place <div class="clear"></div>and in the cssdiv.clear{ clear: both;}That will ensure that the righ column is always as long as the left if not more. If you need some kind of graphical design of teh floated column then use teh faux column method. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.