HTML Forum

**adrotlef** · 06:57 AM

Hey everyone, I am basically completely new to dreamweaver. I am trying to set up a very simple webpage, and I have it all layed out with div tags, etc. The one thing I cannot figure out for the life of me right now if how to center the content on the page, as well as have it center under any resolution screen. I have read dozens of threads on it, and have the code to do it. But my problem is that I do not know code at all, and therefore I do not know how to insert the code to make it work. Plus, Ive been working with design view for everything else and all I need code for is to center the page. To be honest im not trying to be a professional web designer so I dont want to read through 500 pages of code manual (that I bought...) to figure it out, I just want to center my web page already

THE HTML:

HTML Code:

 <body>
<div class="wrapper"> ALL content goes here </div>
</body> 
THE CSS: body {
text-align : center ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

1. Does it make a difference if I use the css code or the html code?

2. Where / how do I insert this code into the code screen?? I tried to put it in at the bottom, I tried put it in at the top, I tried to wrap it around other content, etc. I just dont know and thats the one thing none of these threads tell you, is where / how to put it in...

for html code, it says "all content goes here" are you supposed to copy that code in, and then copy every bit of existing code into that?"

If it would help to see the existing code I will put it up.

Please help me!

**Madman340** · 04-24-2010, 01:56 AM

In the wrapper CSS, remove margin-left and margin-right, and put in "margin: 0 auto;"

That should center it.

**adrotlef** · 06:58 AM

Ok, I put this code in after all of my other existing code

HTML Code:

body {
text-align : center ;
}
div.wrapper {
text-align : left ;
margin : 0 auto ;
}

and it didnt change anything.

Do I have it written correctly? I havent used any absolute positioning of div tags

**aldor** · 04-24-2010, 04:54 PM

I suggest you look at the stickies at the top of CSS forum on this site.

But to point you in the right direction you need to specify a width in your wrapper div.

You can place your CSS in either a seperate file or in the head section of the page between <head> and </head>.

To use a seperate file you link to the file by putting this in the head section of your page <link href="css/site.css" rel="stylesheet" type="text/css" /> where css/site.css is the path and name of your css file.

To place it in the head section start with <style type="text/css"> then put your css here and finish with </style>

**adrotlef** · 06:17 PM

Thanks Aldor I was able to get the code in the right place (I would have never figured it out without your explanation) it made it so text centers but it still didnt center the div tag. I put in a width, not sure if I did it correctly.

heres my code, theres not much too it but hopefully someone can show me what I am missing still. Also, sorry for not putting the code in the scroll box, I would but I dont know how

...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[URL]http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
}
body {
text-align : center ;
}
.enter {
 background-attachment: fixed;
 background-image: url(../Images/Landing%20Page%20B.jpg);
 background-repeat: no-repeat;
 height: 600px;
 width: 780px;
}
div.wrapper {
text-align : left ;
margin : 0 auto ;
width : 780px ;
}
</style>
<style type="text/css">
<!--
body {
 background-color: #000;
 background-repeat: no-repeat;
}
-->
</style></head>
<body>
<div class="enter">Content for  class "enter" Goes Here</div>
</body>
</html>

**Marik** · 04-25-2010, 10:56 AM

Judging by your most recently posted code, you are trying to center the wrong element. In it, you are attempting to center an element called "wrapper" which doesn't even exist in your html. Try this instead:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    text-align : center ;
    background-color: #000;
    background-repeat: no-repeat;
}
.enter {
    background-attachment: fixed;
    background-image: url(../Images/Landing%20Page%20B.jpg);
    background-repeat: no-repeat;
    height: 600px;
    width: 780px;
    margin: 0 auto;
    
    /* remove this to get rid of red border */
    border: 1px solid red;    
}
div.wrapper {
    text-align : left ;
}
</style>
</head>
    <body>
        <div class="enter">Content for class "enter" Goes Here</div>
    </body>
</html>

**adrotlef** · 04-25-2010, 04:26 PM

Thanks Marik! That helped me out so much!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!