CODEWITHSUNDEEP
htmlcss
Ewubbs
Ewubbs

Reputation: 21

Navigation won't display inline?

Pretty frustrating when something as simple as this has me stuck! I've tried many different things, but for some reason, it's stuck in the vertical display.

Relevant HTML

    body {
    margin: 0 auto;
    max-width: 90%;
    min-width: 45%;
    background-color: #dadada;
    height: 100%;
    }

    header {
    background-color: black;
    max-width: 90%;
    min-width: 45%;
    margin: 0 auto;
    margin-top: 1%;
    font-family: typographica;
    padding: 45px;
    
    }

    .logo h1 {
    text-align: center;
    
    
    }

    h1 {
    color: white;
    font-size: 300%;
    margin-left: 3%;
    position: absolute;
    top: 2%;
    }


    ul li a {
    color: white !important;
    text-decoration: none;
    width: 50%;
    position: relative;
    
    }

    .nav li {
    float: none;
    display: inline;
    
    }
    <!DOCTYPE html>
    <html lang = "en">
    <head>
    <title>Title</title>

    <link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >

    </head>

    <body>

    <header>
   
    <div type="logo">
       <h1>Name</h1>
    </div>
    
    <div type="head-wrap">
        <ul type="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Discover</a></li>
            <li><a href="#">Upload</a></li>
            <li><a href="#">More</a></li>
        </ul>
    </div>
   

    <div id="decoration-banner">
        &nbsp;
    </div>
    </header>

    </body>
    </html>

Like I said, I've tried a lot of different things, but I must be missing something. I'm not sure if it's because of the way I wrote my html or what, but I haven't had this problem before..

Upvotes: 0

Views: 299

Answers (3)

Omri Attiya
Omri Attiya

Reputation: 4037

I can think of these two possible ways of doing it:

1. change it into a table

<table style="width:50%; margin-left: auto; margin-right: auto;">
    <tr>
    <td>
        <a href="#">Home</a>
    </td>
    <td>
        <a href="#">Discover</a>
    </td>
    <td>
        <a href="#">Upload</a>
    </td>
    <td>
        <a href="#">More</a>
    </td>
    </tr>    
</table>

2. Use flex and flex-direction 

<div type="head-wrap" >
    <ul type="nav" style="display: flex; flex-direction: row">
        <li><a href="#">Home</a></li>
        <li><a href="#">Discover</a></li>
        <li><a href="#">Upload</a></li>
        <li><a href="#">More</a></li>
    </ul>
</div>

Upvotes: 0

Bambou
Bambou

Reputation: 1077

In your CSS you're calling a .nav li. If you call with a dot, you call a class in CSS. Just renamed type by class and it works now.

body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}

header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;

}

.logo h1 {
text-align: center;


}

h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}


ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;

}

.nav li {
float: none;
display: inline;

}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>

<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >

</head>

<body>

<header>

<div type="logo">
   <h1>Name</h1>
</div>

<div type="head-wrap">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Discover</a></li>
        <li><a href="#">Upload</a></li>
        <li><a href="#">More</a></li>
    </ul>
</div>


<div id="decoration-banner">
    &nbsp;
</div>
</header>







</body>
</html>

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19111

Your CSS is looking for a class called .nav. If you look at your <ul>, you meant to use the attribute class but instead used type.

<ul type="nav">

</ul>

Should be

<ul class="nav">

</ul>

Upvotes: 3

Related Questions