how to center in browser
- Started
- Last post
- 25 Responses
- drubynum
Can anyone tell me how to make my site sit in the center of the browser window? Can't it be done with style sheets?
- CAJTBr0
the simplest way is to have the body style set to text-align: center and then encapsulate your content in a div.
- keiTai0
Hi,
One way to do it is:
Make a table with 1cell set the width and heigth to 100%. Then give the td a center hori and middle verti
- visible0
table align=center O_o
- drubynum0
thanks a ton!
- dsmith70
if you want to litterally center the browser you should do it with javascript. there are a couple of different ways to do this. check out http://www.jsexamples.com in the Window section.
- mbr0
Make a table 100% in height and width, place another table in it, stick your site in that table. Set the align in the first table to center and middle. Takes about 5 seconds in Dreamweaver. That's what I did with my site.
- sp0
or, you could do it the CORRECT way and use 'display:block' with margin-left:auto, and margin-right:auto in CSS.
it is poor practice to use tables for layout, since they're intended for spreadsheet data and that is all.
and, using text-align:center in the body with css only works in a couple of browsers.
the correct and compliant way to do it is with display and margins.
- mbr0
sp - I understand what you're saying, but does it really make any difference? I don't really do too many sites and as such don't keep up to date on the 'correct' way to do things.
- edgar0
sp - poor practice to use tables for layout? Must be a troll?
- dsmith70
"it is poor practice to use tables for layout, since they're intended for spreadsheet data and that is all. "
Are you kidding?! I think you better re-evaluate your aspect on tables. Tables grant you to make your designs and layout reflect exactly what you created. Not trying to be harsh just trying to open you to the world of tables as a layout tool.
- the_user0
can't wait for the day when tables are no longer a "layout tool."
might be waiting a looong tim though...
- sp0
apperantly no one keeps up on xhtml and standards.
tables were never intended for layout or formatting purposes.
html itself wasn't intended for it, really.
separation of style and content.
maybe if more people concentrated on learning how to actually do web design instead of how to use software, they might know a thing or two.
please, if you are serious about being a web designer, at least go read some articles on proper design.
the more browsers become standard compliant and accessible, the less poorly written markup will work.
example - the 'center' tag has been defunct for a while now, thanks to the release of the latest w3 recomendations.
do it right or don't do it.
imagine if a carpenter decided not to use nails because he heard thumb tacks worked better.
the longer people continue to write shitty code, the longer it will take the web to actually mature as a design medium. plain and simple.
go read up at the w3. or at alistapart/webstandards.org or somewhere other than the latest dreamweaver tutorial.
- unknown0
what an angsty bitch.
who cares how it's done, as long as the product is beautiful and functional?
- sp0
but it's not functional. if it doesn't work in everyones chosend medium it fails as functional.
fact is, as a linux user, text-align center would justify left. why? because it's not correct.
especially if you are using the proper doctype.
60% more sites fail on my system than would on internet explorer and windows.
and, with mac moving into unix, expect that number to rise on their platform as well.
i'm not angry, i'm practical and have doing this for a long time.
- quamb0
the internet originally was not intended for portfolios, movie trailers and design portals...
tables have become a tool for web designers to layout content, be it images, text, whatever.
we hear your wc3 standards advice, which is very important, though perhaps its not TABLES which are being used incorrectly, but div and align tags.
- motivdesign0
It basically all comes down to pride. People who take pride in their work and their code will probably habitually do their best to write compliant, concise, cross browser code.
It's the stuff that dedicated people do.
Now, everyone who publishes shit to the web is doing it for different reasons, and for some people, compliant code and standards don't mean anything, but that doesn't mean you need to shit on someone and call them a 'bitch' for offering up knowledge and information that may someday be useful to you.
Would you like your mechanic to take a "who cares as long as the car moves down the street when I press the gas pedal" approach when he's working on your car?
Maybe. Maybe not.
- sp0
div, when used properlly - and that means with the correct doctype, can do anything a table can do and a little more.
for instance, with divs as the layout you can have different columns be vertically liquid isntead of conforming to the overall block size.
so, if you don't want the content in column 1 to be the same height in column two - possible because there is less verbage or imagery, then it doesn't have to.
where as with table cells, cell 1(column 1) and cell 2 (column 2) would both be the same height because the table itself determines height restictions.
not effective you are trying to stack rows in a column and have those rows change height accourding to position and amount of content.
in all actuality, the only reason to use tables is to display data in spreadsheet form.
of course, the downfall is - and this is true with just about anything - backwards compatibility is none existant.
there are ways of retro-fitting sites, but it's best to just accept that a) 4.x browsers are a thing of the past, and b) not everyone uses windows and internet explorere.
- sp0
damn type-os.
:)
yea, i wouldn't want my mechanic to put 10 year old parts on my 1 year old car because that's the way he learned to do it first...and he's too afraid to update his skillset.
- unknown0
i thought the tables method was compliant.
so my bad.
- sp0
tables validate xhtml comliant, yes, you are correct there.
but their purpose is for tabular data.