Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

calcio

Cada Navegador mostra uma coisa

Por , em Desenvolvimento frontend

Recommended Posts

calcio    2

calcio
Postado

Estou a 2 dias apanhando com esses infelizes do tableless e webstandard. Na teoria é muito lindo, rápido e elegante, na prática um parto pra fazer. Nada roda certo, cada Browser faz oq quer, cada um interpreta da maneira que bem entende. Então pergunto PARA QUE PADRÃO WEB (Webstandard)?

 

Deixando minha revolta de lado vamos ao problema..

To tentando fazer um layout de teste, para resolver problemas de posicionamento de DIVs no meu trabalho, só que cada navegadou ou div se comportam de maneiras diferentes.

 

Vejam o CSS da div MARCA e da div MENU, vejam que elas usam as mesmas formas de posicionamento, a div Marca funciona no FF e no IE ja a div MENU não. A pegunta que ñ quer calar. Pq essa Frecurite Crônica Agúda?

 

Estou usando <ul><li> Pq elas ñ funcionam como quero? Abaixo vai o Código CSS e o HTML. Se vcs puderem me ajudar a resolver esse prob. quero muito aprender essa nova webstandard mas se isso for ficar nisso prefiro 100000000 de vezes fazer o "Webstandard padão" que era usado nos primódios da web

 

indice.css

