• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

GpL

problema em centrar fatias

10 mensagens neste tópico

Com o imageready cortei a imagem em fatias e gerou este codigo css

<HTML>
<HEAD>
<TITLE>layout</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">

DIV.layout-01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:24px;
}

DIV.layout-02 {
position:absolute;
left:0px;
top:24px;
width:106px;
height:744px;
}

DIV.layout-03 {
position:absolute;
left:106px;
top:24px;
width:810px;
height:119px;
}

DIV.layout-04 {
position:absolute;
left:916px;
top:24px;
width:108px;
height:744px;
}

DIV.layout-05 {
position:absolute;
left:106px;
top:143px;
width:121px;
height:532px;
}

DIV.layout-06 {
position:absolute;
left:227px;
top:143px;
width:569px;
height:532px;
}

DIV.layout-07 {
position:absolute;
left:796px;
top:143px;
width:120px;
height:532px;
}

DIV.layout-08 {
position:absolute;
left:106px;
top:675px;
width:810px;
height:74px;
}

DIV.layout-09 {
position:absolute;
left:106px;
top:749px;
width:810px;
height:19px;
}

-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<DIV CLASS="layout-01">
<IMG SRC="images/layout_01.gif" WIDTH=1024 HEIGHT=24 ALT="">
</DIV>
<DIV CLASS="layout-02">
<IMG SRC="images/layout_02.gif" WIDTH=106 HEIGHT=744 ALT="">
</DIV>
<DIV CLASS="layout-03">
<IMG SRC="images/layout_03.gif" WIDTH=810 HEIGHT=119 ALT="">
</DIV>
<DIV CLASS="layout-04">
<IMG SRC="images/layout_04.gif" WIDTH=108 HEIGHT=744 ALT="">
</DIV>
<DIV CLASS="layout-05">
<IMG SRC="images/layout_05.gif" WIDTH=121 HEIGHT=532 ALT="">
</DIV>
<DIV CLASS="layout-06">
<IMG SRC="images/layout_06.gif" WIDTH=569 HEIGHT=532 ALT="">
</DIV>
<DIV CLASS="layout-07">
<IMG SRC="images/layout_07.gif" WIDTH=120 HEIGHT=532 ALT="">
</DIV>
<DIV CLASS="layout-08">
<IMG SRC="images/layout_08.gif" WIDTH=810 HEIGHT=74 ALT="">
</DIV>
<DIV CLASS="layout-09">
<IMG SRC="images/layout_09.gif" WIDTH=810 HEIGHT=19 ALT="">
</DIV>
</BODY>
</HTML>

A pagina não aparece centrada com este codigo.

Ja experimentei outro codigo, com um wrapper mas não centra na mesma..

<HTML>
<HEAD>
<TITLE>layout</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">

.layout-02, .layout-03, .layout-04, .layout-05, .layout-06, .layout-07, .layout-08, .layout-09 {
  position:relative;
  float:left;
  display: inline;
}

.layout-01 {
top:0px;
width:1024px;
height:24px;
}

.layout-02 {
width:106px;
height:744px;
}

.layout-03 {
width:810px;
height:119px;
}

.layout-04 {
width:108px;
height:744px;
}

.layout-05 {
width:121px;
height:532px;
}

.layout-06 {
width:569px;
height:532px;
}

.layout-07 {
width:120px;
height:532px;
}

.layout-08 {
width:810px;
height:74px;
}

.layout-09 {
width:810px;
height:19px;
}
#wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 750px;
}
body {
  margin-top: 0px;
  text-align: center;
}

