I'm redoing my dads website. Everything in this picture is in its own div tag. How can I center everything? Do I need to use css to do this?

http://www.atriskstoriesofhope.com/newsite

Put everything into a "container" div, then specify "margin:0 auto" for that div.

Originally Posted by angele803

Put everything into a "container" div, then specify "margin:0 auto" for that div.

Can you tell me if this is right?


<div class="container" margin:0 auto>

<div style ="position: absolute; top: 4px; left: 228px; width: 267px; height: 48px;"><img src="http://www.atriskstoriesofhope.com/newsite/images/logo.jpg" width="720" height="72"></div>
<div style ="position: absolute; top: 306px; left: 2px; width: 267px; height: 260px;"><img src="http://www.atriskstoriesofhope.com/newsite/hectornew.jpg" width="299" height="268"></div>
<div style ="position: absolute; top: 83px; left: 273px; width: 621px; height: 80px;">
<script language="JavaScript1.2">mmLoadMenus();</script>
<img name="menubar" src="images/menubar.gif" width="750" height="50" border="0" usemap="#m_menubar" alt="">
<map name="m_menubar">
<area shape="rect" coords="429,17,474,35" href="http://www.google.com" alt="" >
<area shape="rect" coords="321,17,398,35" href="#" alt="" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1003011241 _0,70,-50,null,'menubar');" >
<area shape="rect" coords="249,17,286,35" href="#" alt="" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1003011006 _1,-30,-50,null,'menubar');" >
<area shape="rect" coords="177,17,227,35" href="#" alt="" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1003010459 _0,-120,-50,null,'menubar');" >
<area shape="rect" coords="105,17,140,35" href="#" alt="" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1003010420 _1,-150,-50,null,'menubar');" >
<area shape="rect" coords="33,17,68,35" href="#" alt="" >
</map>
</div>
<div style ="position: absolute; top: 294px; left: 334px; width: 588px; height: 290px;">
<TABLE width="100%" border=0 cellPadding=2 cellSpacing=2>
<!--DWLayoutTable-->
<TBODY>
<TR>
<TD width="677" height="274" valign="top"><font color="#000000">&nbsp;<IMG src="http://www.atriskstoriesofhope.com/newsite/images/HectorWithKids.jpg" align = left alt="Hector Perez - Earhart School in Southwest Detroit" width=215 height=134 hspace=10 vspace="0" border=1 style="WIDTH: 194px; HEIGHT: 139px">A
sculptor and muralist whose bold work is on several Metro Detroit buildings,
Perez teaches through the art he creates.&nbsp; Students who work with
him learn as much about history and culture as they do about paper-mâché
and painting. <EM>"If art doesn't serve a purpose for society, it is
not reaching its full potential," </EM>says the 45-year-old who teaches
art, bilingual and special education.&nbsp;A mural painted this year
inside Logan Elementary traced the Detroit school's history from a largely
Polish to mostly Hispanic student body.&nbsp; Principal Maria Elena
Vasquez said "mini-artists" vied to help Perez decorate the wall.&nbsp;<EM>"He
touched a lot of kids,"</EM> she says, <EM>"and he uncovered a lot of
natural talent, abilities." </EM>Today Perez and his wife reside in
Corktown.&nbsp; The oldest of their five children-including two college
art students-help their father work with neighborhood youth.&nbsp; <EM>"I'm
trying to give my kids a sense of community," </EM>Perez says. <EM>"It's
not all about making money."&nbsp;&nbsp;&nbsp;&nbsp; </EM></font></TD>
</TR>
</TBODY>
</TABLE>
</div>
</div>

<div class="container" style="margin: 0px auto;">

^Change that. He means in CSS. That should do the trick.

Originally Posted by coolkbk585

<div class="container" style="margin: 0px auto;">

^Change that. He means in CSS. That should do the trick.

Ok, so I'm a little lost. I know absolutely no css. Can you teach me from scratch on what I need to do. Do I need to make a separate css file?

Thanks

Tonyo here's a good css tutorial from W3Schools. It's pretty easy to understand and quick to get through and a good place in general to get started.

The basic structure you want is

<div id="container">
everything else you need for the page
</div>

and your css would be

div#container {width: 780px; margin: 0 auto}

You don't need the width to be 780px, but you do need to specify a width. The margin code is saying no margin on the top and the bottom and auto for the left and right. Auto will center things.

Your css will ideally be located in an external file, but it could be in the head of the document. External is the much better choice.

To make the centering work you'll want to use a proper doctype at the start of your document. Here's a good article on doctypes if you're not familiar with them

Also you'll have problems with all the positioning you're using. Usually when laying out a site it's better to use floats and margins to achieve what you're trying to do with the positioning.

I hope some or all of the above helps.

Originally Posted by vangogh

To make the centering work you'll want to use a proper doctype at the start of your document. Here's a good article on doctypes if you're not familiar with them

Also you'll have problems with all the positioning you're using. Usually when laying out a site it's better to use floats and margins to achieve what you're trying to do with the positioning.

I hope some or all of the above helps.

How would I go about using floats and margins to do what I want to do? Can you point me to a good tutorial?

Thanks

Yea the whole site after the <body> tag can be put inside a div container
declared using a class or directly using it on the div tag

like
<body>
<div id="container" align="center" style="width: 800px;">
whole website comes here
</div>
</body>

that 800px can be your sited width

Tonyo I wrote a couple of tutorials on creating a 2 column layout and 3 column layout using css that might help.

There are certainly other ways to achieve the same layouts and I'd probably develop them a little bit differently since I wrote the tutorials, but I think both explain the basic concepts well. At least I hope they do.