Jump to content
  • 0
gbilibio

Página com margem a direita ao diminuir tamanho de janela de navegador

Question

Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do

navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:

 

Página HTML

 

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8"/>
        <title>Aula 07</title>
        <link rel="stylesheet"
        type="text/css" href="style.css"/>
        <meta name="viewport"
        content="width=device-width, 
        initial-scale=1.0"/>
    </head>
    <body>
        <header>
            <div class="contatos">
                <div class="cont">
                    <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
                </div>
                <div class="cont">
                    <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
                </div>
                <div class="cont">
                    <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
                </div>
            </div>
        </header>
        <div class="topo">
            <div class="contatos2">
                <div class="cont2">
                    <img  align="right" src="logo.png">
                </div>
                <div class="cont2">
                    <p> HOME </p>
                </div>
                <div class="cont2">
                    <p> EMPRESA </p>
                </div>
                <div class="cont2">
                    <p> SERVIÇOS </p>
                </div>
                <div class="cont2">
                    <p> HOSPEDAGEM </p>
                </div>
                <div class="cont2">
                    <p> PORTIFÓLIO </p>
                </div>
                <div class="cont2">
                    <p> CONTATO </p>
                </div>
            </div>
        </div>
        <div class="banner">
        
        </div>
        <div class="banner2">
        
            <div class="banneresq">
            <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
            <div class="linhatexto">
            
            </div>
            <p> 
            Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
            no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
            são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
            Bem para Atender Sempre.<br>
            </p>
            <div class="botaoentrar" >
            <h1>Entrar</h1>
            </div>
            </div>
            
            <div class="bannerdir">
            
            <img src="Imagens/bannerdireita2.jpg" width="320" height="280">
            
            </div>
        </div>
        <div class="banner3">
            
            <div class="caixamaior">
                <div class="caixa1">
                    <img src="Imagens/box1.jpeg" width="250" height="200">
                        <div align="center">
                            <p> CRIAÇÃO DE SITES </p>
                        </div>
                        <div class="caixa1texto">
                            <h1> 
                            Temos desde sites simples de 1 página,<br>
                            modelos padrões e personalizados<br>
                            com páginas internas. Confira nossos<br>
                            modelos ou solicite um.<br>
                            </h1>
                        </div>
                        <div class="botaosaibamais">
                            <h1>Saiba Mais</h1>
                        </div>
                </div>
                <div class="caixa2">
                    <img src="Imagens/box2.jpg" width="250" height="200">
                        <div align="center">
                            <p> HOSPEDAGEM DE SITES </p>
                        </div>
                        <div class="caixa2texto">
                            <h1>
                            Hospede um site em um servidor<br>
                            confiável e de qualidade, que sempre<br>
                            lhe dê suporte necessário. Deixe seu<br>
                            site 100% online.<br>
                            </h1>
                        </div>
                        <div class="botaosaibamais">
                            <h1>Saiba Mais</h1>
                        </div>
                </div>
                <div class="caixa3">
                    <img src="Imagens/box3.jpg" width="250" height="200">
                        <div align="center">
                            <p> MANUTENÇÃO DE SITES </p>
                        </div>
                        <div class="caixa3texto">
                            <h1>
                            Mantenha seu site sempre atualizado,<br>
                            passando credibilidade aos seus<br>
                            clientes e ganhando ponto com o<br>
                            Google e outros buscadores.<br>
                            </h1>
                        </div>
                        <div class="botaosaibamais">
                            <h1>Saiba Mais</h1>
                        </div>
                    
                </div>
                
            </div>
        
        </div>
    </body>
</html>

 

PÁGINA CSS

 

@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');

header{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #023180;
    margin: auto;
}
body{
    margin: 0px;
}

.contatos{
    width: 100%;
    max-width: 900px;
    height: auto;
    overflow: hidden;
    margin: auto;
}

.cont{
    width: 33.3%;
    height: 40px;
    float: left;
}

.cont p{
    color:#ffffff;
    font-family: 'Muli';
    font-weight: 400;
}

.topo{
    width:80%;
    height:120px;
    float:right;
    

}

.cont2{
    font-family:'Cabin';
    color:#023180;
    width:13.3%;
    height:40px;
    float:left;
    
}

.cont2 p{
    font-size:15px;
    margin-left:100px;
    margin-top:30px;
    
}

.logo{
    margin-left:350px;
    margin-top:10px;
}

.banner{
    width:100%;
    height:500px;
    background:url(Imagens/banner.jpg);
    float:left;
    margin-top:30px;
}

.banner3{
    width:100%;
    height:500px;
    background-color:#083875;
    float:left;
    margin-top:50px;
    vertical-align: middle;
}


