Section overwrite my header

Asked

Viewed 755 times

2

I want to put my content just below the tag header but when I create my Action the content overlaps my header and I don’t know if it’s a good practice to take my Ction and apply a margin top follows the code:

html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
header {
  background-attachment: fixed;
  background-image: url(http://ten2.tw/assets/templates/ten2/images/about-kv.jpg);
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -2;
}
header #bg-header {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.menu li {
  display: inline;
  font-family: Lucida Sans Unicode;
}
.menu {
  text-align: center;
}
.menu li a {
  margin: 10px;
  color: #fff;
}
.menu li a:hover {
  color: #1C8AE7;
}
#logo-header {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  margin-top: 10%;
}
.text-center {
  text-align: center;
}
#texto-header {
  color: #fff;
  font-family: Lucida Sans Unicode;
  text-align: center;
  line-height: 10px;
  font-size: 1.1em;
  margin-top: -5%;
}
#btn-header {
  border: 2px solid #fff;
  border-radius: 5px;
  text-align: center;
  width: 220px;
  height: 50px;
  color: #fff;
  font-family: Lucida Sans Unicode;
  font-size: 1em;
  background: transparent;
  margin-top: 2%;
  cursor: pointer;
}
#btn-header:hover {
  background: #fff;
  color: #222;
}
#posicao-header {
  margin-top: -10%;
}
/*********************************************************************
				
							Corpo-1

**********************************************************************/

.corpo-1 {
  position: relative;
}
<!DOCTYPE html>
<html>

<head>
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="" charset="UTF-8">
</head>

<body>
  <header>
    <ul class="menu">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Sobre</a>
      </li>
      <li><a href="#">Cases</a>
      </li>
      <li><a href="#">Serviços</a>
      </li>
      <li><a href="#">Orçamento</a>
      </li>
      <li><a href="#">Contato</a>
      </li>
    </ul>
    <div id="posicao-header">
      <img src="images/bg-header.png" id="bg-header">

      <p class="text-center">
        <img src="http://www.impulsegamer.com/articles/wp-content/uploads/2014/08/IMG_3194.png" id="logo-header">
      </p>

      <div id="texto-header">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <p class="text-center">
        <a href="#">
          <input type="button" value="Como podemos ajudar?" id="btn-header">
        </a>
      </p>
    </div>
  </header>

  <section class="corpo-1">
    <h1>Lorem Ipsum <strong>Dolor</strong></h1>
    <h2>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
  </section>

</body>

</html>

Note: the code will have to work semantically and in the browsers Google Chrome, Safari and Mozila.

html5 css3

  • Don’t get caught up in this business they call "good practice". If you have knowledge of CSS rules and know what you are doing, it has hardly apply a margin-top? I think in this case, you yourself have answered what to do. :D I’d only really look at those input type="button" in the middle of HTML code, you can simply use a <button>.

  • Is because of the position:absolute;. Tries to add a <br style="clear:both;"> between the 2 tags.

1 answer

1

Once your <header> is the first element in the body of the page, are not required (acceptable) the following style lines:

position: absolute;
top: 0;
left: 0;

Remove these lines so that the <header> put yourself back in the "flow" page and push the next elements down yourself.

Some additional tips:

  • Study better what each CSS property actually does.

  • Set a pattern for your styles.

  • A header can be divided into sections as well. Prefer to use a <section> to divide the <header>. But since there are no more divisions, I suggest you just remove that <div>and leave your content loose in the header.

  • Prefer to reduce the header image manually than to do "hacks" with position: relative.

  • Do not use id and class where it is not really necessary.

  • Do not use <p> just to group or style content. Save it for real paragraphs (preferably with text).

A slightly more semantic version with perhaps fewer bytes of your code:

html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
header {
  background-attachment: fixed;
  background-image: url(http://ten2.tw/assets/templates/ten2/images/about-kv.jpg);
  background-repeat: no-repeat;
  z-index: -2;
  text-align: center;
}
header #bg-header {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
header ul li {
  display: inline;
  font-family: Lucida Sans Unicode;
}
header ul {
  text-align: center;
}
header ul li a {
  margin: 10px;
  color: #fff;
}
header ul li a:hover {
  color: #1C8AE7;
}
#logo-header {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  margin-top: 10%;
}
header p {
  text-align: center;
    color: #fff;
      font-family: Lucida Sans Unicode;

}

header input[type=button] {
  border: 2px solid #fff;
  border-radius: 5px;
  text-align: center;
  width: 220px;
  height: 50px;
  color: #fff;
  font-family: Lucida Sans Unicode;
  font-size: 1em;
  background: transparent;
  margin-top: 2%;
  cursor: pointer;
}
header input[type=button]:hover {
  background: #fff;
  color: #222;
}

/*********************************************************************
				
							Corpo-1

**********************************************************************/

.corpo-1 {
  position: relative;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <meta name="" charset="UTF-8">
    </head>
    <body>
        <header>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Cases</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Orçamento</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
            <img src="images/bg-header.png" id="bg-header">          
            <img src="http://www.impulsegamer.com/articles/wp-content/uploads/2014/08/IMG_3194.png" id="logo-header">
            <br />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="#"><input type="button" value="Como podemos ajudar?"></a>
            <br />
            <br />
        </header>
        <section class="corpo-1">
            <h1>Lorem Ipsum <strong>Dolor</strong></h1>
            <h2>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
        </section>
    </body>
</html>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.