Boa noite, sou novato em html/css, estou criando um site para fins de estudo, porem o mesmo não funciona corretamente em todos os navegadores. No firefox funciona exatamente como eu quero, porem nem no chrome e nem no explore o resultado é o mesmo.
No chrome e no Explore é como se os background-color da section e do aside não funcionasse.
segue o codigo
headermenufooter CSS
- {
margin: 0px;
padding: 0px;
font-size: 100%;
}
.content { width: 1200px; height: 800px; background-color: #696969; font-family: arial, helvetica, sans-serif; }
/<em>formata header</em>/ header { width: 100%; height: 30%; position: relative; background-color: #fff; overflow: hidden; }
/<em>formata imagens</em>/ .banner { position: absolute; opacity: 0; animation-name: bannerslide; animation-duration: 15s; animation-iteration-count: infinite; }
@keyframes bannerslide { 25% { opacity: 1; transform:scale(1.1,1.1); } 50% { opacity: 0; } }
/definite deley entre imagens/
.banner:nth-child(1) {} .banner:nth-child(2) { animation-delay: 5s; } .banner:nth-child(3) { animation-delay: 10s; }
/<em>configura os menus</em>/ ul { background-color: lightgrey; width: 100%; height: 30px; text-align: center; line-height: 30px; cursor: pointer; }
ul li{ width: 200px; height: 30px; list-style: none; float: left; }
ul li:hover { background-color: #DCDCDC; }
/<em>formata submenu</em>/ ul li ul li { background-color: lightgrey; text-align: left; box-sizing: border-box; padding-left: 5px; }
/<em>oculta e mostra a submeny</em>/ ul li ul { display: none; }
ul li:hover ul {
display: block;
}
a:link { text-decoration: none; color: #000000; }
a:visited{ color: #000000; }
/<em>formata rodapé</em>/ footer{ clear: both; width: 100%; height: 10%;}
section e aside CSS
- {
margin: 0px;
padding: 0px;
font-size: 100%;
}
/formata pagina principal de boas vindas/
section {
width: 60%;
height: 50%;
background-color: #ffff;
float:left;
}
/formata novidades/
aside {
width: 38.3%;
height: 47.8%;
background-color: #ffff;
border: 10px double #333;
border-radius: 10px;
float: left;
}
