Jump to content
julianaparra

Quando minimizo a tela minhas div cortam no meio

Recommended Posts

Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais.

Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. 

 

Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/

 

HTML

<!DOCTYPE html>
<html lang="pt-BR">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/main.css">
    <title>Juliana Parra</title>
</head>
 
<body>
    <header class="menu-principal">
        <main>
            <div class="header-1">
                <div class="logo">
                    <a href="index.html">
                        <img src="./img/logo.png" />
                    </a>
                </div>
                <div class="links">
                    <div class="menu">
                        <nav>
                            <ul>
                                <li><a href="index.html">Início</a></li>
                                <li><a href="sobre.html">Sobre</a></li>
                                <li><a href="portifolio.html">Portifolio</a></li>
                                <li><a href="contato.html">contato</a></li>
                            </ul>
                        </nav>
                    </div>
                    <ul class="redes-sociais">
                        <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png"
                                    alt="Meu github"></a></li>
                        <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img
                                    src="./img/linkedin.png" alt="Meu linkedIn"></a></li>
                    </ul>
                </div>
            </div>
        </main>
    </header>
    <div class="header-2">
        <div class="imagem-fundo"></div>
        <div class="container"></div>
 
        <div class="imagem-miolo">
            <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">
        </div>
    </div>
    <div>
        <div class="texto">
            <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>
                Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,
                excepturi tempore nemo porro vel sequi ea quisquam velit sunt?
                Recusandae quidem aperiam tenetur.</p>
            <div class="botao">
                <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a>
            </div>
        </div>
    </div>
    <footer>
        <div class="rodape">
            <main>
                <div class="direitos-reservados">
                    2019 Todos os Direitos Reservados
                </div>
            </main>
        </div>
    </footer>
</body>
 
</html>
 
 
//CSS
 
body {
    font-family: 'Open Sans'sans-serif;   
    width: 100%;
    height: 100%;
    margin: 0 auto;   
    }
.menu-principal {
    background-color: #252323;
    height: 68px;
    width: 100%;         
   }
