Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, sou iniciante em CSS e HTML. Com os codigos CSS que aprendi resolvi criar um site para meu colega. Fui fazendo e visualizando no Mozila Firefox e tudo estava certo. Mas porém quando fui testar no Internet Explorer todas as minhas DIVS ficara desorganizadas.
Por Favor me Ajudem!!!!
Gostaria de saber também como alinhar a página no centro tanto no IE quanto no Firefox.
ARQUIVO CSS --------------------------------------------------
* {margin:0; padding:0}
body {
background: orange;
}p {
margin: 0 0 0 2;
}h2 {
color:#0000CD;
}
#container {
background: white;
width: 900px;
}
#header {
background: blue;
width: 900px;
}
#menu {
background: url("images/backbtn/menubtn2.png") repeat-x;
width: 900px;
}#menu ul {
list-style-type: none;
margin: 0 0 0 300;
}#menu ul li {
display: inline;
list-style-type: none;
margin: 0 0 0 10;
}#menu ul li a:link{
color: white;
background: url("images/backbtn/menubtn3.png") repeat-x;
text-decoration: none;
}#menu ul li a:hover{
color: white;
background: url("images/backbtn/menuhover3.png") repeat-x;
text-decoration: none;
}#menu ul li a:visited{
color: white;
text-decoration: none;
}
#banner {
width: 728px;
height: 90px;
margin: 2 auto;
}
#sidebar {
margin: 10 0 0 2;
background: white;
width: 161px;
height: 530px;
float: left;
}#sidebar ul {
margin: 0 0 0 5;
}#sidebar ul li {
background: orange;
list-style-type: none;
margin: 2 0 0 0;
border-bottom: 1px solid gray;
border-bottom-width: 1px;
}#sidebar ul li a:link{
text-decoration: none;
color: black;
background: orange;
display: block;
}#sidebar ul li a:hover{
color: black;
background: #FAEBD7 repeat-x;
display: block;
}#sidebar ul a:visited{
color: black;
}
#contents {
background: white;
width: 900px;
}
#box1 {
margin: 4 0 0 30;
background: white;
width: 376px;
height: 202px;
float: left;
border-right: 1px solid #cbc9c9;
}
#box2 {
margin: 20 40 0 4;
background: white;
width: 260px;
height: 186px;
float: right;
border-bottom: 1px solid #cbc9c9;
}#box2 a:link {
color:blue;
text-decoration: none;
}#box2 a:hover {
color:#a8a7a7;
text-decoration: none;
}#box2 a:visited {
color:blue;
}
#box3 {
margin: 4 0 0 4;
background: white;
width: 229px;
height: 160px;
float: left;
border-right: 1px solid #cbc9c9;
}#box3 a:link {
color:blue;
text-decoration: none;
}#box3 a:hover {
color:#a8a7a7;
text-decoration: none;
}#box3 a:visited {
color:blue;
}
#box4 {
margin: 10 0 0 4;
background: white;
width: 240px;
height: 154px;
float: left;
border-top: 1px solid #cbc9c9;
}#box4 a:link {
color:blue;
text-decoration: none;
}#box4 a:hover {
color:#a8a7a7;
text-decoration: none;
}#box4 a:visited {
color:blue;
}
#box5 {
margin: 4 10 0 4;
background: white;
width: 205px;
height: 158px;
float: right;
border-left: 1px solid #cbc9c9;
}#box5 a:link {
color:blue;
text-decoration: none;
}#box5 a:hover {
color:#a8a7a7;
text-decoration: none;
}#box5 a:visited {
color:blue;
}
#box6 {
margin: 4 0 0 4;
background: yellow;
width: 376px;
height: 180px;
float: left;
border-right: 1px solid #cbc9c9;
}#box6 a:link {
color:blue;
text-decoration: none;
}#box6 a:hover {
color:#a8a7a7;
text-decoration: none;
}#box6 a:visited {
color:blue;
}
#box7 {
margin: 4 4 2 0;
background: white;
width: 310px;
height: 185px;
float: right;
border-left: 1px solid #cbc9c9;
}#box7 a:link {
color:blue;
text-decoration: none;
}#box7 a:hover {
color:#a8a7a7;
text-decoration: none;
}#box7 a:visited {
color:blue;
}
#footer {
margin: 0 auto;
background: #cbcaca;
width: 860px;
height: 56px;
clear: both;
font-size: 14px;
}ARQUIVO CSS --------------------------------------------------------------
ARQUIVO HTM---------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<title></title>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
</head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
<div id="container">
<div id="header">
<img src="images/header.jpg">
</div>
<div id="menu">
<ul>
<li><a href="#">Ínicio</a></li>
<li><a href="#">Informações</a></li>
<li><a href="#">Mapa do Local</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Reserva Online</a></li>
</ul>
</div>
<div id="banner">
<embed src="images/banner/banner2.swf" quality="high" width="728" height="90" type="application/x-shockwave-flash" pluginspage="[http://www.macromedia.com/go/getflashplayer">](http://www.macromedia.com/go/getflashplayer)
</div>
<div id="sidebar">
<iframe src='http://selos.climatempo.com.br/selos/MostraSelo.php?CODCIDADE=54,56,53&SKIN=padrao' scrolling='no' frameborder='0' width=150 height='170' marginheight='0' marginwidth='0'></iframe>
<ul>
<li><a href="#">História do Local</a></li>
<li><a href="#">Informações</a></li>
<li><a href="#">Comidas Típicas</a></li>
<li><a href="#">Mapa / Rota</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Serviços Locais</a></li>
<li><a href="#">Site da Prefeitura</a></li>
<li><a href="#">Excursões Anteriores</a></li>
</ul>
</div>
<div id="contents">
<div id="box1">
<embed src="images/slides/portoseguro.swf" quality="high" width="376" height="202" type="application/x-shockwave-flash" pluginspage="[http://www.macromedia.com/go/getflashplayer">](http://www.macromedia.com/go/getflashplayer)
</div>
<div id="box2">
<h2>Excursões Anteriores</h2>
<p>Chapada Diamantina,
Itacaré, Ilheus, Recife, Maceio, João Pessoa, Porto Seguro, etc...</p><br>
<a href="#">Clique aqui <br>para maiores
informações.</a>
</div>
<div id="box3">
<h2>Meios de Pagamento:</h2>
<p>Parcelado em <b>3x</b> de<br>
R$ 150,00 no Carnê.</p><br>
<a href="#">Clique aqui <br>para maiores
informações.</a>
</div>
<div id="box4">
<h2>Transporte:</h2>
<p>Onibus com 42 lugares,
climatizado, extremamente confortáveis e reguláveis.</p><br>
<a href="#">Clique aqui <br>para maiores
informações.</a>
</div>
<div id="box5">
<h2>Próxima Excursão:</h2>
<p><b>Salvador - Paulo Afonso</b>.Veja mais informções e meio de pagamento.</p><br>
<a href="#">Clique aqui <br>para maiores
informações.</a>
</div>
<div id="box6">
<embed src="images/slides/comidas3.swf" quality="high" width="376" height="180" type="application/x-shockwave-flash" pluginspage="[http://www.macromedia.com/go/getflashplayer">](http://www.macromedia.com/go/getflashplayer)
</div>
<div id="box7">
<h2>Dias para Excursão:</h2>
<p><b>Contagem Regressiva para o dia da excursão.</p><br>
<p>Dia 05/04/2012 às 22:00 Horás.</p><br>
<script type="text/javascript">document.write("<span id='pageinval5' style='text-align:center; font-family:arial, helvetica, sans-serif; font-size:14px; color:#ffffff;font-weight:normal;background-color:#000000; padding:7px; margin:0;overflow:visible;border:0px;'></span>");function countdown_load64(){var the_event="";var on_event="Hoje, é a Excursão.";var yr=2012;var mo=05;var da=04;var hr=22;var min=0;var sec=0;var month='';var month=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");var bottom_event="";var now_d=new Date();var now_year=now_d.getYear();if (now_year < 1000)now_year+=1900;var now_month=now_d.getMonth();var now_day=now_d.getDate();var now_hour=now_d.getHours();var now_min=now_d.getMinutes();var now_sec=now_d.getSeconds();var now_val=month[now_month]+" "+now_day+", "+now_year+" "+now_hour+":"+now_min+":"+now_sec;event_val=month[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec;difference=Date.parse(event_val)-Date.parse(now_val);differenceday=Math.floor(difference/(60*60*1000*24)*1);differencehour=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);differencemin=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);differencesec=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);if(document.getElementById('pageinval5')){if(differenceday<=0&&differencehour<=0&&differencemin<=0&&differencesec<=1&&now_day==da){document.getElementById('pageinval5').innerHTML=on_event;}else if (differenceday<=-1){document.getElementById('pageinval5').innerHTML="Event : "+on_event+" : passed";}else {document.getElementById('pageinval5').innerHTML=the_event+" "+differenceday+" dias "+differencehour+" horas "+differencemin+" minutos "+differencesec+" segundos "+bottom_event;} }setTimeout("countdown_load64()",1000);}countdown_load64();</script>
</div>
</div>
<div id="footer">
<p>CopyRight © - 2011 - Todos os direitos reservados.</p>
<p><b>Tel. (71)</b> 3312-XXXX / 8801-XXXX / E-mail: carlosXXXX@hotmail.com </div>
</div>
</body>
</html>ARQUIVO HTML -------------------------------------------------------------------------------------
Carregando comentários...