Reputation: 11

i dont understand what is happening here in this css file

I just created a nav-bar and a little main section in the page but the issue here is that there is a space between the nav-bar and the main section without any margins or padding existing between them.

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*[starting the style of the nav bar]*/

/*this is the style fot the whole nav bar*/
nav{
    background-color: black;
    box-shadow: 5px 5px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 8%;
    outline: auto;
}

/*this is the containing block for all the list items in the nav*/
nav ul{
    margin: auto;
    text-align: center;
    outline: solid rgb(247, 5, 5) 4px;
}

/*this is the style for the each one of the list items*/
nav li{
    display: inline;
    padding: 20px;
    margin: 30px;
    outline: solid green 4px;
}

/*the style for the text in the list items of the nav*/
nav a{
    display: inline-block;
    padding: 20px;
    font-weight: 900;
    color: white;
    text-decoration: none;
    outline: solid yellow 7px;
}

/*[starting the style of the main section]*/
main{
    text-align: center;
    background-image: url(code1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    outline: solid black 7px;
    width: 100%;
    /*height: 600px;*/
    color: white;
    /*border: solid blue 1px;*/
}

main > h1 {
    font-size: 60px;
    margin: 160px;
}

main > h2{
    font-size: 50px;
}

<!DOCTYPE html>
<html>
<head>
    <title>
        ammar eneen
    </title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">HOW IT WORKS</a></li>
        <li><a href="">ORDER</a></li>
        <li><a href="#" target="_blank">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<!--this is the main section at the home page right under the nav bar-->
<main>
    <h1>
        welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
    </h1>
    <h2>best web-developing service</h2>
    <p>order your own service now <span>ORDER</span></p>  
    <p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>


<section>
    
</section>


</body>

</html>

Upvotes: 0

Answers (2)

Mihai T

Reputation: 17687

You said you don't have any margin. But you have

main > h1 {
    font-size: 60px;
    margin: 160px;
}

That 160px margin is the one you see as a 'space' between nav and main. Change it to margin: 0 160px 160px 160px to remove it from 'top'.

If you want to add a 'space' to the top of your main , use padding-top:160px on main

Added a red bck color to main for example purposes.

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*[starting the style of the nav bar]*/

/*this is the style fot the whole nav bar*/
nav{
    background-color: black;
    box-shadow: 5px 5px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 8%;
    outline: auto;
}

/*this is the containing block for all the list items in the nav*/
nav ul{
    margin: auto;
    text-align: center;
    outline: solid rgb(247, 5, 5) 4px;
}

/*this is the style for the each one of the list items*/
nav li{
    display: inline;
    padding: 20px;
    margin: 30px;
    outline: solid green 4px;
}

/*the style for the text in the list items of the nav*/
nav a{
    display: inline-block;
    padding: 20px;
    font-weight: 900;
    color: white;
    text-decoration: none;
    outline: solid yellow 7px;
}

/*[starting the style of the main section]*/
main{
    text-align: center;
    background-color:red; /* added for example purposes */
    background-image: url(code1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    outline: solid black 7px;
    
    width: 100%;
    /*height: 600px;*/
    color: white;
    /*border: solid blue 1px;*/
}

main {
  padding-top:160px; /* add this*/
}
main > h1 {
    font-size: 60px;
    margin: 0 160px 160px 160px; /* change this*/
}
main > h2{
    font-size: 50px;
}

<html>
<head>
    <title>
        ammar eneen
    </title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">HOW IT WORKS</a></li>
        <li><a href="">ORDER</a></li>
        <li><a href="#" target="_blank">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<!--this is the main section at the home page right under the nav bar-->
<main>
    <h1>
        welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
    </h1>
    <h2>best web-developing service</h2>
    <p>order your own service now <span>ORDER</span></p>  
    <p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>


<section>
    
</section>


</body>

</html>

Upvotes: 1

user13457138

Reputation:

Set the nav height to auto, and you can play with the padding to add spacing....

nav{
    background-color: black;
    box-shadow: 5px 5px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px;
    height: auto;
    outline: auto;
}

https://jsfiddle.net/c8woj40v/

Upvotes: 0

i dont understand what is happening here in this css file

Answers (2)

Related Questions