dreamweaver n centra conteudo... -____-

Palmeira · December 21, 2006 at 11:56 AM

tou com 1 prob em dreamweaver e css. ?

escrevo

<div align="center">.........</div>

e nada, n me centra as coisas que tenho lá pra dentro. ? ?.

s alguem puder ajudar agradeço. s precisarem, ou s for mais fácil posso enviar os ficheiros html e gifs que compõem o template...

Obrigado desde já.

djthyrax · December 21, 2006 at 02:32 PM

<div style="margin:auto; right:0; left:0;">sdasd</div>

jreis · December 21, 2006 at 04:18 PM

tira o align="center" e põe

<div style="text-align: center">....</div>

Se bem que o ideal é definires classes CSS e usares um ficheiro externo.

Palmeira · December 26, 2006 at 02:03 AM

é a loucura 😉 ? , já tentei por o exemplo do jreis e nada ? já tentei por <center> e nada .. ? mas fica aí o link da página tá alojada numa conta da sapo :fartnew2: 😁 [ http://so1gsi2017.no.sapo.pt/layoutformulario.html

marinheiro · December 26, 2006 at 08:54 AM

tens aqui o código como deve ficar:

<html>
<head>
<title>layoutformulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (layoutformulario.psd) -->
<style type="text/css">
<!--

.layoutformulario-02, .layoutformulario-03, .layoutformulario-04, .layoutformulario-05, .layoutformulario-06, .layoutformulario-07, .layoutformulario-08, .layoutformulario-09, .layoutformulario-10, .layoutformulario-11, .layoutformulario-12, .layoutformulario-13, .layoutformulario-14, .layoutformulario-15, .layoutformulario-16 {
  position:relative;
  float:left;
  display: inline;
}

.layoutformulario-01 {
  top:0px;
  width:750px;
  height:87px;
}

.layoutformulario-02 {
  width:441px;
  height:13px;
}

.layoutformulario-03 {
  width:78px;
  height:25px;
}

.layoutformulario-04 {
  width:16px;
  height:13px;
}

.layoutformulario-05 {
  width:101px;
  height:25px;
}

.layoutformulario-06 {
  width:13px;
  height:13px;
}

.layoutformulario-07 {
  width:89px;
  height:25px;
}

.layoutformulario-08 {
  width:12px;
  height:13px;
}

.layoutformulario-09 {
  width:441px;
  height:362px;
  margin-top: -12px;
}

.layoutformulario-10 {
  width:16px;
  height:362px;
  margin-top: -12px;
}

.layoutformulario-11 {
  width:13px;
  height:362px;
  margin-top: -12px;
}

.layoutformulario-12 {
  width:12px;
  height:362px;
  margin-top: -12px;
}

.layoutformulario-13 {
  width:78px;
  height:350px;
}

.layoutformulario-14 {
  width:101px;
  height:350px;
}

.layoutformulario-15 {
  width:89px;
  height:350px;
}

.layoutformulario-16 {
  width:750px;
  height:38px;
}
#wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 750px;
}
body {
  margin-top: 0px;
  text-align: center;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body>
<div id="wrapper">
   <!-- ImageReady Slices (layoutformulario.psd) -->
   <div class="layoutformulario-01"> <img src="images/layout_01.gif" width=750 height=89 alt=""> </div>
   <div class="layoutformulario-02"> <img src="images/layout_02.gif" width=441 height=13 alt=""> </div>
   <div class="layoutformulario-03"> <img src="images/layout_03.gif" width=78 height=25 alt=""> </div>
   <div class="layoutformulario-04"> <img src="images/layout_04.gif" width=16 height=13 alt=""> </div>
   <div class="layoutformulario-05"> <img src="images/layout_05.gif" width=101 height=25 alt=""> </div>
   <div class="layoutformulario-06"> <img src="images/layout_06.gif" width=13 height=13 alt=""> </div>
   <div class="layoutformulario-07"> <img src="images/layout_07.gif" width=89 height=25 alt=""> </div>
   <div class="layoutformulario-08"> <img src="images/layout_08.gif" width=12 height=13 alt=""> </div>
   <div class="layoutformulario-09"> <img src="images/layout_09.gif" width=441 height=362 alt=""> </div>
   <div class="layoutformulario-13"> <img src="images/layout_13.gif" width=78 height=350 alt=""> </div>
   <div class="layoutformulario-10"> <img src="images/layout_10.gif" width=16 height=362 alt=""> </div>
   <div class="layoutformulario-14"> <img src="images/layout_14.gif" width=101 height=350 alt=""> </div>
   <div class="layoutformulario-11"> <img src="images/layout_11.gif" width=13 height=362 alt=""> </div>
   <div class="layoutformulario-15"> <img src="images/layout_15.gif" width=89 height=350 alt=""> </div>
   <div class="layoutformulario-12"> <img src="images/layout_12.gif" width=12 height=362 alt=""> </div>
   <div class="layoutformulario-16"> <img src="images/layout_16.gif" width=750 height=38 alt=""> </div>
   <!-- End ImageReady Slices -->
</div>
</body>
</html>

alterações:

passou tudo de "position: absolute" para "position: relative", retirado o "top" e o "left" e acrescentado "float: left" e "display: inline" a todas as div's e criada uma div "wrapper" com "width: 750px" e "margin-left" e "margin-right" em "auto", em que todas as outras estão lá colocadas dentro... o style do body passou também para a zona de css do cabeçalho com "margin-top: 0" e "text-align: center"...

o css do body actua sobre a div "wrapper" e as posições das outras div's, por causa dos float's, são relativas à div onde estão contidas (wrapper)...

marinheiro · December 26, 2006 at 10:14 AM

havia um problema com o layout porque não tinha percebido que as slices não apareciam por ordem numérica, mas já está...

as div's 09, 10, 11 e 12 necessitam de "margin-top:-12px" para ficarem entre os botões, porque senão aparecem espaços em branco...

penso que este layout seja só para testes com o css, porque, como o tens, não é funcional porque não consegues meter conteudo em quase metade da página...

esta seria a maneira como eu faria os slices (esqueci-me de marcar os 3 quadrados a seguir a cada botão 😉):

http://img172.imageshack.us/img172/2293/image1ed9.jpg

além de ficar só com 10 div's em vez de 16, teria a vantagem de todas serem funcionais... a div 6 dá para ter conteudo em toda a sua extensão, enquanto que como tinhas só dava para colocar conteudo funcional até à vertical do 1º botão...

jreis · December 26, 2006 at 02:59 PM

Não te esquecas de adicionar um DOCTYPE válido, senão as medidas/margens/paddings dos DIVs podem não bater certo (devido ao rendering em "quirks mode", etc.). Acho que o Dreamweaver tem uma opcão para isso.

marinheiro · December 26, 2006 at 03:21 PM

pois... como está, no opera funciona lindamente... (o screenshot foi feito do opera)

Palmeira · January 3, 2007 at 09:13 PM

havia um problema com o layout porque não tinha percebido que as slices não apareciam por ordem numérica, mas já está...

as div's 09, 10, 11 e 12 necessitam de "margin-top:-12px" para ficarem entre os botões, porque senão aparecem espaços em branco...

penso que este layout seja só para testes com o css, porque, como o tens, não é funcional porque não consegues meter conteudo em quase metade da página...

esta seria a maneira como eu faria os slices (esqueci-me de marcar os 3 quadrados a seguir a cada botão 😉):

http://img172.imageshack.us/img172/2293/image1ed9.jpg

além de ficar só com 10 div's em vez de 16, teria a vantagem de todas serem funcionais... a div 6 dá para ter conteudo em toda a sua extensão, enquanto que como tinhas só dava para colocar conteudo funcional até à vertical do 1º botão...

pra ser sincero, pensei que podia por conteúdo como tinha ? , d qualquer das maneiras muitíssimo obrigado [ ] 🙂

Fiquem Bem e muito obrigado a todos os que responderam , bem hajam

marinheiro · January 4, 2007 at 11:01 AM

como tinhas, o conteúdo ia ficar separado por 4 áreas, que seriam:

http://img402.imageshack.us/img402/567/image1mw8.jpg

não dava para usares a área de baixo (área 6 na imagem anterior) como um todo...

Palmeira · January 4, 2007 at 08:11 PM

agora só me falta perceber uma coisa.. ainda ñ consegui perceber mto bem a lógica do alinhamento (percebi pras 16 slices), tipo agora como tem menos fatias e tal :s e ainda n consegui perceber a maneira que deve ser usada pra centrar as coisas, já tentei com o exemplo d cima, mas fica-m espaços entre cada uma das fatias, centra a 1ª fatia e o resto ñ :S

desculpa lá a maçada : ?

jreis · January 4, 2007 at 08:52 PM

Tas a usar o exemplo de fatiamento que o marinheiro deu (as 6 fatias)? Se sim, experimenta por tudo num div, com o margin: auto, tipo isto:

...
<div style="margin:auto;">

<!-- as outras divs fica aqui-->

...
</div>
...

Resolve?

marinheiro · January 4, 2007 at 10:24 PM

como tu queres a página, só usaria 4 div's...

o ideal era separares a página em 3 "andares" todos contidos dentro de uma div (a que eu chamei wrapper no código acima) com o width à largura total do site, não da página:

1. cabeçalho (sem botões na imagem) e com o mesmo tamanho da wrapper:

http://img187.imageshack.us/img187/8349/image4dy9.jpg

2. conteúdo

http://img187.imageshack.us/img187/3505/image5kk9.jpg

3. rodapé

http://img187.imageshack.us/img187/5974/image6ss8.jpg

a div do cabeçalho fica com o background que está acima... dentro dessa div, crias uma outra (navegaçao) que conterá os botões e que fica com o margin-top igual à altura do cabeçalho menos a altura dos botões e alinhada à direita... os botões ficam com margin-right de 10px, por exemplo...

a div do conteudo fica com o background acima, com padding de 20px de cada lado e com o width igual à largura total do site (no caso do opera e firefox, é a largura do site menos os dois paddings laterais)...

a div do rodapé fica com o background que está acima, também...

jreis · January 4, 2007 at 10:36 PM

Eu também faria qualquer coisa assim do género.

(...)com padding de 20px de cada lado e com o width igual à largura total do site (no caso do opera e firefox, é a largura do site menos os dois paddings laterais)...

Atenção que isso depende do DOCTYPE usado, se estiver presente e for correcto (strict mode) o box model é igual nos browsers todos (tirando um ou outro bug do IE, mas regra geral funciona bem), se não houver DOCTYPE ou ele não for correcto, então aí já depende do browser usado (é o chamado quirks mode). O ideal é usar sempre um DOCTYPE válido e conforme a linguagem usada (HMTL ou XHTML).

Mais info sobre o assunto: http://www.quirksmode.org/css/modes/box_strict.html

Exemplos (ver a diferença no IE):

http://www.quirksmode.org/css/modes/box_quirks.html

http://www.quirksmode.org/css/modes/box_strict.html

marinheiro · January 4, 2007 at 10:47 PM

o html para a situação acima seria:

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<style type="text/css">
<!--
body {
  margin-top: 0px;
  text-align: center;
}
#wrapper {
  width: 745px;
  margin-left: auto;
  margin-right: auto;
}
#cabecalho {
  width: 745px;
  height: 111px;
  background-image: url("image4.jpg");
}
#navegacao {
  float: right;
  margin-top: 85px;
}
#navegacao img {
  margin-right: 10px;
}
#conteudo {
  background-image: url("image5.jpg");
  width: 705px !important;
  width: 745px;
  height: 311px;
  padding: 10px 20px 10px 20px;
  text-align: justify;
}
#rodape {
  background-image: url("image6.jpg");
  width: 745px;
  height: 58px;
}
-->
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<div id="wrapper">
   <div id="cabecalho">
      <div id="navegacao">
         <a href="#"><img src="botao1.jpg" /></a><a href="#"><img src="botao2.jpg" /><a href="#"><img src="botao3.jpg" /></a>
      </div>
   </div>
   <div id="conteudo">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum at orci ac ipsum sagittis congue. Donec sed eros sit amet eros scelerisque mattis. Proin molestie felis eget nisl. Maecenas imperdiet. Ut eget nibh. Quisque nec mi vitae ligula imperdiet vestibulum. Cras vestibulum cursus risus. Donec gravida cursus turpis. Vivamus vulputate rutrum tellus. Mauris massa erat, euismod eget, convallis eget, mollis venenatis, leo. Quisque tellus. Aenean elementum, tellus ac lacinia varius, risus pede placerat sem, in accumsan nunc risus vel nulla. Nunc iaculis enim vitae tellus. In tortor dolor, interdum vel, egestas a, congue ut, diam. Aenean scelerisque suscipit diam. Nullam aliquet lobortis ipsum. Aenean quis ipsum. Aliquam lacinia elit ut magna.</p>
      <p>Donec tortor massa, posuere ac, iaculis id, eleifend volutpat, nulla. In hac habitasse platea dictumst. Vestibulum lorem lacus, tempor lobortis, commodo vel, volutpat at, nunc. Etiam non nunc. Cras at ante. Maecenas mauris. Donec quis massa ac odio vehicula molestie. Aliquam pede mi, pulvinar quis, nonummy quis, commodo sed, elit. Donec at lectus in lorem molestie fringilla. Morbi at urna. Aenean eget diam sit amet mauris blandit viverra. Morbi sodales, pede quis ultricies sagittis, pede libero adipiscing risus, a ultrices ante mauris a nulla. Proin commodo vehicula lorem.</p>
   </div>
   <div id="rodape">
   </div>
