Ir ao conteúdo
  • Cadastre-se
Felipe Paz

Erro de renderização de div no chrome

Recommended Posts

E ae galera, tudo beleza? Sou novo no meio web development e já surgiu um erro que eu não estou sabendo identificar.

 

Estou criando um site pessoal, contudo, no firefox está tudo ok, todavia, quando acesso o site com o chrome, duas divs ficam sobrepostas.

 

Vou passar o trecho do html e do css (refere às divs noticias e html ):

 

 <div class="html">
                    <div class="htmltexto">
                        <p>
                        Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis feliz at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. </p>
                        <img src="Imagens/html5-css3.png">
                   </div>
 </div>
            
            
            
            <div class="noticias">
                <div id="blog"></div>
                <h1 id="ti-not">Confira as últimas notícias sobre tecnologia</h1>
                <div class="container-noti">
                    <div class="noticia">
                        <h2>Título</h2>
                        <p>
                        Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis feliz at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. </p>
                        <a href="">Leia mais</a>
                    </div>
                    <div class="noticia">
                        <h2>Título</h2>
                        <p>
                        Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis feliz at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. </p>
                        <a href="">Leia mais</a>
                    </div>
                    <div class="noticia">
                        <h2>Título</h2>
                        <p>Praesent in mauris eu tortor porttitor accumsan. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer tempor. Vivamus ac urna vel leo pretium faucibus. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Aliquam ante. Curabitur bibendum justo non orci.</p>
                        <a href="">Leia mais</a>
                    </div>
                    <div class="noticia">
                        <h2>Título</h2>
                        <p>Praesent in mauris eu tortor porttitor accumsan. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer tempor. Vivamus ac urna vel leo pretium faucibus. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Aliquam ante. Curabitur bibendum justo non orci.</p>
                        <a href="">Leia mais</a>
                    </div>
                </div>
            </div>
Citação

 

* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: Arial, Verdana, sans-serif;
    color: black;
    background: white;
}

.backmenu {
    float: left;
    width: 100%;
    background: white;
    height: 80px;
    position: fixed;
    margin-top: -50px;
}

.menu {
    float: left;
    background: #5282E2;
    width: 100%;
    display: inline;
    box-shadow: 4px 4px 4px black;
    position: fixed;
    height: 100px;
    margin-top: 80px;
}

.menu li {
    display: inline;
    float: left;
    margin-top: 40px;
}

.menu li:first-child {
    margin-left: 70px;
}

.menu a {
    text-decoration: none;
    color: white;
    transition: color 0.2s ease-out;
}

.menu a:hover {
    color: black;

}

.logo {
    float: right;
    margin-right: 60px;
    margin-top: -60px;
}

.banner {
    background-image: url("../Imagens/back.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

.intro {
    float: left;
    color: white;
    text-shadow: 3px 3px 3px black ;
    margin-top: 175px;
    margin-left: 40px;
    font-size: 25px;
    margin-bottom: 227px;
    transition: color 0.1s ease-out;
}

.intro h1 {
    width: 300px;
}

.intro:hover {
    color: #5282e2;
    text-shadow: 6px 6px 6px black;
}

.icones {
    margin-top: 20px;
    float: right;
    margin-right: 70px;
}

.servicos {
    width: 1100px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.java {
    margin-top: 5px;
    background-image: url(../Imagens/back-java2.jpg);
    -moz-background-image: url(../Imagens/back-java2.jpg);
    -webkit-background-image: url(../Imagens/back-java2.jpg);
    -o-background-image: url(../Imagens/back-java2.jpg);
    background-attachment: fixed;
    width: 100%;
    height: 800px;
}

.javatexto {
    width: 100%;
    background: beige;
    height: 300px;
    float: left;
    margin-top: 500px;
}

.javatexto p {
    margin-top: 70px;
    width: 500px;
    float: right;
    text-align: justify;
    padding-right: 50px;
}

.javatexto img {
    margin-top: 15px;
    padding-left: 50px;
}

.html {
    margin-top: 5px;
    background-image: url(../Imagens/imagem3.jpg);
    -moz-background-image: url(../Imagens/imagem3.jpg);
    -webkit-background-image: url(../Imagens/imagem3.jpg);
    -o-background-image: url(../Imagens/imagem3.jpg);
    background-attachment: fixed;
    width: 100%;
    height: 800px;
}

.htmltexto {
    width: 100%;
    background: beige;
    height: 300px;
    float: right;
    margin-top: 500px;
}

.htmltexto p {
    margin-top: 70px;
    width: 500px;
    float: left;
    text-align: justify;
    padding-left: 50px;
}

.htmltexto img {
    margin-top: 15px;
    padding-right: 50px;
    float: right
}

.noticias {
    width: 100%;
    background: rgba(0,51,102,0.3);
    -moz-background: rgba(0,51,102,0.3);
    -webkit-background: rgba(0,51,102,0.3);
    -o-background: rgba(0,51,102,0.3);
    background-position: center;
    height: 590px;
    float: left;
    margin-top: 20px;
}

#ti-not {
    text-align: center;
    margin-top: 15px;
}
.container-noti {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.noticia {
    float: left;
    width: 350px;
    background: rgba(250,250,250,0.5);
    -moz-background: rgba(250,250,250,0.5);
    -webkit-background: rgba(250,250,250,0.5);
    -o-background: rgba(250,250,250,0.5);
    margin-left: 120px;
    margin-bottom: 3px;
    border-radius: 4px;
    box-shadow: 3px 3px 3px black;
    margin-top: 30px;
    
}

.noticia h2 {
    border-bottom: 1px dashed black;
    width: 70%;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-top: 4px;
}

.noticia p {
    text-align: justify;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.noticia a {
    float: right;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background: #5282e2;
    text-decoration: none;
    color: white;
    transition: background 0.1s ease-out, color 0.1s ease-out;
    margin-right: 5px;
    margin-bottom: 5px;
}

.noticia a:hover {
    color: black;
    background: white;
    color: #5282e2;
}

.contato {
    float: left;
    width: 100%;
    background: white;
    margin-top: 15px;
    height: 780px;
}

.contato h1 {
    color: #c0c0c0;
    font-family: Georgia;
    margin-top: 15px;
    margin-left: 30px;
    box-shadow: 3px 3px 3px black;
    width: 500px;
}
.contato-banner {
    width: 100%;
    background: #c0c0c0;
    height: 316px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 25px;
}

.contato-banner img {
    margin-left: 180px;
}

.form-pos {
    float: left;
    width: 500px;
    margin-left: 100px;
}

.form-cont {
    float: right;
    width: 500px;
    margin-right: 150px;
    color: #5282E2;
    margin-top: 16px;
}

.form-cont p {
    margin-bottom: 30px;
}

.form-cont h2 {
    margin-bottom: 30px;
}

.formulario input {
    margin-top: 20px;
    margin-left: 150px;
    width: 300px;
    border: 1px solid gray;
    height: 40px;
    padding-left: 5px;
}

.formulario input:hover {
    border: 1px solid red;
    height: 40px;
}

.formulario input:focus {
    border: 1px solid red;
    height: 40px;
}

.formulario textarea {
    margin-top: 20px;
    margin-left: 150px;
    border: 1px solid gray;
    padding: 5px;
}

.formulario textarea:hover {
    border: 1px solid red;
}

.formulario textarea:focus {
    border: 1px solid red;
}

.formulario button {
    width: 100px;
    height: 35px;
    margin-top: 15px;
    margin-left: 150px;
}

.rodape {
    background-image: url(../Imagens/blue4.png);
    -moz-background-image: url(../Imagens/blue4.png);
    -webkit-background-image: url(../Imagens/blue4.png);
    -o-background-image: url(../Imagens/blue4.png);
    background-position: right center;
    width: 100%;
    height: 400px;
    float: left;
    margin-top: 15px;
}

.footer {
    width: 300px;
    margin-top: 130px;
    margin-left: 100px;
    float: left;
    color: black;
}

.footer address {
    text-shadow: 2px 2px 2px gray;
    font-size: 18px;
}

.rights {
    float: left;
    margin-top: 63px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    color: white;
    background: rgba(0,0,0,0.7)
}
/* Só elementos */

#opacidade {
    float: right;
    background: rgba(0, 0, 0, 0.6);
    width: 80%;
    height: 100px;
    -moz-background: rgba(0, 0, 0, 0.6);
    -webkit-background: rgba(0, 0, 0, 0.6);
    -o-background: rgba(0, 0, 0, 0.6);
    
}

.fade {
    opacity: 0.5;
}

.fade:hover {
    opacity: 1;
}

.clear {
    clear: both;
}

A div noticia sobrepõe a div html, no chrome.

Dá pra conferir o site no k9sistemas.comli.com

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×