</STYLE>
</HEAD> 
<BODY>
<div id="wrapper">
<DIV CLASS="layout-01"><IMG SRC="images/layout_01.gif" WIDTH=1024 HEIGHT=24></DIV>
<DIV CLASS="layout-02"><IMG SRC="images/layout_02.gif" WIDTH=106 HEIGHT=744></DIV>
<DIV CLASS="layout-03"><IMG SRC="images/layout_03.gif" WIDTH=810 HEIGHT=119></DIV>
<DIV CLASS="layout-04"><IMG SRC="images/layout_04.gif" WIDTH=108 HEIGHT=744></DIV>
<DIV CLASS="layout-05"><IMG SRC="images/layout_05.gif" WIDTH=121 HEIGHT=532></DIV>
<DIV CLASS="layout-06"><IMG SRC="images/layout_06.gif" WIDTH=569 HEIGHT=532></DIV>
<DIV CLASS="layout-07"><IMG SRC="images/layout_07.gif" WIDTH=120 HEIGHT=532></DIV>
<DIV CLASS="layout-08"><IMG SRC="images/layout_08.gif" WIDTH=810 HEIGHT=74></DIV>
<DIV CLASS="layout-09"><IMG SRC="images/layout_09.gif" WIDTH=810 HEIGHT=19></DIV>
</div>
</BODY>
</HTML> 

Gostaria de saber se sabem onde está o erro.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

no css, experimenta a colocar a definição do body em 1º lugar e a do wrapper em 2º, seguidos pelo resto...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Experimenta tirar o position: relative nas divs "layout-xx"... Se bem que essa mudança quase de certeza que te vai berrar o layout todo.... Mesmo assim experimenta, pode ser que funcione...  Senão pode tentar codar tudo a mão... :S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Gostaria que me ajudassem a centrar isto :s tenho que ter isto pronto o mais rapido possivel e ja tentei de td para centrar isto mas nao consigo.. ja procurei em varios sites de css etc e nenhum dos metodos resulta..

http://gpl.no.sapo.pt/layout.rar tao aqui o codigo e as imagens ..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

experimenta assim:

<HTML>
<HEAD>
<TITLE>layout</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">

DIV.layout-03 {
  position: relative;
  width:810px;
  height:119px;
}

DIV.layout-05 {
  position:relative;
  float: left;
  width:121px;
  height:532px;
}

DIV.layout-07 {
  float: right;
  width:120px;
  height:532px;
}

DIV.layout-08 {
  width:810px;
  height:74px;
}

#conteudo {
  position: relative;
  width: 569px;
  float: left;
  text-align: left;
}

#wrapper {
  width: 810px;
  margin: 0 auto;
}
</STYLE>
</HEAD>
<BODY STYLE="background-color:#Fff; text-align: center;">
<div id="wrapper">
<DIV CLASS="layout-03"><IMG SRC="images/layout_03.gif" WIDTH=810 HEIGHT=119 ALT=""></DIV>
<DIV CLASS="layout-05"><IMG SRC="images/layout_05.gif" WIDTH=121 HEIGHT=532 ALT=""></DIV>
<div id="conteudo">
   asdfasdfasdfasdfasdfasdf<br />
   asdfasdfasdfasdfasdfasdf<br />
   asdfasdfasdfasdfasdfasdf<br />
</div>
<DIV CLASS="layout-07"><IMG SRC="images/layout_07.gif" WIDTH=120 HEIGHT=532 ALT=""></DIV>
<DIV CLASS="layout-08"><IMG SRC="images/layout_08.gif" WIDTH=810 HEIGHT=74 ALT=""></DIV>
</div>
</BODY>
</HTML>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

para o background, basta criares uma imagem do degradé com 1px de largura e com, por exemplo, 1000px de comprimento (o valor pode aumentar ou reduzir dependendo da altura da maior página que tenhas) e com o repeat-x, para repetir só na horizontal...

está a ser dificil escrever porque o que lá tens são imagens... a parte de baixo tem de ter 4 ou 5 div's (dependendo se vais escrever na do lado direito)... uma div onde leva o menu, outra com o traço vertical, outra com o conteudo, outra com o outro traço vertical e depois outra com a lateral (isto se fores escrever lá alguma coisa, porque, se não escreveres, em vez de teres as duas ultimas, tens só uma onde tens o traço vertical e o resto da imagem)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora