admin@guiadopc.com.br

Como centralizar este site com 30px nas laterais

+1 voto
Este é o html.  A  baixo segue o estilo CSS
Quero centralizar o site no monitor com 30px nas laterais


<html>
<head>
<title>{titulosite}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
{estilos}
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--TOPO-->
<div id="pagina" style="position:relative; width:100%">
<div id="div_busca" style="position:absolute; left:0px; top:59px; width:100%; z-index:5; display:block;">
        <form name="snet_busca" target="_top" method="post" action="{scriptbusca}" onSubmit="if ((pesquisa.value == '')) { alert('Informe o que deseja procurar !'); return false; }" style="margin:0px;">
        <div style="float:left; padding-left:253px; padding-top:1px;"><input name="pesquisa" type="text" style="WIDTH:300px; HEIGHT:21px; font-family: Tahoma; font-weight:bold; font-size:15px; padding:0px 0px 0px 0px; border: 0px solid #444444;" onFocus="if(this.value=='digite o que você procura'){this.value=''}" value="digite o que você procura"></div>
        <div style="float:right; padding-right:186px;"><a href="javascript:js_busca_padrao('digite o que você procura');"><img src="images/space.gif" alt="Buscar ..." width="43" height="25" border="0"></a></div>
        </form>
</div>
<div id="div_menu_cat" style="position:absolute; left:0px; top:111px; width:100%; z-index:5; display:block;">
    {categorias_principais}
</div>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="720" height="174" valign="top" background="images/topo_esquerda.jpg">
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="30%"><a href="{link_home}"><img src="images/space.gif" width="238" height="110" border="0"></a></td>
        <td width="70%" valign="top" style="padding-left:155px;"><img src="images/space.gif" alt="atendimento" width="325" height="35" border="0" usemap="#Map" href="#"></td>
      </tr>
    </table>
    <div style="margin:23px 0px 0px 10px;"><a href="{link_home}"><img src="images/space.gif" width="172" height="30" border="0"></a></div>    </td>
    <td background="images/topo_fundo.jpg">&nbsp;</td>
    <td width="260" valign="top" background="images/topo_direita.jpg">
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="{link_login}"><img src="images/space.gif" width="109" height="20" border="0"></a></td>
      </tr>
      <tr>
        <td height="29" valign="top" style="padding-left:25px;"><font style="font-family:Tahoma, Arial; font-size:10px; color:#898989;" class="fontelogincadastro">{cli_logado_1}</font></td>
      </tr>
      <tr>
        <td height="24" valign="top" style="padding-left:100px;"><a href="{link_pedido}"><img src="images/space.gif" width="151" height="20" border="0"></a></td>
      </tr>
      <tr>
        <td valign="top" style="padding-left:115px;"><font style="font-family:Tahoma, Arial; font-size:10px; color:#898989;" class="fonteloginpedido">Itens: {ped_num}&nbsp;&nbsp;&nbsp;Total: <a href="{scriptpedido}">{ped_total}</a></font></td>
      </tr>
    </table></td>
  </tr>
</table>
<!--FIM TOPO-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:0px;">
  <tr valign="top">
    <td width="1" class="td_lateral_esq">
        <div id="div_lateral_esq" style="display:block">
            <div id="categorias_cabecalho"></div><div id="categorias_back">{categorias}</div><div id="categorias_end"></div>
        </div>
        {lateral_produtos}
        {banner_e}
    </td>
    <td class="td_conteudo">
        <div id="banner_top" style="display:none;"></div>
        {conteudo}
    </td>
    <td width="1" class="td_lateral_dir">
        <div id="div_lateral_dir" style="display:block">
            {chat}
            {banner_d}
            {lateralesquerda}
        </div>
    </td>
  </tr>
</table>
{historico}
{rodape}
<!--FIM CONTEUDO-->
</div>
<div style="clear:both"></div>
<map name="Map">
  <area shape="rect" coords="260,8,323,22" href="{link_c4}" alt="atendimento">
  <area shape="rect" coords="172,9,243,23" href="{link_c3}" alt="meus pedidos">
  <area shape="rect" coords="109,8,159,23" href="{link_c2}" alt="cadastro">
  <area shape="rect" coords="51,8,99,23" href="{link_c1}" alt="empresa">
  <area shape="rect" coords="10,8,41,23" href="{link_home}" alt="home">
</map>
</body>
</html>

Estilo CSS
/* geral e estrutura */

TD, FONT, BODY { font-family: Tahoma, Arial, Trebuchet MS, Tahoma, helvetica, sans-serif; font-size:11px; }

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline }

.td_lateral_esq { padding-left:10px; background-color: white; }
.td_lateral_dir { padding-right:10px; background-color: white; padding-top:0px; }
.td_conteudo { padding-left:12px; padding-right:12px; padding-top:0px; }

/* links de login e cadastro */

.fontelogincadastro a { color: #898989; }
.fonteloginpedido a { color: #898989; text-decoration: underline; }

/* titulos de páginas */

.tabela_titulo { height: 30px; width: 100%; background-color: #4C4C4C; }
.tabela_titulo TD { padding-left: 10px; text-transform: uppercase; font-weight: normal; padding-top: 5px; font-size: 12px; color: #fff; }

/* exibicao de preços */

.preco_geral { color: #333; }
.preco_venda { color: #247AE0; font-size: 12px; }
.preco_venda_de { color:gray; font-size: 12px;  }
.preco_venda_economia { color: #5B72C0; font-size: 10px; }
.preco_venda_parcelas { color: #AD0000; font-size: 12px; }
.preco_venda_desconto { color: #628B00; font-size: 12px; }
.preco_consulte { }

/* exibição da lista dos produtos */

.box_lista_produtos { border-bottom: 0px solid #DEDBDE; }
.box_lista_produtos_esq  { border-left: 1px solid #ececec; }
.box_lista_produtos_td { padding:10px; }

.produto_nome { }
.produto_descricao { color: gray; font-family: Tahoma, Arial; font-size: 10px; margin-top:5px; }

/* exibição dos dados do produto */

.ex_pro_td { padding-bottom:10px; border-bottom:1px solid #ededed; }
.ex_pro_nome h1 { font-size:18px; margin:0px 0px 3px 0px; }

/* lateral categorias */

#categorias_cabecalho { height:5px; width:170px; background-image: url(images/lateral_categoria.gif); }
#categorias_back { background-image: url(images/lateral_fundo.gif); width:170px; }
#categorias_end { height:20px; width:170px; background-image: url(images/lateral_rodape.gif); }

/* lateral produtos */

.produtos_lat_cabecalho { height:30px; width:170px; background-image: url(images/lateral_destaque.gif); }
.produtos_lat_back { background-image: url(images/lateral_fundo.gif); width:170px; }
.produtos_lat_end { height:20px; width:170px; background-image: url(images/lateral_rodape.gif); }

.produto_lat_box td { padding:10px; text-align: left; display: table-cell; }
.produto_lat_img { margin-bottom:5px; }
.produto_lat_link { margin-bottom:5px; }
.produto_lat_preco font { font-size:10px !important; }

/* menu categorias superior */

.menu_cat { padding: 0px 10px 0px 198px; }
.menu_cat_fundo { background-image: url(images/menu_cat_fundo.gif); height:42px; }
.menu_cat_dir { background-image: url(images/menu_cat_dir.gif); width:2px; height:42px; }
.menu_cat_esq { background-image: url(images/menu_cat_esq.gif); width:2px; height:42px; }
.menu_cat_div { background-image: url(images/menu_cat_div.gif); width:4px; height:42px; }
.menu_cat_td { padding:0px 5px 0px 5px; text-align:center; vertical-align: middle; display: table-cell; }
.menu_cat_td a { text-transform: uppercase; color:black; font-weight:bold; }

/* lista categorias */

.lista_categorias {    display:block; padding:5px 0px 0px 15px; }
.lista_categorias font {  }

.lista_subcategorias { display:block; padding:0px 0px 1px 5px; }
.lista_subcategorias font {  }

/* rodape */

#div_rodape { padding:10px 10px 10px 15px; background-color:#F5F5F5; border-top:5px solid #EBEBEB; }
#div_rodape font { color: #6A6965; }
perguntado 9 anos atrás em Programação e design por anônimo

1 resposta

0 votos
amigo voce esta fazendo html puro ou tem o arquivo css?
respondida 9 anos atrás por Rekztem PhD (21,797 pontos)

Sua resposta

Enviar um email para este endereço se minha resposta for selecionada ou comentada:
Privacidade: Seu endereço de email será usado apenas para envio de notificações.
Verificação Anti-spam:
Para não fazer esta verificação no futuro, por favor, faça o login ou registre-se.

Perguntas relacionadas

+1 voto
1 resposta
perguntado 8 anos atrás em Programação e design por anônimo
+4 votos
4 respostas
+3 votos
1 resposta
+3 votos
3 respostas
+6 votos
3 respostas