section overlap my header

Question

section overlap my header

Navigation

#1 by (1 votes)

2

I want to put my content right below the header tag but when I create my section the content overlaps my header and I do not know if it's a good practice to get my section and applying 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 Google Chrome, Safari and Mozilla browsers.

html5 css3

asked by anonymous 19.05.2015 / 20:17

1 answer

List json object returned by php Dynamic Menu in Bootstrap with PHP and Mysql

score 1 · Answer 1

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

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

Remove these lines so that <header> gets back into the "flow" page and pushes the next elements down.

Some additional tips:

Study better what each CSS property actually does.
Set a default for your styles.
A header can be divided into sections as well. Prefer to use <section> to split <header> . But since there are no more divisions, I suggest you just remove that <div> and leave your content loose in the header.
Do not use position: relative and id where it's not really needed.
Do not use class just to group or style content. Save it for real paragraphs (preferably with text).

A slightly more semantic version with maybe 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>