Skip to content
Snippets Groups Projects
Commit 17a2a78e authored by nilstes's avatar nilstes
Browse files

Forelesning 1

parents
No related branches found
No related tags found
No related merge requests found
<!doctype html>
<html>
<head>
<!-- Kanseller initiell skalering p sm enheter -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsiv Design</title>
<style type="text/css">
/* Frst definerer vi standard CSS */
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
header {
height: 180px;
margin-bottom: 5px;
}
article {
width: 600px;
float: left;
background: #f8f8f8;
margin-bottom: 5px;
}
aside {
width: 300px;
float: right;
background: #f0efef;
margin-bottom: 5px;
}
footer {
clear: both;
}
#pagewrap, header, article, aside, footer {
border: solid 1px #ccc;
}
/* Her kommer det responsive: */
/* hvis bredde er 980px eller mindre */
@media (min-width: 701px) and (max-width: 980px) {
#pagewrap {
width: 94%;
}
article {
width: 65%;
}
aside {
width: 30%;
}
}
/* hvis bredde er 700px eller mindre */
@media (min-width: 481px) and (max-width: 700px) {
article {
width: auto;
float: none;
}
aside {
width: auto;
float: none;
}
}
/* hvis bredde er 480px eller mindre */
@media (max-width: 480px) {
header {
height: auto;
}
h1 {
font-size: 24px;
}
aside {
display: none;
}
}
</style>
</head>
<body>
<div id="pagewrap">
<header id="header">
<h1>Responsiv Design</h1>
</header>
<article id="content">
<h2>Innhold</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</article>
<aside id="sidebar">
<h3>Sidebar</h3>
<p>text</p>
<p>text</p>
</aside>
<footer id="footer">
<h4>Footer</h4>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#">Side 1</a></li>
<li><a href="#">Side 2</a></li>
<li><a href="#">Side 3</a></li>
<li><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
</body>
</html>
\ No newline at end of file
ul {
float: left;
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
}
li {
float: left;
border: 1px solid black;
padding: 8px;
background-color: blue;
margin: 2px;
}
li:hover {
background-color: darkblue;
}
a {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksempel1b.css">
</head>
<body>
<ul>
<li><a href="#">Side 1</a></li>
<li><a href="#">Side 2</a></li>
<li><a href="#">Side 3</a></li>
<li><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksempel1b.css">
</head>
<body>
<ul>
<li><a href="#">Side 1</a></li>
<li><a href="#">Side 2</a></li>
<li><a href="#">Side 3</a></li>
<li><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
<p>Under er en vanlig punktliste</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
.meny {
float: left;
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.menyelement {
float: left;
border: 1px solid black;
padding: 8px;
background-color: blue;
margin: 2px;
}
.menyelement:hover {
background-color: darkblue;
}
a {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="eksempel1d.css">
</head>
<body>
<ul class=meny>
<li class=menyelement><a href="#">Side 1</a></li>
<li class=menyelement><a href="#">Side 2</a></li>
<li class=menyelement><a href="#">Side 3</a></li>
<li class=menyelement><a href="#">Side 4</a></li>
</ul>
<p>Dette er et eksempel p en menyside</p>
<p>Under er en vanlig punktliste</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment