Member Avatar for dj-sound

Hi All,

Have tried to center my webpage with no luck quite new to building them.


Have tried diffrent way but no luck.

any help would be fantastic.

  • 5 Contributors
  • 10 Replies
  • 173 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by tiggsy

Recommended Answers

All 10 Replies

Member Avatar for meisjen

When you say center, do you mean making the webpage even? The best thing in photoshop is to turn on the grids and use the guides.

For grids, go to View -->Show-->Grid This will automatically show your webpage in even blocks, sometimes they are uneven you might have to adjust the canvas size or trim.

The guides are essential if you want to place layers on your webpage and have them even with the rest of the design (or if you want to center images). Just go to View-->New Guide choose vertical or horizontal (just drag the guides where you want according to the grid). The guides snap to the grids automatically so you shouldnt have a problem properly centering with this method.

Member Avatar for teedoff

What?? Last two replies??


To center a web page element, you need three things. A valid doctype, a width less than its containing element, and setting margin: 0 auto; on the element.

So for instance, if you have a div with an id of container that encompasses your page:

#container {
       width: 960px;
       margin: 0 auto;
}
Member Avatar for meisjen

Okay obviously I was confused and thought the OP meant photoshop cs4, that's my error. I'm just trying to help.

In any case OP I guess you mean Dreamweaver, if you are just trying to center information in your webpage you can simply use center tags in the body.

<center> info goes here </center>

Most people put them in tables first and just center the table.

Otherwise you can do as teedoff suggested and add to the css properties to center the whole layout

Here's a vid on how
http://www.youtube.com/watch?v=aVXwX80PBQQ

Member Avatar for tiggsy

To center an entire web page you need to have this in the css:

body {
 position: relative;
 margin: 0,auto;
 ...whatever else you have here...
}
Member Avatar for teedoff

Okay obviously I was confused and thought the OP meant photoshop cs4, that's my error. I'm just trying to help.

In any case OP I guess you mean Dreamweaver, if you are just trying to center information in your webpage you can simply use center tags in the body.

<center> info goes here </center>

Most people put them in tables first and just center the table.

Otherwise you can do as teedoff suggested and add to the css properties to center the whole layout

Here's a vid on how
http://www.youtube.com/watch?v=aVXwX80PBQQ

I realize you're just trying to help and I apologize if I sounded brash. However, again the advice you are giving is not very good. The <center> tag is deprecated and should not be used! You can read more about deprecated tags, including the <center> tag here.

Also I dont recommend youtube for ANYTHING in relation to learning web design and/or coding. You really dont know WHAT you're getting watching those videos. Would you want your surgeon watching youtube to learn how to perform a new procedure that you are getting ready to undergo?..lol Youtube is rather like wikipedia....cant be trusted in cases like this.

Edited by teedoff because: n/a
Member Avatar for teedoff

To center an entire web page you need to have this in the css:

body {
 position: relative;
 margin: 0,auto;
 ...whatever else you have here...
}

I also again have to discourage the use of positioning unless absolutely neccessary.

<body>
<div id="container">
All your page content within this div and centered in the web browser using CSS following.

</div>
</body
#container {
         width: 960px;
         margin: 0 auto;  
}

Thats how to center a page in the browser. 960 pixels is a common width that displays well on the majority of displays a user may use.

Member Avatar for drjohn

teedoff is right.
It's as simple as that.

Member Avatar for tiggsy

Ok this is meant to be blank (i am removing a duplicate, as it was invisible until i posted a second time, duh.)

Edited by tiggsy because: n/a
Member Avatar for tiggsy

Or if you don't want to wrap a div "container" round everything you can do it the way I said.

You do have to specify a width as well (body width), but obviously you're going to do that, as otherwise there's nothing to center.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.