/* CSS INDICE - Página Pincipal*/* {	margin: 0; /* zerando as margens do body */	padding: 0; /* zerando os paddings do body */	text-decoration: none;	text-align: center;}body{	background-color: #FFFFFF;	color: #000000;	font: 12pt Verdana, Tahoma, Arial;}#principal{	width:700px;	position: relative;	margin: 0px auto;	height:580px;	background-color:#0099CC;	display:block;}#marca{	width: 120px;	height:50px;	position: relative;	margin: 0px auto;	display:block;	top: 6%;	left: 40%;}#menu{	width: 450px;	height: 450px;	position: relative;	background-color: #EEEEEE;	border: 1px solid #999999;	display:block;	top: 5%;	left: 1%;}h1{ font: bold 400% Verdana, Tahoma, Arial; color: #FFFFFF; text-decoration: underline;}h2, h3, h4{ color: navy; text-decoration: none; position: relative; }h2{	font: bold 410% Verdana, Tahoma, Arial; letter-spacing: 5px; }h3{	font: bold 310% Verdana, Tahoma, Arial; letter-spacing: 4px; }h4{	font: bold 112% Verdana, Tahoma, Arial; }p { text-align: left; }ul { text-align: left; font: bold 8pt Verdana, Tahoma, Arial; color: #000000;}ul li { text-align: left; list-style-type: disc; font: bold 8pt Verdana, Tahoma, Arial; color: #000000; }ul li a:link { text-decoration: none; font: bold 8pt Verdana, Tahoma, Arial; color: #000000; }ul li a:hover { text-decoration: underline; font: bold 8pt Verdana, Tahoma, Arial; color: #000000; }
index.html

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Guia WEB 2.0</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="description" content="Guia Prático de WEB 2.0" /><meta name="keywords" content="Webstandard, Web2.0, CSS, XHTML, Tabeless" /><meta name="resource-type" content="document" /><meta name="language" content="pt-br" /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="css/indice.css" type="text/css"/></head><body><div id="principal"> 	<h1>WEB 2.0</h1>	<div id="menu"> 		<h4>Guia rápido para uma estratégia</h4>		<h2>WEB 2.0</h2>		<h3>de sucesso</h3>		<p><br /><b>Neste guia, você descobrirá:</b></p>		<ul>			<li><a href="#">O que é Web 2.0.</a></li>			<li><a href="#">Por que a Web 2.0 é importante.</a></li>			<li><a href="#">O que a Web 2.0 significa para uma Empresa.</a></li>			<li><a href="#">Cinco técnicas para usar a Web 2.0 como forma de reinventar 				o relacionamento com seus clientes.</a></li>			<li><a href="#">Dez maneiras de tirar vantagem da Web 2.0.</a></li>			<li><a href="#">As linguagens e tecnologias da nova Web.</a></li>			<li><a href="#">Como fazer uma aplicação rica de sucesso para a Internet 				(RIA).</a></li>			<li><a href="#">Como estabelecer critérios para a escolha dos seus 				fornecedores.</a></li>			<li><a href="#">Artigos, livros, referências para programadores, diretórios 				de pesquisa, sites de exemplos, recursos e Mashups.</a></li>		</ul>	</div>	<div id="marca">		<a href="http://validator.w3.org/check?uri=referer">		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="XHTML 1.0 Transitional Válido" height="31" width="88" border="0" />		</a> 	</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

calcio, você estudou alguma coisa sobre css ou já começou a fazer e ia olhando quando surgiam dúvidas?

 

Leu os artigos sobre posicionamento aqui do fórum?

Se leu, me responda pq tanto position: relative; no seu código?

 

Tá afim de fazer uma layout com quantas colunas?

2? http://www.maujor.com/tutorial/lay2col-faux-colunm.php

3? http://www.maujor.com/layout3col.shtml

 

Olha esses link e ve se refresca a sua memória.

No início até pode parecer meio complicado, mas depois de estudar o básico, não tem estresse.

 

Leia os links com calma, se tiver mais alguma dúvida, poste um link e diga onde está o problema ok?

 

Um grande abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

calcio    2

calcio
Postado

Gio! já li várias coisa inclusive esses links que mandou, ja usso CSS a um bom tempo, mas não para usar Tableless.Meu Layout ñ tem colunas, se você puder veja o HTML.Nada mais é que um div que fica Top-center na página e 2 divs dentro da principal (div menu e div marca) só isso.dentro da Div menu tento usar <ul> pra fazer uma lista não ordenada e fica uma zona.OQ ta me deixando + P.... é que as divs Menu e Marca usam a mesma forma de posicionamento e como dito, no outro post, uma funciona perfeitamente no FF e no IE a outra não. Isso q ñ dá pra entender.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Amigo, não tire conclusões sobre os Padrões Web desta forma, a culpa das diferenças é dos fabricantes dos browsers, e não dos Padrões em si.

No começo é meio dificil, mas pode ter certeza que quando da muito erro nos browsers o problema esta no seu codigo, e não nos mesmos.

 

Veja este tutorial prático, e perceba que tableless não é só blablabla.

Compartilhar este post

Link para o post
Compartilhar em outros sites

calcio    2

calcio
Postado

Gio, ñ tenho link disso só o Fonte que postei no tópico.

INSIDE, acho q o problema ñ é código, como você explica uma DIV funcionar em 2 Browsers e a outra não sendo que ambas utilizam a mesma coisa, só muda a posição, e em relação a nível as 2 estão no mesmo nível. isso que quero entender! O conteúdo da div pode afetar o posicinamento dela?

 

<div id="pincipal">   <div id="menu"></div>    <div id="marca"></div></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Obvio que o conteudo de uma div pode afetar a sua posição. Tenha calma, com o tempo você vai enteder melhor como as propriedades se comportam, e vai conseguir "domar" os browsers(principalmente o Iéca, que dá mais problemas).

 

PS: Observei no seu codigo diversas coisas desnecessárias, e outras que poderiam ser abreviadas http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Oi!

 

Bom, sua revolta pode até parecer ter cabimento, mas você tem que partir da premissa que é preciso entender como cada tag é exibida pelos navegadores e começará a entender assim posicionamento versus modos de exibição.

 

Cada tag se porta de uma maneira e cada browser interpreta de uma forma, por exemplo, o espaçamento superior entre H1 (o margin) é BEM diferente entre o Internet Explorer e o Firefox. Outro exemplo é como o IE interpreta os paddings: ele soma o espaçamento dos paddings no width geral, ou seja, se você coloca um width: 130px; padding: 20px; terá um width final de 170px, mas isso só no IE, pois no FF vai estar do jeito "certo". Doidera? Você ainda não viu como o IEca compreende as bordas, somando-as ao conteúdo total do elemento, como faz com o padding.

 

Existem outras noções que você precisa aprender, não adianta nada falar "eu seu trabalhar com CSS, mas não nos padrões", porque você está dizendo "eu sei pintar fontes e aplicar fundos, mas não preciso maid do que isso". Um professor meu de história dizia "saber não é o mesmo que entender, quando você entende o resto fica mais fácil", é mais ou menos o que eu digo pra você: não adianta decorar, se você não aprender o básico.

 

E outra, entender como funciona esse lance de padrões, aplicação de estruturas corretas e a tal da semântica leva tempo, mas o que você ganha depois não dá pra mensurar! :) É uma estrada difícil? Sim, é, e muito chata, porque o volume de material "novo" pra quem pensa como designer velho é MUITO grande, mas como diria o Yoda nessa hora:

 

Do, or do not. There is no try.

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito