user6547375 user6547375 - 4 months ago 12
HTML Question

How to add space between two tags vertically(P.S My margin -top is not working)

I was Building a website where I encountered a problem that my h1 content is overlapping with my navigation bar. I have used margin-top tag in css and its not working.

<div class="main">

<div class="header">
<div class="header_resize">
<div class="menu_nav">

<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About Voicecom</a></li>
<li><a href="#">Marketing Sevices</a></li>
<li><a href="#">IT Management Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#"> Employement Opportunities </a> </li>
</ul>

</div>
<div class="clr"></div>

<div class="logo"><h1><a href="index.html"><span>Voicecom </span> Technologies<br /><small>Communications Any Time Any Where</small></a></h1></div>
<div class="clr"></div>
</div>
</div>

<div class="hbg">
<div class="hbg_resize">
<img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" />
<h2>Read me first...</h2>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.</p>
<a href="#"><img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /></a>
</div>
</div>
</div>


My CSS File

body {
margin: 0;
padding: 0;
width: 100%;
color: #5f5f5f;
font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

html,
.main {
padding: 0;
margin: 0;
background-color: #fff;
}

.clr {
clear: both;
padding: 0;
margin: 0;
width: 100%;
font-size: 0px;
line-height: 0px;
}

h1 {
margin: -32px 0 0 0;
padding: 24px 0;
color: #c1c1c1;
font: bold 22px/1.2em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}

h1 a,
h1 a:hover {
color: #D88100;
text-decoration: none;
}

h1 span {
color: #ffa800;
font-size: 40px;
margin-top: 2000px;
}

h1 small {
font: normal 13px/1.2em Arial, Helvetica, sans-serif;
}

h2 {
font: bold 24px Arial, Helvetica, sans-serif;
color: #a3ce67;
padding: 8px 0;
margin: 8px 0;
}

p {
margin: 8px 0;
padding: 0 0 8px 0;
font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

a {
color: #5e8525;
text-decoration: underline;
}


Please Do let me know if someone want more of the code, I have hereby attached only part of it.
Please Help!!!!

Answer

If you just wants the h1 to go lower on the page, then you would have to remove the span in the css. So it's going to be something like this:

body {
   margin: 0;
   padding: 0;
   width: 100%;
   color: #5f5f5f;
   font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

html,
.main {
    padding: 0;
    margin: 0;
    background-color: #fff;
}

.clr {
    clear: both;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 0px;
    line-height: 0px;
}

h1 {
    padding: 24px 0;
    color: #c1c1c1;
    font: bold 22px/1.2em Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

h1 a,
h1 a:hover {
    color: #D88100;
    text-decoration: none;
}


h1 small {
    font: normal 13px/1.2em Arial, Helvetica, sans-serif;
}

h2 {
    font: bold 24px Arial, Helvetica, sans-serif;
    color: #a3ce67;
    padding: 8px 0;
    margin: 8px 0;
}

p {
    margin: 8px 0;
    padding: 0 0 8px 0;
    font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

a {
    color: #5e8525;
    text-decoration: underline;
}
<div class="main">

  <div class="header">
    <div class="header_resize">
      <div class="menu_nav">

        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">About Voicecom</a></li>
          <li><a href="#">Marketing Sevices</a></li>
          <li><a href="#">IT Management Services</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#"> Employement Opportunities </a> </li>
        </ul>

      </div>
      <div class="clr"></div>

      <div class="logo"><h1><a href="index.html"><span>Voicecom </span> Technologies<br /><small>Communications Any Time Any Where</small></a></h1></div>
      <div class="clr"></div>
    </div>
  </div>

  <div class="hbg">
    <div class="hbg_resize">
      <img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" />
      <h2>Read me first...</h2>
      <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.</strong></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.</p>
      <a href="#"><img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /></a>
    </div>
  </div>
  </div>

Comments