1

Seccao contactos em cima do texto da seccao about us... Porque? Ja tentei tudo, margins, paddings, nao posso usar o z-index porque as seccoes nao podem ter position relative ou absolute...

HTML:

/* ------------------------------- about us ---------------------- */
    
    .section-about {
        background-color: white;
       position: relative
    }
    
    .image img {
        width: 60%;
        margin: 0 auto;
    }
    
    .long-text p {
        width: 60%;
        line-height: 145%;
        margin: 0 auto;
        text-align: justify;
        
    }
    
    
        /* -------------------------- contacts --------------------------- */
    
    .section-contacts {
        background-color: white;
    }
    
    .contact-form {
        width: 80%;
        margin: 0 auto;
    }
    
    
    .contact-field {
        width: 100%;
        padding: 7px;
        border-radius: 5px;
        border: 2px solid #74C8D2;
        margin-top: 4%;
    }
    
    
    .send-field {
        width: 100%;
        height: 326px;
        padding: 7px;
        border-radius: 5px;
        border: 2px solid #74C8D2;
        margin-top: 4%;
    }
    
    
    #custombtn {
        position: absolute;
        margin: 0 4%;
        width: 30%;
        margin-top: 3.9%;
        color: #fff;
        background-color: #74C8D2;
        padding: 1%;
        border-radius: 5px;
        border: 2px solid transparent;
        cursor: pointer;
    }
    
    #custombtn:hover {
        background-color: #fff;
        color: #74c8d2;
        border: 2px solid #74C8D2;
        transition: all 0.5s ease-in-out;
    }
    
    #customtext {
        text-align: center;
        margin: 0 4%;
        width: 30%;
        position: absolute;
        margin-top: 10%;
    }
    
    
    
    
    *:focus {
        outline: none;
    }
<!--------- SECTION ABOUT ------------>

      <section class="section-about" id="about">
        <div class="row">  
        <h1>ABOUT US</h1>
        </div>
          
        <div class="image">
            <div class="row">
            <img src="img/dummy-640x310-1.jpg" alt="">
            </div>
        </div> 
          
            
        <div class="row">
            <div class="col span-1-of-1">
                <div class="long-text">
            <p>Aenean at lorem non nisi blandit consequat vel sit amet arcu. Proin nec urna commodo, tincidunt metus non, dictum dui. Donec ut dolor ut eros venenatis pellentesque sit amet a elit. Suspendisse congue arcu sed risus tincidunt ullamcorper. In sodales, orci sit amet aliquam ultrices, odio magna commodo risus, non pellentesque ipsum turpis id felis. Sed aliquam quam eu ex aliquam, sed mattis mauris vulputate. Aliquam interdum lorem vitae est volutpat ultrices. Nam mattis dolor id dolor tincidunt, vitae eleifend lorem mollis. Duis aliquet leo diam, ac mollis erat facilisis id. Vestibulum laoreet nisl vel diam laoreet fringilla. </p>
                    </div>
                </div>
        </div>
      </section>

      <!--------- SECTION ABOUT ------------>

      <section class="section-contacts">
        <div class="row">  
        <h1>CONTACT US</h1>
        </div>
          
        
          
          <div class="row">
              <div class="contact-form">
                <!---Primeira Caixa--->
                <div class="col span-1-of-2">
                <form class="" action="" method="post">
                
              <input class="contact-field" type="text" name="" value="" placeholder="NAME">

                
              <input class="contact-field" type="email" name="" value="" placeholder="EMAIL">
                
              <textarea class="contact-field" name="message" rows="8" cols="80" placeholder="YOUR MESSAGE HERE..."></textarea>  
                    
              <button class="btn" type="button" name="button">SEND</button>
                
            </form>
                </div>
                
                <!---Segunda Segunda caixa--->
                <div class="col span-1-of-2">

                    <div class="send-field">
                    <input type="file" id="realfile" hidden="hidden">
                    <button type="button" id="custombtn">Choose a file...</button>
                    <span id="customtext">No files chosen yet.</span>
                    </div>    
                    
                
                <button class="btn" type="button" name="button">SEND</button>
                    
                </div>
                  </div>
            </div>
          
      </section>

7
  • como assim? Explica melhor
    – Wees Smith
    7/05/2018 às 14:20
  • Testei e não ficou por cima com este css. 7/05/2018 às 14:21
  • Parte da seccção contactos está em cima do texto da secção about us... 7/05/2018 às 14:23
  • Mas no meu documento acontece esse erro e eu não percebo porquê, ja inspecionei no chrome, mas continuo não entendo como esse erro é causado.. 7/05/2018 às 14:28
  • aqui no meu, sem css ta normal, então o erro ta no css
    – Wees Smith
    7/05/2018 às 14:31

1 Resposta 1

0

Ok, descobri o erro, o erro estava no tamanho da imagem que estava a fazer com que o texto fosse para fora da secção e na falta de margin-bottom e margin-top na propriedade das secções em geral.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .