PDA

View Full Version : Center Website Content


petsmart
10-02-2010, 02:21 AM
Hello,

I am new to this site. I am not really experienced when it comes to web design. I have tried to build a website with Dreamweaver for someone.
The problem I have is to center the website meaning view it at different window screen sizes. I have heard about the wrapper technique, and viewed a tutorial but I am still lost.
May I ask someone for help?

Here is the website I build for someone else.

http://www.epostrade.com (http://www.epostrade.com/)

Thank you!

edbr
10-02-2010, 03:11 AM
hi welcome to the forum.
basically a so called wrapper div that is relatively positioned with the attributes margin-left:auto; margin-right:auto; given a width say 950px, it will center , then put your content in it. Be careful using absolute positioning for dives as a rule unless you want elements fixed , its usually better to use relative

petsmart
10-03-2010, 02:47 AM
Hi,

thank you for your message.

Is it possible to show me according to my code what you mean, and where it goes?

Thank you!

<!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>epostrade.com/home</title>
<style type="text/css">
<!--
body {
background-image: url(../images/wp_NY_Skyline_1400.jpg);
background-repeat: no-repeat;
background-color: #283E77;
}
#apDiv1 {
position:absolute;
left:303px;
top:259px;
width:794px;
height:342px;
background-color: #455586;
overflow: auto;
visibility: visible;
}
.style8 {color: #2AA8DA; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style10 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-large;
color: #000000;
}
body,td,th {
font-size: xx-large;
}
.style11 {color: #FF5309}
.style14 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}
.style16 {color: #000005; font-size: 18px; }
.style17 {
font-size: 14px;
color: #000000;
}
.style18 {font-size: 14px}
.style19 {font-size: 12px}
.style20 {color: #000005; font-size: 14px; }
.style21 {color: #FFFFFF; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style22 {font-size: 12px; color: #FFFFFF; }
.style23 {color: #FFFFFF}
.style35 {color: #00ACDB}
.style36 {color: #000000}
.style37 {color: #0000FF}
.style38 {color: #2AA8DA}
.style40 {font-size: 10px}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div class="style8">
<p><img src="../images/epostrade.gif" width="540" height="128" alt="" /></p>
<div align="center">
<p><span class="style11"><br /></span><a href="index.html" class="style38">Home</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="brasilia.html" class="style38">Brasilia@Night</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="produtos_apple.html" class="style38">Produtos</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="pedido.html" class="style38">Pedido</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="contato.html" class="style38">Contato</a></p>
<p><span class="style38"><span class="style40">© 2010 Epostrade</span><br />
__________________________________________________ ____</span><br />
</p>
</div>
</div>
<div class="style10" id="apDiv1">
<table width="740" height="409" border="0" align="left" cellpadding="4">
<tr>
<td width="728" height="405" align="left" valign="top">
<p align="left" class="style21">Bem-vindo a Epostrade, </p>
<p align="left" class="style22">Aqui uma oportunidade unica de fazer negocios com tratamento diferenciado solo para o Distrito Federal. Tratamento Vip com qualidade e originalidade de produtos diretamente dos Estados Unidos e da Europa. Nao se deixe enganar por imitacoes baratas, aqui voce pode confiar. </p>
<p align="left" class="style22">Nao tem tempo de aquela viaje para os Estados Unidos e nao quer pagar caro comprando em shoping malls em Brasilia,mas gostaria de conferir e comprar os novos modelos lancados pelas mais importantes griffes do mundo faca uma consulta do produto que voce precisa que a gente tera maior prazer de consegir ele para voce. A gente fecha negocios e voce economiza.</p>
<p align="left" class="style22">O seu computador deu problemas e fica muito caro o concerto (como todo em Brasilia), ja e hora de trocar ele por um modelo novo. E muito facil, faca seu orcamento no mercado de Brasilia que a gente fara tudo o posible de conseguir uma melhor oferta para voce cliente preferencial.</p>
<p align="left" class="style22">Promocao do mes de Setembro Compre qualquer produto ate o dia 15 de setembro que voce recebera 3% de desconto na sua proxima compra feita ate o dia 30 de setembro (Obs datas a contar das compras finalizadas, pagamento feito e confirmacao deste pelo mercado pago).</p>
<p align="left" class="style22">Entao lembrece de que se voce precisar de algum presente para alguem especial o simplesmente quer ir as compras para conseguir algum eletronico em promocao faca a sua pesquisa mas fale com a gente antes de deixar seu dinheiro em nossos luxuosos shopings em Brasilia.</p>
<p align="left" class="style22">Quer dar um presente para ela ou ele, sabe quanto quer gastar mas nao sabe o que comprar nao tem problema deixe a gente lhe ajudar com sugerencias no seu orcamento. Voce tambem pode escolher aquele presente entre nossa grande selecao de produtos do nosso stock, na comodidade da sua casa somente com um click.</p>
<p align="left" class="style22">Vendas somente para o mercado de Brasília. Não enviamos fora de Brasília. Por favor, não lance se você não estiver no DF. Entrega do produto 30 dias apos a compra e confirmação do pagamento no Mercado Pago. <br />
<br />
Obrigado,<br />
<br />
<span class="style21">Epostrade</span></p>
<div align="left" class="style23"></div></td>
</tr>
</table>
</div>
</body>
</html>

edbr
10-03-2010, 05:54 AM
try your self first . if you go to the different links in my signature, the code I have given in the example has a centred content

petsmart
10-03-2010, 02:01 PM
I tried to look at your links and made some changes on the index page. I marked them in red. What happens is that the table in the middle moved down and I have a scrollbar on the right but the content does not adjust automatically.


<!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>epostrade.com/home</title>
<style type="text/css">
<!--
body {
background-image: url(../images/wp_NY_Skyline_1400.jpg);
background-repeat: no-repeat;
background-color: #283E77;
}
#wrapper {
position:relative; width:80%; height:auto; margin-left:10%; margin-right:10%;}

#apDiv1 {
position:relative;
left:303px;
top:259px;
width:794px;
height:342px;
background-color: #455586;
overflow: auto;
visibility: visible;
}
.style8 {color: #2AA8DA; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style10 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-large;
color: #000000;
}
body,td,th {
font-size: xx-large;
}
.style11 {color: #FF5309}
.style14 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}
.style16 {color: #000005; font-size: 18px; }
.style17 {
font-size: 14px;
color: #000000;
}
.style18 {font-size: 14px}
.style19 {font-size: 12px}
.style20 {color: #000005; font-size: 14px; }
.style21 {color: #FFFFFF; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style22 {font-size: 12px; color: #FFFFFF; }
.style23 {color: #FFFFFF}
.style35 {color: #00ACDB}
.style36 {color: #000000}
.style37 {color: #0000FF}
.style38 {color: #2AA8DA}
.style40 {font-size: 10px}
.content{width:80%; float:left; position:relative; border:#999999 solid 1px:}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<div class="style8">
<p><img src="../images/epostrade.gif" width="540" height="128" alt="" /></p>
<div align="center">
<p><span class="style11"><br /></span><a href="index.html" class="style38">Home</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="brasilia.html" class="style38">Brasilia@Night</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="produtos_apple.html" class="style38">Produtos</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="pedido.html" class="style38">Pedido</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="contato.html" class="style38">Contato</a></p>
<p><span class="style38"><span class="style40">© 2010 Epostrade</span><br />
__________________________________________________ ____</span><br />
</p>
</div>
</div>
<div class="style10" id="apDiv1">
<table width="740" height="409" border="0" align="left" cellpadding="4">
<tr>
<td width="728" height="405" align="left" valign="top">
<p align="left" class="style21">Bem-vindo a Epostrade, </p>
<p align="left" class="style22">Aqui uma oportunidade unica de fazer negocios com tratamento diferenciado solo para o Distrito Federal. Tratamento Vip com qualidade e originalidade de produtos diretamente dos Estados Unidos e da Europa. Nao se deixe enganar por imitacoes baratas, aqui voce pode confiar. </p>
<p align="left" class="style22">Nao tem tempo de aquela viaje para os Estados Unidos e nao quer pagar caro comprando em shoping malls em Brasilia,mas gostaria de conferir e comprar os novos modelos lancados pelas mais importantes griffes do mundo faca uma consulta do produto que voce precisa que a gente tera maior prazer de consegir ele para voce. A gente fecha negocios e voce economiza.</p>
<p align="left" class="style22">O seu computador deu problemas e fica muito caro o concerto (como todo em Brasilia), ja e hora de trocar ele por um modelo novo. E muito facil, faca seu orcamento no mercado de Brasilia que a gente fara tudo o posible de conseguir uma melhor oferta para voce cliente preferencial.</p>
<p align="left" class="style22">Promocao do mes de Setembro Compre qualquer produto ate o dia 15 de setembro que voce recebera 3% de desconto na sua proxima compra feita ate o dia 30 de setembro (Obs datas a contar das compras finalizadas, pagamento feito e confirmacao deste pelo mercado pago).</p>
<p align="left" class="style22">Entao lembrece de que se voce precisar de algum presente para alguem especial o simplesmente quer ir as compras para conseguir algum eletronico em promocao faca a sua pesquisa mas fale com a gente antes de deixar seu dinheiro em nossos luxuosos shopings em Brasilia.</p>
<p align="left" class="style22">Quer dar um presente para ela ou ele, sabe quanto quer gastar mas nao sabe o que comprar nao tem problema deixe a gente lhe ajudar com sugerencias no seu orcamento. Voce tambem pode escolher aquele presente entre nossa grande selecao de produtos do nosso stock, na comodidade da sua casa somente com um click.</p>
<p align="left" class="style22">Vendas somente para o mercado de Brasília. Não enviamos fora de Brasília. Por favor, não lance se você não estiver no DF. Entrega do produto 30 dias apos a compra e confirmação do pagamento no Mercado Pago. <br />
<br />
Obrigado,<br />
<br />
<span class="style21">Epostrade</span></p>
<div align="left" class="style23"></div></td>
</tr>
</table>
</div><!-- end wrapper-->
</body>
</html>

edbr
10-04-2010, 01:17 AM
i have given the wrapper an absolue size based on pixel width and made the margins auto, i also removed the positioning from the ap div (as you made it relative as it should be
<!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>epostrade.com/home</title>
<style type="text/css">
<!--
body {
background-image: url(../images/wp_NY_Skyline_1400.jpg);
background-repeat: no-repeat;
background-color: #283E77;
}
#wrapper {
position:relative; width:749px; height:auto; margin-left:auto; margin-right:auto;}

#apDiv1 {
position:relative;

width:794px;
height:342px;
background-color: #455586;
}
.style8 {color: #2AA8DA; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style10 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-large;
color: #000000;
}
body,td,th {
font-size: xx-large;
}
.style11 {color: #FF5309}
.style14 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}
.style16 {color: #000005; font-size: 18px; }
.style17 {
font-size: 14px;
color: #000000;
}
.style18 {font-size: 14px}
.style19 {font-size: 12px}
.style20 {color: #000005; font-size: 14px; }
.style21 {color: #FFFFFF; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style22 {font-size: 12px; color: #FFFFFF; }
.style23 {color: #FFFFFF}
.style35 {color: #00ACDB}
.style36 {color: #000000}
.style37 {color: #0000FF}
.style38 {color: #2AA8DA}
.style40 {font-size: 10px}
.content{width:80%; float:left; position:relative; border:#999999 solid 1px:}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<div class="style8">
<p><img src="../images/epostrade.gif" width="540" height="128" alt="" /></p>
<div align="center">
<p><span class="style11"><br /></span><a href="index.html" class="style38">Home</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="brasilia.html" class="style38">Brasilia@Night</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="produtos_apple.html" class="style38">Produtos</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="pedido.html" class="style38">Pedido</a><span class="style11"><span class="style35"><span class="style36"><span class="style37"><span class="style38"> | </span></span></span></span></span><a href="contato.html" class="style38">Contato</a></p>
<p><span class="style38"><span class="style40">© 2010 Epostrade</span><br />
__________________________________________________ ____</span><br />
</p>
</div>
</div>
<div class="style10" id="apDiv1">
<table width="740" height="409" border="0" align="left" cellpadding="4">
<tr>
<td width="728" height="405" align="left" valign="top">
<p align="left" class="style21">Bem-vindo a Epostrade, </p>
<p align="left" class="style22">Aqui uma oportunidade unica de fazer negocios com tratamento diferenciado solo para o Distrito Federal. Tratamento Vip com qualidade e originalidade de produtos diretamente dos Estados Unidos e da Europa. Nao se deixe enganar por imitacoes baratas, aqui voce pode confiar. </p>
<p align="left" class="style22">Nao tem tempo de aquela viaje para os Estados Unidos e nao quer pagar caro comprando em shoping malls em Brasilia,mas gostaria de conferir e comprar os novos modelos lancados pelas mais importantes griffes do mundo faca uma consulta do produto que voce precisa que a gente tera maior prazer de consegir ele para voce. A gente fecha negocios e voce economiza.</p>
<p align="left" class="style22">O seu computador deu problemas e fica muito caro o concerto (como todo em Brasilia), ja e hora de trocar ele por um modelo novo. E muito facil, faca seu orcamento no mercado de Brasilia que a gente fara tudo o posible de conseguir uma melhor oferta para voce cliente preferencial.</p>
<p align="left" class="style22">Promocao do mes de Setembro Compre qualquer produto ate o dia 15 de setembro que voce recebera 3% de desconto na sua proxima compra feita ate o dia 30 de setembro (Obs datas a contar das compras finalizadas, pagamento feito e confirmacao deste pelo mercado pago).</p>
<p align="left" class="style22">Entao lembrece de que se voce precisar de algum presente para alguem especial o simplesmente quer ir as compras para conseguir algum eletronico em promocao faca a sua pesquisa mas fale com a gente antes de deixar seu dinheiro em nossos luxuosos shopings em Brasilia.</p>
<p align="left" class="style22">Quer dar um presente para ela ou ele, sabe quanto quer gastar mas nao sabe o que comprar nao tem problema deixe a gente lhe ajudar com sugerencias no seu orcamento. Voce tambem pode escolher aquele presente entre nossa grande selecao de produtos do nosso stock, na comodidade da sua casa somente com um click.</p>
<p align="left" class="style22">Vendas somente para o mercado de Brasília. Não enviamos fora de Brasília. Por favor, não lance se você não estiver no DF. Entrega do produto 30 dias apos a compra e confirmação do pagamento no Mercado Pago. <br />
<br />
Obrigado,<br />
<br />
<span class="style21">Epostrade</span></p>
<div align="left" class="style23"></div></td>
</tr>
</table>
</div><!-- end wrapper-->
</body>
</html>