.caixamaior{
    width:100%;
    height:auto;
    
}

.caixamaior p{
    color:#FFFFFF;
    font-family:'Scada';
    
}

.caixa1texto h1{
    font-size:12px;
    font-family:'Karla';
    text-align:center;
    color:#FFFFFF;
}

.caixa2texto h1{    
    font-size:12px;
    font-family:'Karla';
    text-align:center;
    color:#FFFFFF;
}

.caixa3texto h1{
    font-size:12px;
    font-family:'Karla';
    text-align:center;
    color:#FFFFFF;
}

.botaosaibamais{
    
    width:150px;
    height:50px;
    background-color:#21588E;
    text-align:center;
    vertical-align: middle;
    line-height: 3;
    margin-left:45px;
    margin-top:20px;
}

.botaosaibamais h1{
    font-family:'Scada';
    font-size:15px;
    color:#ffffff;
    vertical-align: middle;    
}

.caixa1{
    margin-left:15%;
    margin-top:5%;
    float:left;    
}

.caixa2{
    
    margin-left:10%;
    margin-top:5%;
    float:left;    
}

.caixa3{    
    margin-left:10%;
    float:left;
    margin-top:5%;
}

.banneresq{
    float:left;
    margin-left:120px;
    margin-top:65px;
}

.banneresq h1{
    font-family: 'Oxygen';
}

.banneresq p{
    color:#3F3B3B;
    font-family: 'Oxygen';
    font-size:16px;
}

.linhatexto{
    width:75px;
    height:4px;
    background-color:#A11606;
    margin-top:-5px;
}

.botaoentrar{
    width:150px;
    height:50px;
    background-color:#800000;
    text-align:center;
    vertical-align: middle;
    line-height: 3;
}

.botaoentrar h1{
    font-family:'Oxygen';
    font-size:15px;
    color:#ffffff;
    vertical-align: middle;
}

.bannerdir{
    float:left;
    margin-top:60px;
    margin-left:70px;    
}

@media only screen and (max-width: 600px){
    .cont{
        width: 100%;
    }
    .cont p{
        text-align: center;
    }
    
    .banner{
        width:100%;
    
    }
}

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Sua classe .cont2 esta com width: 13.3%, e isso em uma tela acaba resultando em pouco espaço para o texto, e as tags p dentro delas, estao com margin-left: 100px. Voce precisa ajustar os media queries para dar folgar ao textos

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 _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!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"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
    • By tatysouzac
      Minha view:
      <div>                            
                                          <form method="post" action="http://localhost/integradorcode/index.php/welcome/validar">
                                          EMAIL: <input type="text" name="email"  /> <br><br>
                                          SENHA:  <input type="password" name="senha"/> <br><br><br><br>
                                          <input class="myButton" type="submit" value="Entrar"/> <br><br>
                                          </form>
                                          <a href="Cadastro.php" class="myButton">Cadastrar</a><br><br>
                                          <a href="#" class="myButton">Esqueceu sua senha?</a>
               </div>
       
       
       
      Controller:
       
          public function validar(){
              //var_dump($_POST);
              $this->load->model("Cadastro_model");
              $result = $this->Cadastro_model->validar($_POST["email"],md5($_POST["senha"]));
              var_dump($result);
          }
       
       
      Model:
       
          function validar($email, $senha){
              return $this->db->query("SELECT * FROM `cadastro_clientes` WHERE email_cliente = '{$email}'  AND senha_cliente = '{$senha}' AND status = 1 LIMIT 1")->result_array();
          }
       
       
      Não da nenhuma mensagem de erro mas coloco senha e login certos do meu bd e o return não retorna nada array 0 
    • By Dinho Nunes LC
      <div align="center" id="subtitulo"> Canais Abertos </div> <div class="ui cards"> <div class="card"> <div class="content"> <a href="globo.html" style="display: block; color: black"> <div align="center"> <div> <img class="ui tiny image" id="imagem_card_casa" src="assets/images/Rede_Globo_2014.png"> <div align="center" id = "nome_time_fora"> <b>Globo RJ</b> </div> </div> Onde "globo.html" seria substituído pelo link que esta em uma tabela do banco de dados.
       
      Já fiz a conexão. E tenho a base de dados pronta.
       
      Motivo pelo qual estou buscando ajuda:
       
      Faço manualmente a mudança de cada link (são mais de 300) diariamente para evitar copias de terceiros. Sendo assim poderia usar um CRUD para facilitar a troca dos links direto no banco de dados.
    • By ricardonews
      Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos
       

       então eu o css dela é esse aqui
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>  
       
×

Important Information

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