Alinhar Layout

PaUlO... · Agosto 9, 2011

Estou tentando fazer um site de um jogo (Lineage 2) fiz o layout no photoshop, fatiei e exportei para HTML em Divs por ID, já tentei varios "métodos" para centralizar o layout mas nenhum deu certo...

Segue ai em baixo:

<html>
<head>
<title>layout</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
background:#2d6391;
text-align:center; /* hack para o IE */	
}
#Tabela_01 {
text-align:center;
margin:0 auto;
width:950px;
height:1055px;
}

#layout-01_ {
margin:0 auto;
position:absolute;
left:0px;
top:0px;
background-image: url(imagens/layout_01.png);
width:950px;
height:294px;
}

#layout-02_ {
margin:0 auto;
background-image: url(imagens/layout_02.png);
position:absolute;
left:0px;
top:294px;
width:950px;
height:19px;
}

#layout-03_ {
margin:0 auto;
background-image: url(imagens/layout_03.png);
position:absolute;
left:0px;
top:313px;
width:43px;
height:742px;
}

#layout-04_ {
margin:0 auto;
background-image: url(imagens/layout_04.png);
position:absolute;
left:43px;
top:313px;
width:71px;
height:20px;
}

#layout-05_ {
margin:0 auto;
background-image: url(imagens/layout_05.png);
position:absolute;
left:114px;
top:313px;
width:23px;
height:28px;
}

#layout-06_ {
margin:0 auto;
background-image: url(imagens/layout_06.png);
position:absolute;
left:137px;
top:313px;
width:130px;
height:20px;
}

#layout-07_ {
margin:0 auto;
background-image: url(imagens/layout_07.png);
position:absolute;
left:267px;
top:313px;
width:30px;
height:43px;
}

#layout-08_ {
margin:0 auto;
background-image: url(imagens/layout_08.png);
position:absolute;
left:297px;
top:313px;
width:98px;
height:20px;
}

#layout-09_ {
margin:0 auto;
background-image: url(imagens/layout_09.png);
position:absolute;
left:395px;
top:313px;
width:26px;
height:43px;
}

#layout-10_ {
margin:0 auto;
background-image: url(imagens/layout_10.png);
position:absolute;
left:421px;
top:313px;
width:113px;
height:20px;
}

#layout-11_ {
margin:0 auto;
background-image: url(imagens/layout_11.png);
position:absolute;
left:534px;
top:313px;
width:31px;
height:43px;
}

#layout-12_ {
margin:0 auto;
background-image: url(imagens/layout_12.png);
position:absolute;
left:565px;
top:313px;
width:101px;
height:20px;
}

#layout-13_ {
margin:0 auto;
background-image: url(imagens/layout_13.png);
position:absolute;
left:666px;
top:313px;
width:146px;
height:1px;
}

#layout-14_ {
margin:0 auto;
background-image: url(imagens/layout_14.png);
position:absolute;
left:812px;
top:313px;
width:95px;
height:20px;
}

#layout-15_ {
margin:0 auto;
background-image: url(imagens/layout_15.png);
position:absolute;
left:907px;
top:313px;
width:43px;
height:742px;
}

#layout-16_ {
margin:0 auto;
background-image: url(imagens/layout_16.png);
position:absolute;
left:666px;
top:314px;
width:22px;
height:42px;
}

#layout-17_ {
margin:0 auto;
background-image: url(imagens/layout_17.png);
position:absolute;
left:688px;
top:314px;
width:99px;
height:19px;
}

#layout-18_ {
margin:0 auto;
background-image: url(imagens/layout_18.png);
position:absolute;
left:787px;
top:314px;
width:25px;
height:26px;
}

#layout-19_ {
margin:0 auto;
background-image: url(imagens/layout_19.png);
position:absolute;
left:43px;
top:333px;
width:71px;
height:8px;
}

#layout-20_ {
margin:0 auto;
background-image: url(imagens/layout_20.png);
position:absolute;
left:137px;
top:333px;
width:130px;
height:8px;
}

#layout-21_ {
margin:0 auto;
background-image: url(imagens/layout_21.png);
position:absolute;
left:297px;
top:333px;
width:98px;
height:23px;
}

#layout-22_ {
margin:0 auto;
background-image: url(imagens/layout_22.png);
position:absolute;
left:421px;
top:333px;
width:113px;
height:23px;
}

#layout-23_ {
margin:0 auto;
background-image: url(imagens/layout_23.png);
position:absolute;
left:565px;
top:333px;
width:101px;
height:23px;
}

#layout-24_ {
margin:0 auto;
background-image: url(imagens/layout_24.png);
position:absolute;
left:688px;
top:333px;
width:99px;
height:7px;
}

#layout-25_ {
margin:0 auto;
background-image: url(imagens/layout_25.png);
position:absolute;
left:812px;
top:333px;
width:95px;
height:7px;
}

#layout-26_ {
margin:0 auto;
background-image: url(imagens/layout_26.png);
position:absolute;
left:688px;
top:340px;
width:46px;
height:16px;
}

#layout-27_ {
margin:0 auto;
background-image: url(imagens/layout_27.png);
position:absolute;
left:734px;
top:340px;
width:173px;
height:247px;
}

