loretta Posted June 26, 2008 Share Posted June 26, 2008 Hi, Can anyone help me? I'm learning to use dreamweaver on a mac and have published a couple of sites but I can't work out how to create a page that adapts to the size of the screen! I want to be able to centralise my content rather than having it off to the left... For an example see www.lakimera.com. I'm sure it's something simple but I just don't get it! thanks... Link to comment Share on other sites More sharing options...
hecker Posted June 26, 2008 Share Posted June 26, 2008 You should read a CSS tutorial. It's quite simple actually: http://webpageworkshop.co.uk/main/css_center_page Or using good old fashion tables with a centered column: http://www.w3.org/TR/html401/struct/tables.html Cheers, hecker Link to comment Share on other sites More sharing options...
hecker Posted June 28, 2008 Share Posted June 28, 2008 hi friend you can change height and wieght to 100% to fit to screen and you can learn css to apply style to that but if you build your site without css is better (build with html) or you can draw it with PHP for better quality and merge that with flash Please don't give advice if you have no idea what you're talking about! - CSS is todays standard for web layout and is much more flexible than using TABLES. - Changing the height and width (not weight) to 100% DOES NOT center anything but merely stretch everything out breaking the element's proportions. - Draw with PHP? You have obviosly never worked with PHP and have no idea about what it is. PHP has absolutely nothing to do with the quality of your site. It is not a web layout mechanism (it can generate code that is interpreted as such, though) but a programming language. - Using flash is a valid alternative but that is not considered WEB programming per-se. Link to comment Share on other sites More sharing options...
Tim Smart Posted June 28, 2008 Share Posted June 28, 2008 Put your content in a container div, then align that div / resize it according to how you want it to display. Send me a PM and give me a instant messenger username and I can help you a bit more. I want to make sure you are using proper standards and CSS, because it will make your future work a lot easier! Link to comment Share on other sites More sharing options...
loretta Posted June 28, 2008 Author Share Posted June 28, 2008 Thanks! Used table suggestion... so simple. Link to comment Share on other sites More sharing options...
Webster Posted July 2, 2008 Share Posted July 2, 2008 Hmm... but you might wanna study CSS anyways, it's pretty usefull. Link to comment Share on other sites More sharing options...
DiaboliK Posted July 2, 2008 Share Posted July 2, 2008 heres a nice skeleton i just whipped up: <html> <head> <style type="text/css"> *, html, body { height:100%; width:100%; overflow:hidden; } #container { background:#cccccc; width:90%; height:80%; margin:auto; text-align:center; } </style> </head> <body> <div id="container"> <p>Everything in this container is 80% height of broswer window and 90% width of browser window</p> </div> </body> <html> the trick is this: *, html, body { width:100%; height:100%; overflow:hidden;} hope thats useful -D- Link to comment Share on other sites More sharing options...
inimicus Posted July 7, 2008 Share Posted July 7, 2008 margin: 0 auto; Link to comment Share on other sites More sharing options...
audidubber Posted October 24, 2008 Share Posted October 24, 2008 Hey! great code! i was wondering how to center div layers as well. : ) Link to comment Share on other sites More sharing options...
jaikob Posted October 24, 2008 Share Posted October 24, 2008 Or, you can set the Div container width, and set margin left and right to auto. #yourdiv { width: 800px; margin-left: auto; margin-right: auto; } Link to comment Share on other sites More sharing options...
monoblock Posted November 25, 2008 Share Posted November 25, 2008 Actually setting a width and marging to "0 auto" of a div-container is the correct way doing it in css. HTML <div id="wrapper"> <!-- Content --> </div> CSS div#wrapper {width:500px;margin:0 auto;} Link to comment Share on other sites More sharing options...
Recommended Posts