Here is the whole HTML:
html { font-family: "Arsenal", "Times New Roman"; } body { background: #364949; margin: 0; } header { display: flex; justify-content: center; align-items: center; background: #999999; height: 50px; padding-right: 100px; } main { display: flex; justify-content: space-around; align-items: center; } .panel { height: 500px; flex: 1; } .main-content { background: #999999; flex-grow: 2; order: 2; color: white; font-family: Arial, Helvetica, sans-serif; } .left { background: #999999; order: 1; margin: 20px; color: white; font-family: Arial, Helvetica, sans-serif; } .right { background: #999999; order: 3; margin: 20px; color: white; font-family: Arial, Helvetica, sans-serif; } footer { background: #999999; display: flex; justify-content: flex-start; align-items: flex-start; height: 155px; margin: 20px; margin-top: 0px; color: white; font-family: Arial, Helvetica, sans-serif; } #nav { background-color: #999999; position: fixed; top: 0px; padding-left: 85px; height: 50px; overflow: hidden; margin-top: -5px; left: -90px; } } #navlist { display: inline-block; background-color: #999999; padding-right: 100px; height: 50px; } ul { list-style-type: none; margin: 0; padding: 5px; overflow: hidden; font-family: Arial, Helvetica, sans-serif; background-color: #999999; } li a { display: block; text-decoration: none; text-align: center; padding: 15px 20px; color: white; cursor: pointer; } li a:hover { background-color: #364949; } .active { background-color: #364949; } form { float: right; font-family: Arial, Helvetica, sans-serif; } .login { position: absolute; top: 10px; right: 25px; font-size: 50%; display: inline-block; } #searchbar { position: absolute; left: 150px; top: 60px; } li { float: none; padding-right: 10px; {
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet"> <link rel="stylesheet" href="layout-style.css" type="text/css"> <title>Filmregister</title> </head> <body> <header> <h2>Filmregister</h2> <div id="nav"> <ul id="navlist"> <li><a class="active" href="Main page.html">Mainpage</a> </li> <li><a href="mymovies.html">My movies</a> </li> <li><a href="mylist.html">My list</a> </li> </ul> </div> </header> <main> <div class="panel main-content"> <h5>Last rented<h5> <ul id="rented"> <li><img src="valkyrie1.jpg" width="100" height="140"></li> <li><img src="MinorityReport3.jpg" width="100" height="140"></li> </ul> </div> <div class="panel left"><h5>LAST MOVIES<h5> <ul id="last"> <li> <img src="TheIntouchables3.jpg" width="100" height="140"> </li> <li> <img src="TheLunchbox1.jpg" width="100" height="140"> </li> </ul> </div> <div class="panel right"> <h5>Recommondations<h5> <ul id="recommondations"> <li><img src="TheIntouchables3.jpg" width="100" height="140""></li> <li> <img src="valkyrie1.jpg" width="100" height="140"></li> </ul> </div> </main> <footer>RULES <ol id="rules"> <li> <small> Følgende kan låne: staben ved Institutt for informasjons- og medievitenskap, studenter ved instituttet, på grunnlag av faglig begrunnelse, andre ved UiB etter særlig avtale for et avgrenset tidsrom eller for et avgrenset prosjekt. <li> Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00. <li> Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes. <li> For alt utlån gjelder en generell regel om lånetid på 1 uke, som kan forlenges med ytterligere en uke. Ønskes en film lånt over en lengre periode må dette begrunnes, og hver enkelt forespørsel vil bli vurdert. <li> Film skal leveres tilbake i posthyllen merket retur av film.</small></li> </ol> </footer> <form> <span class='login'> <label for="E-postadresse">E-postadresse</label> <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" /> <label for="Passord">Passord</label> <input type="password" placeholder="Passord" id="Passord" /> <input type="submit" value="Logg inn" /> </span> </form> <div id="searchbar"> <pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre> <div class="tfclear"></div> </div> </body> </html>
I use list-tag in three different parts of html code, in the menu bar, in the left flexbox and in the rules. The point of using the list in the left flexbox is to have images for movies placed vertically inside it or one above the other. This also applies to the text in the RULES section. But the menu list should be horizontal. At the moment, they all respond to the same css tag, so instead of just moving horizontally, they all go horizontally. There should be something wrong in my code, because I tried to call their individual identifier, but they will not respond to it, they only respond when I use the li {} tag, and then all three of them do it. Can someone help me here?
source share