Eu estou, novamente,depois de um ano, tentar migrar um blog feito com tags table para tableless. Estou indo por partes, para ver se assim consigo [rs].
Bom, logo de início já estou tendo problemas para alinhar verticalmente um título dentro do seletor div. Já fiz de tudo, tentei regular pelo padding-top ou padding-bottom e nada. Coloquei temporariamente aqui para que vcs possam visualizar: http://www.arquivodo...ableless/fc.htm
A parte do estilo css que estou usando é essa (vejam o bloco #titulo):
body {
text-align:left;
background-color: #FFFFFF;
background-image:url(fundoatomo.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
font-family:verdana,arial,helvetica,sans-serif;
font-size:80%;
padding:0px;
margin:0px;
}
#titulo {
font-family:helvetica timesnewsroman;
font-size:16px;
color:#FFFFFF;
width:760px;
height:50px;
background-position: 760px;
background-repeat:no-repeat;
background:#31454A;
margin: 20px auto 20px auto;
border-bottom: 2px double #31454A;
border-left: 2px none #31454A;
border-right: 2px groove #31454A;
padding-top:1px;
padding-bottom:1px;
padding-left:1px;
}
No <body> usei isso:
<div id="titulo"><h1>O título é aqui<h1></div>
A propósito, no Firefox 0.9.2 o texto aparece na base do retângulo e no IE 5.5 ele aparece no topo.. O que estou fazendo de errado?
Grato.
Alinhamento Vertical Do Texto
Started By Franco, 25/09/2004, 03:12
16 replies to this topic
#1
Franco
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
- Localidade:São Paulo
Posted 25/09/2004, 03:12
#2
MarviN*
-
- Usuários
-
- 780 posts
nw . newton web
- Sexo:Não informado
- Localidade:Brasília - DF
Posted 27/09/2004, 11:23
Não sei se é isso q vc quer, mas tenta o atributo:
text-align: right;
Qto ao posicionamento, deve ser algum problema no PADDING. Tenta formatar a tag h1 também, pois elas são diferentes nos dois browsers. Então, formatando com CSS, deve resolver.
Qualquer coisa posta aí!
text-align: right;
Qto ao posicionamento, deve ser algum problema no PADDING. Tenta formatar a tag h1 também, pois elas são diferentes nos dois browsers. Então, formatando com CSS, deve resolver.
Qualquer coisa posta aí!
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
[ Blog Desenvolvimento Web: http://www.newtonwagner.net/blog ]
[ Diário da Selva: http://www.diariodaselva.com/ ]
[ "Não existe um caminho para a paz; a paz é o caminho." Mahatma Gandhi ]
[ Blog Desenvolvimento Web: http://www.newtonwagner.net/blog ]
[ Diário da Selva: http://www.diariodaselva.com/ ]
[ "Não existe um caminho para a paz; a paz é o caminho." Mahatma Gandhi ]
#3
Franco
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
- Localidade:São Paulo
Posted 27/09/2004, 12:19
Gostei da sua tagline: "a dúvida é o princípio da sabedoria"; só que eu não saio do princípio...
Estou quase desistindo, pois já me cansei de visitar sites sobre tableless, estudar outros layouts e, ao fim, não conseguir aplicar as modificações que pretendo no meu layout. Brincando com esses 'padding-etc', quando conseguia centralizar no Firefox, ficava fora de centro no IE. Agora, para piorar, aliás, tal como da última vez que arregacei as mangas para modificar o layout de um blog, não consigo fazer a coisa funcionar. Puxa, não há meios de se entender esse tal de tableless. Não mesmo.
Desculpe o desabafo, mas estou há uma semana direto nisso e sempre obtendo resultados totalmente diversos do esperado. Você segue uma lógica, tenta aplicar, seguir seu raciocínio e a coisa desanda para o outro lado!
Mas, mesmo assim, obrigado pela resposta!
Estou quase desistindo, pois já me cansei de visitar sites sobre tableless, estudar outros layouts e, ao fim, não conseguir aplicar as modificações que pretendo no meu layout. Brincando com esses 'padding-etc', quando conseguia centralizar no Firefox, ficava fora de centro no IE. Agora, para piorar, aliás, tal como da última vez que arregacei as mangas para modificar o layout de um blog, não consigo fazer a coisa funcionar. Puxa, não há meios de se entender esse tal de tableless. Não mesmo.
Desculpe o desabafo, mas estou há uma semana direto nisso e sempre obtendo resultados totalmente diversos do esperado. Você segue uma lógica, tenta aplicar, seguir seu raciocínio e a coisa desanda para o outro lado!
Mas, mesmo assim, obrigado pela resposta!
#4
duquesa_rj
-
- Usuários
-
- 21 posts
Novato no fórum
- Sexo:Não informado
Posted 28/09/2004, 22:48
Estou tentando ajustar seu conflito aqui.
Se ninguém te der um help ainda hoje, amanhã eu te dou uma mãozinha (tá na hora de liberar o micro prá minha filhota)
mas posso te adiantar algo simples que não tem nada a ver com o alinhamento:
em» font-family:helvetica timesnewsroman;
troque por » font-family:helvetica, times news roman;
Tô vendo aqui as páginas no firefox e no ie e as fontes estão bem diferentes.
Se ninguém te der um help ainda hoje, amanhã eu te dou uma mãozinha (tá na hora de liberar o micro prá minha filhota)
mas posso te adiantar algo simples que não tem nada a ver com o alinhamento:
em» font-family:helvetica timesnewsroman;
troque por » font-family:helvetica, times news roman;
Tô vendo aqui as páginas no firefox e no ie e as fontes estão bem diferentes.
#5
duquesa_rj
-
- Usuários
-
- 21 posts
Novato no fórum
- Sexo:Não informado
Posted 29/09/2004, 07:21
bom dia, Franco
Estou verificando teu css agora
De cara, ao colocar o código no Top Style para visualização em netscape e ie, já acusou várias formatações incompatíveis.
Vou tentar dividir isso por partes.
Tentarei formatar pela aparência do ie, ok?
Estou verificando teu css agora
De cara, ao colocar o código no Top Style para visualização em netscape e ie, já acusou várias formatações incompatíveis.
Vou tentar dividir isso por partes.
Tentarei formatar pela aparência do ie, ok?
#6
Klaus
-
- Ex-Admins
-
- 7924 posts
@ ubuntu jaunty
- Sexo:Masculino
- Localidade:127.0.0.1
Posted 29/09/2004, 09:12
Fiz alguns testes aqui e, assim no IE, foi legal:
Quem puder testar em outros navegadores, por gentileza...
<div style="width: 300px; border: 1px solid black; text-align: center; padding: 80px 0px;">Tableless... SUX?</div>
Quem puder testar em outros navegadores, por gentileza...
#7
duquesa_rj
-
- Usuários
-
- 21 posts
Novato no fórum
- Sexo:Não informado
Posted 29/09/2004, 09:25
<div style="width: 300px; border: 1px solid black; text-align: center; padding: 80px 0px;">Tableless... SUX?</div>
No firefox ficou apenas um retângulo cinza escuro
A diferença q está dando entre os navegadores é justamente na altura da área onde fica o título
O posicionamento do texto tb fica diferente
Eu coloquei uma página aqui:
http://www.topbestev...ros/forum2.html
Mas ainda não ajustei o problema do Franco, apenas fiz uma "limpeza" no código.
Acredito q teremos q configurar <h1> e testar vários valores tanto para margin qto para padding
Infelizmente, acabou meu recreio..
Mais tarde eu volto para ver se alguém conseguiu alguma coisa
pensei em colocar as duas imagens mostrando a diferença nos navegadores... talvez assim fique mais fácil para a galera ajudar né?
beijos
PS: editado para avisar que já atualizei a página q coloquei online.
Edição feita por: duquesa_rj, 30/09/2004, 09:02.
#8
Franco
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
- Localidade:São Paulo
Posted 29/09/2004, 11:34
Um tutorial melhor que esse seria impossível, muito bom mesmo! Vou , inclusive, copiar para estudá-lo mais tarde, quando sobrar-me tempo. Tableless ainda é uma incógnita para mim. A situação assemelha-se quando tive de aprender linguagem C - imaginava certo código, seguia minha intuição, mas o resultado final era desastroso. Até que me toquei estar com problemas em lógica de programação. Web design não é minha área, mas gosto de 'brincar' com layouts aqui, embora não tenha o tempo que gostaria para me dedicar mais, Além disso, ainda não peguei o "espírito da coisa", principalmente quando preciso posicionar camadas sob determinada forma. Estou com uns 10 links de referências de estudos sobre css e tableless - logo, algum dia hei de entender essa coisa toda.
No mais obrigado a todos que responderam. Estas informações, com certeza, serão muito úteis.
No mais obrigado a todos que responderam. Estas informações, com certeza, serão muito úteis.
#9
Klaus
-
- Ex-Admins
-
- 7924 posts
@ ubuntu jaunty
- Sexo:Masculino
- Localidade:127.0.0.1
Posted 29/09/2004, 12:04
<div style="width: 300px; border: 1px solid black; text-align: center; padding: 80px 0px;">Tableless... SUX?</div>
No firefox ficou apenas um retângulo cinza escuro
Seu Firefox tá com problema... 
Attached Files
-
div.JPG 15.06KB
0 downloads
#10
duquesa_rj
-
- Usuários
-
- 21 posts
Novato no fórum
- Sexo:Não informado
Posted 30/09/2004, 09:17
Buááááááá..
teu firefox é mais bonito q o meu!
Tb queeeeeero ..rs
Eu coloquei o código na área do título q é o onde nosso amigo está com problema
Ficou um retângulo cinza escuro pq a burra aqui apagou o texto.
Mas mesmo assim, deu diferença na visualização entre o firefos e o ie.
Veja as diferenças entre os navegadores:
No IE
No Firefox
#11
duquesa_rj
-
- Usuários
-
- 21 posts
Novato no fórum
- Sexo:Não informado
Posted 30/09/2004, 09:30
Páginas em tableless são viáveis, desde q vc não abuse do css justamente por causa das diferenças entre os navegadores.Tableless ainda é uma incógnita para mim. ...
Web design não é minha área, mas gosto de 'brincar' com layouts aqui, embora não tenha o tempo que gostaria para me dedicar mais, Além disso, ainda não peguei o "espírito da coisa", principalmente quando preciso posicionar camadas sob determinada forma. Estou com uns 10 links de referências de estudos sobre css e tableless - logo, algum dia hei de entender essa coisa toda.
Mas vale a pena o "sufoco" pq ficam bem mais leves do q com o uso das tags <table>
Atualmente já existem várias páginas em português, com tudo ou quase tudo, do site W3C. Estou precisando tirar um tempinho para verificar tudo e poder relembrar algumas coisas q já foram esquecidas. Sou uma apaixonada por css
#12
Klaus
-
- Ex-Admins
-
- 7924 posts
@ ubuntu jaunty
- Sexo:Masculino
- Localidade:127.0.0.1
Posted 30/09/2004, 10:44
Nahhhhhh meu FF é modelo exclusivo, rs...Buááááááá..
teu firefox é mais bonito q o meu!
Tb queeeeeero ..rs
Eu coloquei o código na área do título q é o onde nosso amigo está com problema
Ficou um retângulo cinza escuro pq a burra aqui apagou o texto.
Mas mesmo assim, deu diferença na visualização entre o firefos e o ie.
Veja as diferenças entre os navegadores:
No IE
No Firefox
Um dos obstáculos que eu ainda hoje, vejo para aderir com totalidade ao tableless é justamente essa ainda, falta de padronização dos elementos...
O CSS é excelente, mas infelizmente o suporte fornecido pelos navegadores...
Mesmo o site da Macromedia... Exemplo maravilhoso de tableless, não funciona adequadamente em certas seções, com o Opera em uso... O próprio site gera o aviso...
#13
thb_matrix
-
- Usuários
-
- 4 posts
Novato no fórum
- Sexo:Não informado
Posted 01/10/2004, 22:11
Eu tiraria o "s" do final de navegadores...O CSS é excelente, mas infelizmente o suporte fornecido pelos navegadores...
O problema está com o Internet Explorer.
Os browsers da Mozilla Foundation, o Opera, o Netscape, o Konqueror, o Mozaic, entrs muitos outros, seguem os padrões da W3C(quem me conhece sabe o quanto eu honro estes padrões).
Estes browsers suportam o CSS adequadamente.
Quaisquer atributos não suportados por estes, ou são recomendáveis e não normativos da W3C(como o display, por exemplo, que é recomendado pela W3C mas não é obrigatório), ou então não existem em CSS de verdade.
Mesmo assim, as diferenças de um para outro podem estar em alguma coisa contida no estilo padrão do browser, o que é bem provável ao notar-se que ambos suportam os atributos especificados no código.
Edição feita por: thb_matrix, 01/10/2004, 22:12.
#14
Klaus
-
- Ex-Admins
-
- 7924 posts
@ ubuntu jaunty
- Sexo:Masculino
- Localidade:127.0.0.1
Posted 02/10/2004, 17:12
Continuo com o S no final... Esses dias eu tinha uma simples célula com uma tabela dentro... A célula possuia alinhamento horizontal right.
Coloquei o seguinte CSS na célula:
padding: 0px 5px;
Qual não foi a minha surpresa de um problema ter surgido... Opera, ignorou o alinhamento da célula, colocando a tabela a esquerda...
Contornei o problema com:
padding-right: 5px;
Tudo perfeito... Mas o problema não é só IE compatível, rs, não...
Coloquei o seguinte CSS na célula:
padding: 0px 5px;
Qual não foi a minha surpresa de um problema ter surgido... Opera, ignorou o alinhamento da célula, colocando a tabela a esquerda...
Contornei o problema com:
padding-right: 5px;
Tudo perfeito... Mas o problema não é só IE compatível, rs, não...
#15
Miguceamma
-
- Usuários
-
- 13201 posts
MiguPenjisse
Posted 05/10/2017, 00:25
Generique Cialis Livraison Rapide Antabuse Disulfiram Online buy viagra Commander Cialis 10
Cialis Hipertension viagra online Priligy Quanto Tempo Prima Propecia Sintomas Viagra Prescription
Cialis Hipertension viagra online Priligy Quanto Tempo Prima Propecia Sintomas Viagra Prescription
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
