Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
De antemão, desculpem se estou perguntando algo que já tenha sido respondido. A princípio não encontrei minha resposta em nenhum dos tópicos, acho que são mais avançados do que minha dúvida...
Esta é uma primeira página em CSS e estou apanhando muuiiitoo! http://forum.imasters.com.br/public/style_emoticons/default/blush.gif
Depois de muito lutar, achei que tinha conseguido entender os princípios e, finalmente, centralizar 3 divs ("dinner, banner e yellow-out") dentro do que seria uma coluna direita de um container. (A página é super básica: Duas colunas e um ropapé e a coluna direita com mais duas divs. Só isso... (ufa! mas que "SÓ!") :blink:
Bem, eu estava toda feliz, quando resolvi então abrir o IE... funciona no FF, não funciona no IE6 e nem em sonhos no IE5. Preciso que funcione, pelo menos no IE6, mas se conserto neste último, estrago no FF...
Não há width + padding ou border em nenhum elemento, então não vi razão pra usar HACK.. Usei a marcação * { margin:0; padding:0; } em cima (pois li em algum lugar que ajudaria) e tentei incluir um position:relative em alguns elementos, como não afetou nada, eu tirei.
Por favor, alguém tem alguma idéia do que estou deixando de fazer? Fiz passo a passo, consegui ir validando, mas não consigo resolver a incompatibilidade dos browsers...
Estou colocando os dois códigos htm e css aqui mesmo, pois não sei como fazer diferente. Espero q. não haja problema.
Obrigada pela atenção e mais uma vez, desculpem a pergunta ser talvez básica demais pra esse fórum..
Obrigada,
Cristina A.
--------------------------------------
HTML Code:
<!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"](http://www.w3.org/1999/xhtml) xml:lang="pt" lang="pt">
<?xml version="1.0" encoding="ISO-8859-1"?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> HOME </title>
<meta name="TITLE" content="Titulo - Home" />
<meta name="DESCRIPTION" content="Lorem ipsum dolor sit amet, consectetuer adipiscin" />
<meta name="KEYWORDS" content="Lorem ipsum dolor sit amet, consectetuer adipiscin" />
<meta name="OWNER" content="Lorem ipsum dolor sit amet, consectetuer adipiscin" />
<meta name="AUTHOR" content="Lorem" />
<meta http-equiv="CONTENT-LANGUAGE" content="Português" />
<link rel="stylesheet" type="text/css" href="provincia.css" />
</head>
<body>
<div id="container">
<div id="col-esq">
<h1>
<span>Bar e Restaurante Província - Restaurante a Kilo em Botafogo com Entrega em Domicílio
</span>
</h1>
<h2>
Bar e Restaurante a Kilo Província<br />
Rua Arnaldo Quintela, 36<br />
Botafogo<br />
Rio de Janeiro<br />
<span>Tel: 2236-5656</span><br />
</h2>
<p>
Aberto d e 11h às 15 h<br />
Sábados inclusive<br />
</p>
<p>
<img src="imagens/valid-xhtml10.gif" alt="Logomarca W3C" />
</p>
<p>
<img src="imagens/Skyline.gif" alt="Skyline" />
</p>
</div><!--fim div col-esq-->
<!--AQUI COMEÇA O PROBLEMA!!!-->
<div id="col-dir">
<div id="dinner">DINNER</div>
<div id="banner">CSS c/width 540 p/COL-DIR</div>
<div id="yellow-out">YELLOW</div>
</div><!--fim div col-dir-->
<div id="rodape">RODAPÉ</div><!--fim div rodape-->
</div><!--fim div container-->
</body>
</html>---------------------------------
CSS Code:
* { margin:0; padding:0; }
body {
margin:0;
padding:0;
font-family: Verdana;
font-size: x-small;
color: White;
}
#container {
background-color: Black;
width:750px;
margin:0 auto;
}h1 {
font-size: 14px;
margin:10px;
height:217px;
background-image: url(imagens/Logomarca_transp.gif);
background-repeat: no-repeat;
}h1 span {
display:none;
}
#col-esq {
width:200px;
float:left;
}#col-esq h2 {
font-size: 10px;
text-align: center;
}#col-esq p {
font-size: xx-small;
text-align: center;
margin:10px auto;
}#col-esq span {
font-size: small;
text-align: center;
margin:10px auto;
}
#col-dir {
background-color: #DDA0DD;
width:540px;
margin:10px auto;
text-align:center;
float:left;
}
#dinner {
background-color: Aqua;
width:64px;
height:40px;
margin-top: 11px;
margin-right: 5px;
margin-bottom: 12px;
margin-left:79px;
float:left;
}
#banner {
background-color: #FFD700;
width:234px;
height:63px;
margin:0 5px;
float:left;
}
#yellow-out {
background-color: Lime;
width:64px;
height:40px;
margin-top: 11px;
margin-right: 79px;
margin-bottom: 12px;
margin-left:5px;
float: left;
}
#rodape {
background-color: #7A8FAF;
clear:both;
}Carregando comentários...