</div>
</BODY>
</HTML>

no css da div conteudo tens 2 linhas com o width... a segunda é para o internet explorer, a primeira é para os outros browsers...

o site resultante deste código é este

http://img471.imageshack.us/img471/6853/image11fz3.jpg

jreis · January 5, 2007 at 02:29 PM

(...)no css da div conteudo tens 2 linhas com o width... a segunda é para o internet explorer, a primeira é para os outros browsers...(...)

Usando um DOCTYPE correcto (p. ex. este, para XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">), o CSS pode ficar igual para os browsers todos.

A ausência de DOCTYPE faz o IE 6 renderizar a página em quirks mode, em que os paddings/margins não afectam a largura/altura de uma caixa, enquanto que os outros browsers (neste caso Opera e Firefox nas suas versões mais recentes) renderizam sempre em strict mode.

Usando aquele DOCTYPE, os 3 browsers comportam-se da mesma forma, e podemos então usar o mesmo CSS, sem o "!important".

Não teste o código, mas não vejo razão para não funcionar bem. Diz qualquer coisa se houver problemas.

Sign In

dreamweaver n centra conteudo... -____-

Recommended Posts

Palmeira

djthyrax

jreis

Palmeira

marinheiro

marinheiro

jreis

marinheiro

Palmeira

marinheiro

Palmeira

jreis

marinheiro

jreis

marinheiro

jreis

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information