main {
    margin: 0 auto;
    width: 980px;    
    position: relative;
}
.logo {
    float: left;
    padding: 10px;
    width: 30%;
}
.links ul li {
    margin-left: 20px;
    display: inline-block;
    float: left;
    list-style: none;
}
.links{
    padding: 10px;
    width: 65%;
    float: left;
}
.menu ul li a {
    padding: 10px;
    color: #8b8b8b;
    text-decoration: none;
    font-size: 16px;
    text-transform: uppercase;
}
.menu ul li a:hover{
    color: #00bac6;
}
.slick-initialized {
    overflow: hidden;
}
.imagem-fundo {
    background-image: url(/img/imagem_home.png);
    width: 100%;  
    height: 400px
    background-repeat: no-repeat;       
}
.container {    
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */
background: #00aa9b/* Old browsers */
background: -moz-linear-gradient(-45deg#00aa9b 8%#2989d8 45%#207cca 52%#00ba3a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg#00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg#00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    display: block;
    width: 100%;  
    height: 30px;
}
 
.imagem-bolinhas{
    width: 1080px;
    position: relative;  
    left: 250px;    
    top: 20px;         
    height: 300px;      
    background-repeat: no-repeat;  
    size: cover;  
}
.texto {
    text-align: center;    
    width: 600px;
    height: 300px
    font-size: 25px;  
    padding: 20px;   
    position:relative;
    top:20%;
    left:30%;     
}
 
.bt {     
    text-decoration:none;   
        font-size: 15px;
        color:white;
        padding: 10px 20px;
        background: -moz-linear-gradient(
            top,
            #0083ab 0%,
            #00ba3b);
        background: -webkit-gradient(
            linearleft topleft bottom,
            from(#0083ab),
            to(#00ba3b));        
        border-radius: 10px;
        border: 1px solid;
        -moz-box-shadow:
            0px 1px 3px rgba(0,0,0,0.5),
            inset 0px 0px 0px rgba(255,255,255,0.7);
        -webkit-box-shadow:
            0px 1px 3px rgba(0,0,0,0.5),
            inset 0px 0px 0px rgba(255,255,255,0.7);
        box-shadow:
            0px 1px 3px rgba(0,0,0,0.5),
            inset 0px 0px 0px rgba(255,255,255,0.7);    
}
 
.rodape {
    color: #c1c1c1;
    background-color: #252323;
    height: 60px;
    width: 100%;      
}
.direitos-reservados {
    padding: 20px;
    width: 60%;
    float: right;    
}
Edited by julianaparra
coloquei o link

Share this post


Link to post
Share on other sites
5 horas atrás, julianaparra disse:

 <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">

 

Tente fazer assim

      <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt=""  style="width:100%;max-width:1000px;margin-top:32px;">

 

Share this post


Link to post
Share on other sites

Basicamente o que você tem são elementos com largura fixa, ou seja não importa a resolução eles vão sempre possuir a mesma largura.

Ou caso a muitos overflow o que causa a rolagem e não o ajuste na resolução.

 

Bem acessei o link fiz o download do código fonte e refiz a estrutura que estava cheia de elementos não usados, e dei uma arrumada no css que havia muita coisa inútil.

Agora é só aplicar responsivo usando media query e ajustar cada elemento de acordo com a resolução.

 

HTML

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/main.css">
        <title>Juliana Parra</title>
    </head>

    <body>
        <header class="menu-principal">
            <div class="logo">
                <a href="http://julianaparra-dev.com/index.html">
                    <img src="./img/logo.png" />
                </a>
            </div>
            <div class="links">
                <ul>
                    <li><a href="http://julianaparra-dev.com/index.html">Início</a></li>
                    <li><a href="http://julianaparra-dev.com/sobre.html">Sobre</a></li>
                    <li><a href="http://julianaparra-dev.com/portifolio.html">Portifolio</a></li>
                    <li><a href="http://julianaparra-dev.com/contato.html">contato</a></li>
                    <li>
                        <a href="https://github.com/Parrajuliana" target="_blank">
                            <img src="./img/github.png" alt="Meu github">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank">
                            <img src="./img/linkedin.png" alt="Meu linkedIn">
                        </a>
                    </li>
                </ul>
            </div>
            <div style="clear: both"></div> <!-- Limpar todos flutuantes antes de prosseguir -->
        </header>

        <div class="imagem-fundo"></div>
        <div class="container"></div>
        <div class="imagem-miolo">
            <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">
        </div>
        <div class="texto">
            <!-- Em HTML 5 não se usa mais a tag <strong>, é recomendação da W3.org -->
            <p><span style="font-weight: bold">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,
                excepturi tempore nemo porro vel sequi ea quisquam velit sunt?
                Recusandae quidem aperiam tenetur.</p>
            <div class="botao">
                <a class="bt" href="http://julianaparra-dev.com/sobre.html">saiba mais</a>
            </div>
        </div>
        <div class="rodape">
            <main>
                <div class="direitos-reservados">
                    2019 Todos os Direitos Reservados
                </div>
            </main>
        </div>
    </body>
</html>

 

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
html {
    overflow-x: hidden
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #ffffff
}
.menu-principal {
    background-color: #252323;
    height: 68px       
}
.logo, links {
    float: left;
    padding: 10px
}
.logo {
    width: 30%
}
.links {
    height: inherit;
    line-height: 68px
}
.links > ul {
    list-style: none;
    margin: 0
}
.links > ul > li {
    padding: 0 10px;
    display: inline-block
}
.links > ul > li > a {
    color: #8b8b8b;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase
}
.links > ul > li:nth-child(5) {
    padding: 0 0 0 10px
}
.links > ul > li > a:hover {
    color: #00bac6
}
.imagem-fundo {
    background-image: url(../img/imagem_home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 200px
}
.container {
    background: #00aa9b;
    background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%);
    width: 100%;  
    height: 30px
}
.imagem-miolo {
    text-align: center
}
.imagem-bolinhas {
    margin-top: 20px;
    max-width: 100%;
    max-height: 260px;
    min-height: 200px
}
.texto {
    max-width: 600px;
    height: 300px; 
    margin: auto;
    text-align: center;
    font-size: 25px;  
    padding: 20px
}
.botao {
    font-weight: bold;
    margin-top: 10px
}
.bt {     
    text-decoration:none;   
    font-size: 15px;
    color:white;
    padding: 10px 20px;
    background: linear-gradient(#0083ab, #00ba3b);
    border-radius: 10px;
    border: 1px solid;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5) 
}
.rodape {
    color: #c1c1c1;
    background-color: #252323;
    height: 60px
}
.direitos-reservados {
    padding: 20px;
    float: right
}

 

Um ponto que notei que não vai ficar legal é a imagem "imagem-bolinhas", eu pessoalmente faria um composto de alguns elementos para gerar algo similar ou idêntico ao da imagem, uso de ícones vetoriais seria de grande utilidade nessa situação.

Outro ponto que devo ressaltar... Evite ao máximo uso de imagem PNG principalmente se são grandes, pois são muito pesadas para carregar, prefira usa JPG ou JPEG.

 

É de muito prático aderir a framework's ou css padronizados para construir a base do layout.

Caso interesse eu mesmo criei um arquivo css para definições básicas de estrutura https://github.com/Spell-Master/sm-web/blob/master/css/sm-default.css

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.