Menu
Here is the entire html code:
html
/*FLEXBOX*/
{
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;
}
/*LAST RENTED*/
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;
}
/*LAST MOVIES*/
.left {
background: #999999;
order: 1;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
/*RECOMMONDATIONS*/
.right {
background: #999999;
order: 3;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
/*RULES*/
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;
}
/*MENUBAR*/
#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;
}
/* LOG IN*/
form {
float: right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
/*SØKEBAR*/
#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>
<!--MENUBAR-->
<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>
<!--FLEXBOX-->
<!--LAST RENTED-->
<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>
<!--LAST MOVIES-->
<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>
<!--RECOMMONDATIONS-->
<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>
<!--RULES-->
<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>
<!-- LOGIN -->
<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>
<!-- SEARCHBAR -->
<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 am using the list-tag in three different parts of the html code, in the menubar, in the left flexbox and in the rules. The point of using list in the left flexbox is so that the pictures for the movies will be placed vertical inside it, or on top of each other. That also goes for the text in the "RULES" section. But the menubar list is supposed to be horizontal. As of now they all respond to the same css tag, so instead of just menubar going horizantal they all go horizontal. There must be something wrong in my code, because I have tried calling their individual id's but they won't respond to it, they only respond when I use the li{} tag on its own, and then all three of them does so. Could anyone help me out here?
673
You can specify their flow by using flex-direction
flex-direction: row /*- horizontal layout*/
flex-direction: column /* - vertical layout */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
