Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

iJCi

Centralizar Layout

Por , em Desenvolvimento frontend

Recommended Posts

iJCi    0

iJCi
Postado

Fiz um Layout no photoshop ele esta alinhado a esquerda!

Estou tentando Centralizar ele já tentei com Css englobando ele ne uma Div geral , já tentei até com o <center> mais sempre da uma problema

 

 

 

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

body {
background-color: #EEEFF1;
background-repeat: repeat-x;
background-image: url(images/bg.jpg); 
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
}
body,td,th {
font-family: Verdana;
font-size: 11px;
color: #FFFFFF;
}
a {
font-family: verdana;
font-size: 11px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFCC00;
}
a:active {
text-decoration: none;
}
.style3 {
font-size: 16px;
font-weight: bold;
}
.style4 {
font-size: 30px;
font-weight: bold;
color: #FFF;
background-color: #000;
}
.style7 {color: #E73E41; font-weight: bold; }

#Tabela_01 {
position:absolute;
left:0px;
top:0px;
width:1348px;
height:950px;
}

#geral {
   margin:0 auto;
}

#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1348px;
height:33px;
}

#index-02_ {
position:absolute;
left:0px;
top:33px;
width:953px;
height:256px;
}

#index-03_ {
position:absolute;
left:953px;
top:33px;
width:258px;
height:25px;
}

#index-04_ {
position:absolute;
left:1211px;
top:33px;
width:137px;
height:917px;
}

#index-05_ {
position:absolute;
left:953px;
top:58px;
width:108px;
height:28px;
}

#index-06_ {
position:absolute;
left:1061px;
top:58px;
width:150px;
height:28px;
}

#index-07_ {
position:absolute;
left:953px;
top:86px;
width:258px;
height:267px;
}

#index-08_ {
position:absolute;
left:0px;
top:289px;
width:163px;
height:661px;
}

#index-09_ {
position:absolute;
left:163px;
top:289px;
width:696px;
height:568px;
}

#index-10_ {
position:absolute;
left:859px;
top:289px;
width:94px;
height:64px;
}

#index-11_ {
position:absolute;
left:859px;
top:353px;
width:78px;
height:597px;
}

#index-12_ {
position:absolute;
left:937px;
top:353px;
width:248px;
height:34px;
}

#index-13_ {
position:absolute;
left:1185px;
top:353px;
width:26px;
height:597px;
}

#index-14_ {
position:absolute;
left:937px;
top:387px;
width:248px;
height:19px;
}

#index-15_ {
position:absolute;
left:937px;
top:406px;
width:248px;
height:33px;
}

#index-16_ {
position:absolute;
left:937px;
top:439px;
width:248px;
height:20px;
}

#index-17_ {
position:absolute;
left:937px;
top:459px;
width:248px;
height:34px;
}

#index-18_ {
position:absolute;
left:937px;
top:493px;
width:248px;
height:19px;
}

#index-19_ {
position:absolute;
left:937px;
top:512px;
width:248px;
height:34px;
}

#index-20_ {
position:absolute;
left:937px;
top:546px;
width:248px;
height:20px;
}

#index-21_ {
position:absolute;
left:937px;
top:566px;
width:248px;
height:34px;
}

#index-22_ {
position:absolute;
left:937px;
top:600px;
width:248px;
height:21px;
}

#index-23_ {
position:absolute;
left:937px;
top:621px;
width:248px;
height:32px;
}

#index-24_ {
position:absolute;
left:937px;
top:653px;
width:36px;
height:297px;
}

#index-25_ {
position:absolute;
left:973px;
top:653px;
width:177px;
height:160px;
}

#index-26_ {
position:absolute;
left:1150px;
top:653px;
width:35px;
height:297px;
}

#index-27_ {
position:absolute;
left:973px;
top:813px;
width:177px;
height:137px;
}

#index-28_ {
position:absolute;
left:163px;
top:857px;
width:696px;
height:52px;
}

#index-29_ {
position:absolute;
left:163px;
top:909px;
width:306px;
height:41px;
}

#index-30_ {
position:absolute;
left:469px;
top:909px;
width:68px;
height:13px;
}

#index-31_ {
position:absolute;
left:537px;
top:909px;
width:322px;
height:41px;
}

#index-32_ {
position:absolute;
left:469px;
top:922px;
width:68px;
height:28px;
}

-->
</style>
</head>
<body align=center style="background-color:#000000;">
<div id="geral">
<!-- Save for Web Slices (Sem Título-1) -->
<div id="Tabela_01">
<div id="index-01_">
	<img id="index_01" src="images/index_01.png" width="1348" height="33" alt="" />
</div>
<div id="index-02_">
	<img id="index_02" src="images/index_02.png" width="953" height="256" alt="" />
</div>
<div id="index-03_">
	<img id="index_03" src="images/index_03.png" width="258" height="25" alt="" />
