Web Analytics Made Easy -
StatCounter How does this big block between these 2 elements happen? - CodingForum


No announcement yet.

How does this big block between these 2 elements happen?

  • Filter
  • Time
  • Show
Clear All
new posts

  • How does this big block between these 2 elements happen?

    I'm actually building my blog but I've got a problem that there's a big block between these 2 elements that shouldn't be there.

    Click image for larger version

Name:	Screen Shot 2016-09-19 at 19.03.21.jpg
Views:	1
Size:	50.8 KB
ID:	2283613

    the css-code:

    @font-face { /* adding fonts */

    font-family: Megrim;
    src: url(Fonts/Megrim.ttf) format("truetype");


    .headers {

    text-align: center;
    margin-top: 225px;
    color: white;
    font-family: Megrim;
    font-size: 10em;


    .main-links {

    text-align: center;
    font-family: Megrim;
    font-size: 2em;
    color: white;
    text-decoration: none;


    the html-code:

    <div id="main">
    <h1 class="headers"> 15thbruce </h1> <!-- headings -->
    <p class="main-links"> <!-- Categories -->
    <a class="main-links" href="Tech/index.html"> Tech </a><a class="main-links" href="Games/index.html"> Games </a>
    <a class="main-links"href="Enviroment/index.html"> Enviroment </a>

    I would be really thankful if someone helps me so I can continue as fast as possible.


  • #2
    Leave your font as a standard font until you have the layout set, they can create problems of their own which you can deal with once you have the basic layout sorted, if there is a problem with the font on the client side, they will not see what you do - add frills after the basics have been addressed.

    Apply your css to the html elements first, there is no need to use classes in the above script, each element will have its own set of rules, change these first then if there are any changes to a particular element add a class if needed. You have used a class for the opening <div> for no reason, or is there a reason?

    Also you have added a class to your <p> element then added the same class to your <a> element.

    As to the speed you want - throwing together a web page - that's up to you and how long you want to spend working out why it doesn't do what you want or expect.


    • #3
      Your image has a background image of water abd a sunset, your code doesn't.
      When you place a <p> element after a <h> element you have a space between them, but not as large as you show.
      Change the <p> to a <div> and see what happens.

      If you want an answer post the entire code. Please.
      Evolution - The non-random survival of random variants.
      Physics is actually atoms trying to understand themselves.