#layout-28_ {
margin:0 auto;
background-image: url(imagens/layout_28.png);
position:absolute;
left:43px;
top:341px;
width:171px;
height:246px;
}

#layout-29_ {
margin:0 auto;
background-image: url(imagens/layout_29.png);
position:absolute;
left:214px;
top:341px;
width:53px;
height:15px;
}

#layout-30_ {
margin:0 auto;
background-image: url(imagens/layout_30.png);
position:absolute;
left:214px;
top:356px;
width:34px;
height:699px;
}

#layout-31_ {
margin:0 auto;
background-image: url(imagens/layout_31.png);
position:absolute;
left:248px;
top:356px;
width:453px;
height:648px;
}

#layout-32_ {
margin:0 auto;
background-image: url(imagens/layout_32.png);
position:absolute;
left:701px;
top:356px;
width:33px;
height:699px;
}

#layout-33_ {
margin:0 auto;
background-image: url(imagens/layout_33.png);
position:absolute;
left:43px;
top:587px;
width:171px;
height:10px;
}

#layout-34_ {
margin:0 auto;
background-image: url(imagens/layout_34.png);
position:absolute;
left:734px;
top:587px;
width:173px;
height:10px;
}

#layout-35_ {
margin:0 auto;
background-image: url(imagens/layout_35.png);
position:absolute;
left:43px;
top:597px;
width:171px;
height:446px;
}

#layout-36_ {
margin:0 auto;
background-image: url(imagens/layout_36.png);
position:absolute;
left:734px;
top:597px;
width:173px;
height:446px;
}

#layout-37_ {
margin:0 auto;
background-image: url(imagens/layout_37.png);
position:absolute;
left:248px;
top:1004px;
width:115px;
height:51px;
}

#layout-38_ {
margin:0 auto;
background-image: url(imagens/layout_38.png);
position:absolute;
left:363px;
top:1004px;
width:225px;
height:39px;
}

#layout-39_ {
margin:0 auto;
background-image: url(imagens/layout_39.png);
position:absolute;
left:588px;
top:1004px;
width:113px;
height:51px;
}

#layout-40_ {
margin:0 auto;
background-image: url(imagens/layout_40.png);
position:absolute;
left:43px;
top:1043px;
width:171px;
height:12px;
}

#layout-41_ {
margin:0 auto;
background-image: url(imagens/layout_41.png);
position:absolute;
left:363px;
top:1043px;
width:225px;
height:12px;
}

#layout-42_ {
margin:0 auto;
background-image: url(imagens/layout_42.png);
position:absolute;
left:734px;
top:1043px;
width:173px;
height:12px;
}

-->
</style>
</head>
<body>
   <div id="Tabela_01">
<div id="layout-01_"></div>
<div id="layout-02_"></div>
<div id="layout-03_"></div>
<div id="layout-04_"></div>
<div id="layout-05_"></div>
<div id="layout-06_"></div>
<div id="layout-07_"></div>
<div id="layout-08_"></div>
<div id="layout-09_"></div>
<div id="layout-10_"></div>
<div id="layout-11_"></div>
<div id="layout-12_"></div>
<div id="layout-13_"></div>
<div id="layout-14_"></div>
<div id="layout-15_"></div>
<div id="layout-16_"></div>
<div id="layout-17_"></div>
<div id="layout-18_"></div>
<div id="layout-19_"></div>
<div id="layout-20_"></div>
<div id="layout-21_"></div>
<div id="layout-22_"></div>
<div id="layout-23_"></div>
<div id="layout-24_"></div>
<div id="layout-25_"></div>
<div id="layout-26_"></div>
<div id="layout-27_"></div>
<div id="layout-28_"></div>
<div id="layout-29_"></div>
<div id="layout-30_"></div>
<div id="layout-31_"></div>
<div id="layout-32_"></div>
<div id="layout-33_"></div>
<div id="layout-34_"></div>
<div id="layout-35_"></div>
<div id="layout-36_"></div>
<div id="layout-37_"></div>
<div id="layout-38_"></div>
<div id="layout-39_"></div>
<div id="layout-40_"></div>
<div id="layout-41_"></div>
<div id="layout-42_"></div>
       </div>
</body>
</html>

Já tentei colocar um div "pai" mas não deu...

Fiz alguma coisa ou tudo errado...?

Obrigado

Fernando Gyn · Agosto 9, 2011

bom o css que esta em #Tabela_01 deveria centralizar mas acredito que não centraliza, devido tanto position:absolute

PaUlO... · Agosto 9, 2011

Se eu retirar esses position:absolute as DIVs ficam alinhadas ao centro mas ficam uma em baixo da outra...

Rodrigo Zanotta · Agosto 9, 2011

Se eu retirar esses position:absolute as DIVs ficam alinhadas ao centro mas ficam uma em baixo da outra...

Usa o float para alinhar lado a lado.

http://www.w3schools.com/cssref/pr_class_float.asp

Entrar

Arquivado

Alinhar Layout

Recommended Posts

PaUlO... 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Gyn 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PaUlO... 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rodrigo Zanotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante