Jump to content
Rogério Bonfim

Problema com espaço da div

Recommended Posts

Estou fazendo um blog porém eu preciso colocar uma imagem em uma parte do blog aonde ela fique fixa horizontalmente e que não ocupe espaço caso a tela seja menor que a dimensão do quadro.

tentei fazer usando overflow hidden em uma div positon: absolute;

 

segue abaixo uma imagem do erro.

 

 

erro.png

 

 

 

 

Share this post


Link to post
Share on other sites

amigos não é isto. Voçês perceberam que a div com o background image está passando do conteiner?

eu quero que ela corte de acordo com a resolução da tela. e não saia do lugar. mesmo se não couber na tela ela nao

pode ter mais espaço para a direita

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 alex2santos
      Meu site WordPress não está responsivo no celular, e não consigo resolver esse erro. Alguém pode me ajudar?
      http://moveiscomplemento.com/categoria-produto/beleza-e-saude/

    • By Ewfc2005
      Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda
      pois nao consigo deixa-lo responsivo
       

      Codigo HTML
       
      Codigo CSS

       
       
      Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo
      eu Agradeço.
    • By laedsonfln
      Pessoal, boa noite!
       
       
      Gostaria de mostrar 3 colunas e 6 produtos no celular utilizando o shortcode do woocommerce na página principal. 
      Criei um site de Brechó pra minha namorada usando o Wordpress + woocommerce. Tentei usar os shortcodes do woocommerce para chamar os produtos pra página principal. Até aqui tudo bem, porém quando acesso o site pelo celular a loja mostra duas colunas mesmo eu utilizando [products limit="6" columns="3"]. Procurei bastante nas internet e o que eu consegui foi copiar o HTML usando o inspector do google e inserindo num bloco do Elementor (construtor de página que uso) e mudando algumas coisinhas no código. A primeira vista está funcionando mas quando acrescento um produto ele não atualiza no celular porque não é um shortcode.  Alguém pode me ajudar? Sou iniciante na programação. Segue o site: www.brechodaelyevariedades.com.br 
       
      Obrigado! 
    • By TeixeiraRamos
      Olá tenho uma página em php, usando Bootstrap 4.
      Ocorre que não estou conseguindo fazer com que o parágrafo de um texto fique com aquele espaço normal, ou seja, que estamos acostumado ver nos livros.
      Antes de trabalhar com Bootstrap 4 usava por exemplo:
      .recuo { text-indent:4em }  
      Antes de "Desde..." e "Mas..."  deve existir um <p class="  "> para criar um recuo.
      Existe muita coisa em:
      Obrigado
    • By MayraAmaral
      HTML
       
      <!DOCTYPE hmtl>
      <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>DaHora Software</title>
          <link rel="stylesheet" href="css/styles.css">
          
          <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
          
          
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
          <script type="text/javascript">
          jQuery(document).ready(function(){
          jQuery("#subirTopo").hide();
          jQuery('a#subirTopo').click(function () {
                   jQuery('body,html').animate({
                     scrollTop: 0
                   }, 800);
                  return false;
             });
          jQuery(window).scroll(function () {
                   if (jQuery(this).scrollTop() > 200) {
                      jQuery('#subirTopo').fadeIn();
                   } else {
                      jQuery('#subirTopo').fadeOut();
                   }
               });
          });
          </script>

      </head>
          
      <body>
          <header>
              
              <input type="checkbox" id="btn-menu">
              <label for="btn-menu"><img src="img/menu_icon_verde.png" width="30" height="30"></label>
                  
              <div class="logo">
                  <a href="#"><img src="img/logo.png" width="250" height="150"></a>
              </div>
              
                  <nav class="menu"> 
                      <ul>
                          <li><a href="#empresa">NOSSA EMPRESA</a></li>
                          <li><a href="#cursos">CURSOS</a></li>
                          <li><a href="#sites">SITES</a></li>
                          <li><a href="#sistemas">SISTEMAS</a></li>
                          <li><a href="#contato">FALE CONOSCO</a></li>
                      </ul>
                  </nav>
              
          </header>
          
          <div class="empresa">
              <h1 id="empresa"> NOSSA EMPRESA </h1>
          
          </div>
          
          <div class="cursos">
              <h1 id="cursos"> CURSOS </h1>
          
          </div>
          
          <div class="sites">
              <h1 id="sites"> SITES </h1>
          
          </div>
          
          <div class="sistemas">
              <h1 id="sistemas"> SISTEMAS </h1>
          
          </div>
          
          <div class="contato">
              <h1 id="contato"> FALE CONOSCO </h1>
          
          </div>
          
          <footer>
              <a id="subirTopo"> <img src="img/seta.png"” alt=”some text”  width="100" height="100">
                  </a>
          </footer>
      </body>
      </html>
       
      CSS
       
      *{
          margin: 0;
          padding: 0;
      }
      body{
          font-family: 'Poppins', sans-serif;
      }
      header{
          width: 100%;
          height: 150px;
          background-color: black;
      }
      #btn-menu{
          display: none;
      }
      header label{
          display: none;
          width: 30px;
          height: 30px;
          padding: 10px;
          border-right: 1px solid green;
      }
      header label:hover{
          cursor: pointer;
          background: rgba(0,0,0,0.3);
      }
      .menu ul{
          margin: 0;
          list-style: none;
          padding: 0;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
          
      }
      .titulo li a{
          font-family: 'Alfa Slab One', cursive;
          font-size: 50pt;
          text-decoration: none;
          color: darkgreen;
          padding: 50px 50px;
      }
      .menu li{
          border-right: 1px solid #fff;
      }
      .menu li a{
          display: block;
          padding: 15px 20px;
          color: #fff;
          text-decoration: none;
          font-family: 'Alfa Slab One', cursive;
          font-size: 12pt;
      }
      . menu li:hover{
           background: rgba(0,0,0,0.3);
      }
      a img{
          display: inline-flex;
      }
      @media (max-width:768px){
          header label{
              display: block;
          }
          
          .menu{
              position: absolute;
              background-color: #000;
              width: 70%;
              margin-left: -70%;
              transition: all 0.5s;
          }
          
          .menu ul{
              flex-direction: column;
          }
          
          .menu li{
              border-top: 1px solid #fff;
          }
          .logo a{
              justify-content: center;
              align-items: center;
              display: inline-flex;
          }
          
          header{
          height: 50px;
          background-color: black;
          }
          
          #btn-menu:checked - .menu {
              margin-right: 70px;
          }
      }
      /*
      a{
          margin: 20px;
          color: #fff;
          text-decoration:none; 
          font-family: font-family: 'Staatliches', sans-serif;
          font-size: 18pt;
      }
      */
      .empresa{
          background-color: #fff;
          width: auto;
          height: 500px;
          display: flex;
          padding: 0px 50px;
      }
      .cursos{
          background-color: #8FBC8F;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .sites{
          background-color: #fff;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .sistemas{
          background-color: #8FBC8F;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .contato{
          background-color: #fff;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }

      footer{
          background-color: #000000;
          width: auto;
          height: 200px;
          padding: 0px 50px;
      }
      #subirTopo {
          background-repeat: no-repeat;
          bottom: 20px;
          right: 20px;
          cursor: pointer;
          padding: 0px;
          position: fixed;
      }
×

Important Information

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