CODEWITHSUNDEEP
htmlcss
Nelson Zara
Nelson Zara

Reputation: 3

White space at the end of my HTML / CSS site

So I just started making the site and there is a lot of white space at the bottom of my site...

I've been removing div but than on Inspect Element shows that the white space is because of <ul></ul> when I removed that tag it showed it is because of <body>

They say add margin: 0; padding:0 html,body { height:100%;} but nothing worked. 

@font-face {
    font-family: 'RobotoR';
    src: url("/Roboto-Regular.ttf");
  }
  @font-face {
    font-family: 'RobotoM';
    src: url("/Roboto-Medium.ttf");
  }
  @font-face {
    font-family: 'RobotoB';
    src: url("/Roboto-Bold.ttf");
  }
  @font-face {
    font-family: 'RobotoLi';
    src: url("/Roboto-LightItalic.ttf");
  }

  html,body {height:100%;}

body{
    overflow-x: hidden;
    min-height: 100vh;
    margin:0;
}


.navigacija a{
    font-size: 21px;
    font-family: 'RobotoR', sans-serif;
    text-decoration: none;
    z-index: 1;
}
nav ul li a {
    color: black;
    background-color: inherit;
    padding: 0.5em 0.5em;
}
.navigacija a:hover {
    color:#202020;
    font-weight: bold;
}
 .navigacija a:visited{
    color: #202020;
    font-weight: bold;
}
nav ul {
    position: relative;
    width: auto;
    background: none;
    height: auto;
    bottom: 10em;
    right: 5em;
    display: flex;
    float: right;
    list-style-type: none;
    z-index: 1;
}
.logo{
    position: relative;
    width: 20%;
    left: 5.1em;
    top: -2.5em;
}
.kontakttelmail {
    position: relative;
    top: -11.5em;
    left: 83.9em;
    font-family: 'RobotoLi', sans-serif;
    word-spacing: 1em;
    font-size: 15px;
    opacity: 0.5;
}
.button {
    background-color: white; 
    border: none;
    color: #00A651;  
    padding: 20px 30px;
    position: relative;
    bottom: 85em;
    left: 57.5em;
    text-align: center;
    border-radius: 35px;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    font-family: 'RobotoB', sans-serif;
  }
  .zelenakrivina{
      position: relative;
      width: 90%;
      right: -15em;
      bottom: 8em;
      padding: 0%;
      margin: 0%;
  }
  .auto{
    position: relative;
    width: 49%;
    right: -24.5em;
    bottom: 44em;
    padding: 0%;
      margin: 0%;
  }
  .zelenisvg ul li{
      position: relative;
      bottom: 95em;
      left: 80em;
      text-decoration: none;
      list-style-type: none;
}
.zelenisvg {
    
}
  .Renault{
      position: relative;
      top: -0em;
      right: 0.1em;
      color: white;
      font-size: 30px;
      font-family: 'RobotoM', sans-serif;
      padding: 0%;
      margin: 0%;
  }
  .Megane{
    position: relative;
    top: -1.3em;
    right: 1.1em;
    color: white;
    font-size: 40px;
    font-family: 'RobotoB', sans-serif;
}
.lajna{
        position: relative;
        bottom: 124em;
        left: 63.7em;
        width: 11%; 
}
.a30e{
    position: relative;
    top: -1.58em;
    right: 0.7em;
    color: white;
    font-size: 100px;
    font-family: 'RobotoB', sans-serif;
}
.nadan{
    position: relative;
    top: -11em;
    right: -0.6em;
    color: white;
    font-size: 25px;
    font-family: 'RobotoR', sans-serif;
}
.sivitext{
    position: relative;
    bottom: 22em;
    font-family: 'RobotoB', sans-serif;
    font-size: 60px;
    left: 2.5em;
    color: #212121;
}
.zelenitext{
    position: relative;
    bottom: 23.2em;
    font-family: 'RobotoB', sans-serif;
    font-size: 60px;
    left: 2.5em;
    color: #00A651;
}
.ispodnaslova{
    position: relative;
    bottom: 61.2em;
    font-family: 'RobotoR', sans-serif;
    font-size: 23.8px;
    left: 6.3em;
    color: #585858;
}
.scroll{
    position: relative;
    bottom: 110.9em;
    /* left: 15em; */
    width: 8%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.strelica{
    position: relative;
    bottom: 115.9em;
    /* left: 15em; */
    width: 4.2%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S T A R T - Rent-a-Car</title>
<link rel = "stylesheet"
    type = "text/css"
    href = "style.css" />
</head>
<header>
    <img src="images/logo.png" alt="logo" class="logo">
        <nav>
                <ul class="navigacija" id="nav">
                    <li><a href="index.html">Početna</a></li>
                    <li><a href="#">Sva vozila</a></li>
                    <li><a href="#">O nama</a></li>
                    <li><a href="#">Kontkat</a></li>
                </ul>
            </nav>
            <p class="kontakttelmail">[email protected]  +382-68-222-333</p>
</header>
<body>
    <div class="zelenisvg">
      <img src="images/Path 1.svg" alt="zelenakrivina" class="zelenakrivina">
      <img src="images/renault-migan-e1541771231987.svg" alt="renault" class="auto">
      <p class="sivitext">Uz naša vozila ste</p>
      <p class="zelenitext"> korak bliže cilju!</p>
      <p class="ispodnaslova">Na vaš poziv dovodimo željeno<br>
        vozilo na vašu adresu!</p>
        <ul>
         <li><p class="Renault">Renault</p></li>   
        <li><p class="Megane">Megane</p></li>
        <li><p class="a30e">30€</p></li>
        <li><p class="nadan">/na dan</p></li>
    </ul>
    <button onclick="location.href= 'Svavozila.html'" class="button">Rezervisi odmah!</button>
    <img src="/images/Line 1.png" alt="linija" class="lajna">
<img src="images/Path 9.svg" alt="scroll" class="scroll">
<img src="/images/Path 2.png" alt="strelica" class="strelica">
    
</div>

</body>
<footer>

</footer>

Upvotes: 0

Views: 102

Answers (1)

AdamKniec
AdamKniec

Reputation: 1717

Just like someone said in the comments section:

</body>
<footer>

</footer>

You can't have the footer outside the body element.

Take a look at this link: https://css-tricks.com/snippets/html/html5-page-structure/

You'll understand how the HTML markup should look like :)

EDIT: Your HTML seems to look better now but your CSS is breaking everything up. Why do you apply the position: relative to every single CSS rule you create ? Look https://jsfiddle.net/t23mkxz4/ I've removed position: relative and everything looks much better. Please - do some research on how to use the position: relative property :) take a look at this link -> https://developer.mozilla.org/en-US/docs/Web/CSS/position it's a great source of knowledge and examples. Good luch mate !

Upvotes: 1

Related Questions