</div>
<div id="index-04_">
	<img id="index_04" src="images/index_04.png" width="137" height="917" alt="" />
</div>
<div id="index-05_">
	<img id="index_05" src="images/index_05.png" width="108" height="28" alt="" />
</div>
<div id="index-06_">
	<img id="index_06" src="images/index_06.png" width="150" height="28" alt="" />
</div>
<div id="index-07_">
	<img id="index_07" src="images/index_07.png" width="258" height="267" alt="" />
</div>
<div id="index-08_">
	<img id="index_08" src="images/index_08.png" width="163" height="661" alt="" />
</div>
<div id="index-09_">
	<iframe src="pages/home.html" name="corpo" width="696" marginwidth="0" height="568" marginheight="0" align="left" scrolling="no" frameborder="0" hspace="0" vspace="0" allowtransparency="true"></iframe>
</div>
<div id="index-10_">
	<img id="index_10" src="images/index_10.png" width="94" height="64" alt="" />
</div>
<div id="index-11_">
	<img id="index_11" src="images/index_11.png" width="78" height="597" alt="" />
</div>
<div id="index-12_">
	<center><a href="pages/home.html" target="corpo" class="style4">Home</a></center>
</div>
<div id="index-13_">
	<img id="index_13" src="images/index_13.png" width="26" height="597" alt="" />
</div>
<div id="index-14_">
	<img id="index_14" src="images/index_14.png" width="248" height="19" alt="" />
</div>
<div id="index-15_">
	<center><a href="pages/tutoriais.html" target="corpo" class="style4">Tutoriais</a></center>
</div>
<div id="index-16_">
	<img id="index_16" src="images/index_16.png" width="248" height="20" alt="" />
</div>
<div id="index-17_">
	<center><a href="pages/downloads.html" target="corpo" class="style4">Downloads</a></center>
</div>
<div id="index-18_">
	<img id="index_18" src="images/index_18.png" width="248" height="19" alt="" />
</div>
<div id="index-19_">
	<center><a href="pages/extras.html" target="corpo" class="style4">Extras</a></center>
</div>
<div id="index-20_">
	<img id="index_20" src="images/index_20.png" width="248" height="20" alt="" />
</div>
<div id="index-21_">
	<center><a href="pages/sobre.html" target="corpo" class="style4">Sobre</a></center>
</div>
<div id="index-22_">
	<img id="index_22" src="images/index_22.png" width="248" height="21" alt="" />
</div>
<div id="index-23_">
	<center><a href="pages/contato.html" target="corpo" class="style4">Contato</a></center>
</div>
<div id="index-24_">
	<img id="index_24" src="images/index_24.png" width="36" height="297" alt="" />
</div>
<div id="index-25_"> <a href="pages/contato.html" target="corpo"><img id="index_25" src="images/index_25.png" width="177" height="160" alt="" /></a>
</div>
<div id="index-26_">
	<img id="index_26" src="images/index_26.png" width="35" height="297" alt="" />
</div>
<div id="index-27_">
	<img id="index_27" src="images/index_27.png" width="177" height="137" alt="" />
</div>
<div id="index-28_">
	<img id="index_28" src="images/index_28.png" width="696" height="52" alt="" />
</div>
<div id="index-29_">
	<img id="index_29" src="images/index_29.png" width="306" height="41" alt="" />
</div>
<div id="index-30_"> <img id="index_30" src="images/index_30.png" width="68" height="13" alt="" />
 </div>
<div id="index-31_">
	<img id="index_31" src="images/index_31.png" width="322" height="41" alt="" />
</div>
<div id="index-32_">
	<img id="index_32" src="images/index_32.png" width="68" height="28" alt="" />
</div>
</div>
<!-- End Save for Web Slices -->
</div>
</body>
</html>

 

 

queria que vocês me dessem uma dica de como fazer isso! pf

Compartilhar este post

Link para o post
Compartilhar em outros sites

iJCi    0

iJCi
Postado

Percebi que o problema é que uma div corta a outra

mais ainda não sei como impedir que as Divs menores cortem a Div Geral!

 

 

 

 

 

Obs: cade o botão de editar o post aki do fórum??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

iJCi, você está um layout com tabelas ou div's?

Não entendi por qual motivo tem tantas div's ali e pior, todas com position.

 

Sobre centralizar um site aqui fica fácil: http://forum.imasters.com.br/topic/201365-centralizar-site-em-qualquer-resolucao/page__view__findpost__p__735132

 

Recomendo que você reveja os conceitos de html e css antes de estruturar um código.

 

Boa sorte :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Gio, ele cortou o lay direto pelo Photoshop.

 

@iJCi, Utilize programas gráficos apenas para fazer os cortes das partes. Lembre-se que programas gráficos servem para manipular imagens, não construir sites.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito