PDA

View Full Version : centered content tutorial


up4dw
09-06-2008, 04:54 AM
I am new to Dreamweaver and programming as well. I wonder if someone can help me to get started.

I am asuming in the html code screen should look somthing like this.
<body>
<div class="wrapper">
All my code already between <body> & </body> goes here
</div>
</body>

asuming I am corect where does the css code go? I hope this question is not to stupid for this forum. Thanks Loren

body {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}

edbr
09-06-2008, 05:01 AM
best to add it to a seperate page ie: layout.css and import it in DW or you can add the code as a style in the head of your document while you design it.

edbr
09-06-2008, 05:05 AM
and welcome to the forum

up4dw
09-06-2008, 05:11 AM
Ok cool thanks edbr that wasn't so hard :grin:

best to add it to a seperate page ie: layout.css and import it in DW or you can add the code as a style in the head of your document while you design it.

up4dw
09-06-2008, 05:21 AM
Ok that is totally cool for the people who have their resolution set to 800. Now what about the other people? Is there a way to let the page expand for people who have their resolution set high and still please those who donít?

Seems a shame to waste all that real-estate

edbr
09-06-2008, 05:25 AM
fluid design with widths set at percentages.
Have a look at this thread, I made a page for a different reason but it might help you anyway.
http://www.dreamweaverclub.com/forum/showthread.php?t=28749

up4dw
09-24-2008, 03:52 AM
For some reason my content seems a little padded to the right. www.hardydiesel.com Any Idea's why? Should I decide to remove this css sheet and have my pages go back to justify left what would be the proper or best method?

up4dw
09-24-2008, 05:24 AM
Figured it out. My table is 1000

had to adjust the css sheet from 770

body {
text-align : center ;
min-width : 1000px ;
}
div.wrapper {
width : 1000px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}