InsanelyMac Forum > web page alignment

Full Version: web page alignment - please help

InsanelyMac Forum > Everything Else > Creativity > Web and Graphical Design

loretta

Jun 26 2008, 11:50 AM

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

hecker

Jun 26 2008, 01:41 PM

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

hecker

Jun 28 2008, 08:20 AM

QUOTE(k@vosh @ Jun 28 2008, 09:42 AM)

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.

Tim Smart

Jun 28 2008, 08:32 AM

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!

loretta

Jun 28 2008, 11:31 PM

Thanks!
Used table suggestion... so simple.

Webster

Jul 2 2008, 10:35 PM

Hmm... but you might wanna study CSS anyways, it's pretty usefull.

DiaboliK

Jul 2 2008, 10:50 PM

heres a nice skeleton i just whipped up:

CODE

<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:

CODE

*, html, body { width:100%; height:100%; overflow:hidden;}

hope thats useful
-D-

inimicus

Jul 7 2008, 07:06 PM

margin: 0 auto;

audidubber

Oct 24 2008, 05:32 AM

Hey! great code! i was wondering how to center div layers as well. : )

jaikob

Oct 24 2008, 10:33 AM

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;
}

monoblock

Nov 25 2008, 07:03 PM

Actually setting a width and marging to "0 auto" of a div-container is the correct way doing it in css.

HTML

CODE

CSS

CODE

div#wrapper {width:500px;margin:0 auto;}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.