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 tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By GabrieldaBahia
      Tenho duas paginas HTMl e o PHP onde estou tratando uns dados XML retornado após a leitura de um arquivo, porém estou com uma duvida besta, preciso pegarum valor que pego do XML e colocar dentro de uma tag html,  já fiz assim e nada </caption> <?php  echo $cnpj ?><caption>
      a pagina PHP está sendo chamada no HMTL pelo require_once.
       
       
      trecho do HTML
       
      <head>     <title>Testes</title> </head> <?php include_once 'load.php'; ?>   <body>   <table> <caption >Ti<?php echo $cnpj ?></caption> <tr> Trecho do PHP   $arq = simplexml_load_file('29190411412201000112650010000000181000000180-nfe.xml') or die("Erro ao carregar arquivo XML");   foreach($arq->NFe->infNFe->children() as $infNFe){ $cnpj = $infNFe->CNPJ;   }
    • By makinh0
      <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px;">
      <tr>
        <td align="center" bgcolor="<?php echo $background ?>"><table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px;">
          <tr>
            <td width="48%" align="left" bgcolor="#3399FF"><strong>Produto</strong></td>
            <td width="16%" align="center" bgcolor="#3399FF"><strong>Hora</strong></td>
            <td width="19%" align="center" bgcolor="#3399FF"><strong>Mesa</strong></td>
            <td width="9%" align="left" bgcolor="#3399FF"><strong>Garçom</strong></td>
            <td width="8%" align="center" bgcolor="#3399FF"><strong>Ação</strong></td>
             <td width="8%" align="center" bgcolor="#3399FF"><strong>Observações</strong></td>
          </tr>
          <?php 
        $sql = mysql_query("SELECT * FROM tbl_carrinho INNER JOIN garcon ON tbl_carrinho.idGarcon = garcon.idGarcon WHERE destino='1' AND status = '0' ORDER BY id DESC") or die(mysql_error());
        while($ver = mysql_fetch_array($sql)){
          $background = (++$i%2) ? '#FFFFF' : '#F2F2F2';
          $feito = $ver['feito'];
        ?>
          <tr>
            <td bgcolor="<?php echo $background ?>"><?php echo $ver['nome']; ?></td>
            <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['time']; ?></td>
            <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['id_mesa'] ?></td>
            <td bgcolor="<?php echo $background ?>"><?php echo $ver['nomeGarcon'] ?></td>
              <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['id_mesa'] ?></td>
            <td bgcolor="<?php echo $background ?>">
       
       
      Sistema restaurante; gente precisava fazer a tela de observacoes , tipo na tela cozinha aparece produto,hora,mesa,garcom e acao, queria por observacao para a cozinha receber como o cliente quer? alguem tem ideia?obg
    • By reytlersouza
      Não consigo passar variável obtida por consulta no banco no value de uma TAG <option> "<option value="<?php $item['id_eq']?>">"
       
      O que está errado no meu código que ele não passa o valor de value no $_GET nem no $_POST?

       
      <?php
          echo $_GET['equi1'];
      ?>
      <form method="GET">   
          <select name="equi1" class="form-control">
              <?php
              require 'conn.php';
              $sql = $pdo->prepare("SELECT * FROM equipamento WHERE 1");
              $sql->execute();
              if($sql->rowCount() > 0) {
              foreach($sql->fetchAll() as $item) {
                                                                      
              ?>
              <option value="<?php $item['id_eq'];?>"><?php echo $item['nome'];?></option>
              <?php
                  }
                  }
                  ?>
          </select>
          <input type="submit" value="Salvar"/>
      </form>
×

Important Information

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