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

Palmeira

dreamweaver n centra conteudo... -____-

16 mensagens neste tópico

tou com 1 prob em dreamweaver e css.  :wallbash: :rant_01:

escrevo

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

e nada, n me centra as coisas que tenho lá pra dentro. :rant_01: :hmm:.

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á.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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)...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 ;)):

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...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 ;)):

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

image1mw8.jpg

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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  : :-[

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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:

image4dy9.jpg

2. conteúdo

image5kk9.jpg

3. rodapé

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...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

image11fz3.jpg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
(...)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.

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