Permalink
Browse files

Inn med html5 tagger, og litt tweaking på oppførsel ved endring av st…

…ørrelse
  • Loading branch information...
1 parent 865dae4 commit 7d37943a9420048179ef8a8914a0d7813b9ca772 @blurpy blurpy committed Feb 17, 2012
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>Über Lånekassen</title>
+ <meta charset="utf-8">
<meta name="description" content="" />
<meta name="author" content="Christian, Thomas, Edgeir (team Über)" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/style/bootstrap.css" rel="stylesheet">
<link href="/style/bootstrap.responsive.css" rel="stylesheet">
<link href="/style/site.css" rel="stylesheet">
@@ -17,64 +19,72 @@
<body>
<div class="container-fluid">
- <header class="row-fluid">
- <h1>Lånekassen</h1>
- </header>
-
- <div class="row-fluid">
- <div class="span6">
- <!-- Her er det ikke en knapp -->
- &#160;
+ <header>
+ <!-- Rad 1 -->
+ <div class="row-fluid">
+ <h1>Lånekassen</h1>
</div>
- <!-- Loginlink -->
- <div class="span6" style="text-align: right;">
- <a id="login" href="login.html">Logg inn</a>
- </div>
+ <!-- Rad 2 -->
+ <div class="row-fluid">
+ <!-- Venstre side -->
+ <nav class="span6">
+ <!-- Her er det ikke en knapp -->
+ &#160;
+ </nav>
- <div class="span6" style="text-align: right;">
- <p id="headerNavn">
- <a href="mailto:sarah@mesan.no">-</a>
- </p>
- <p id="headerGjeld">Din totale gjeld: 1 337 133</p>
+ <!-- Loginlink -->
+ <div class="span6" style="text-align: right;">
+ <a id="login" href="login.html">Logg inn</a>
+ </div>
+
+ <!-- Høyre side -->
+ <aside class="span6" style="text-align: right;">
+ <p id="headerNavn">
+ <a href="mailto:sarah@mesan.no">Sara M Hellsten</a>
+ </p>
+ <p id="headerGjeld">Din totale gjeld: 1 337 133</p>
+ </aside>
</div>
- </div>
+ </header>
+ <!-- Rad 3 - meny og innhold -->
<div class="row-fluid">
- <div class="span3">
- <div class="hideOnMobile" id="menu" data-role="mobile-page">
- <nav class="well sidebar-nav">
- <ul class="nav nav-list">
- <li class="active"><a href="#innhold"><i class="icon-home"></i> Hovedsiden</a></li>
- <li><a href="#"><i class="icon-envelope"></i> Postkasse</a></li>
- <li><a href="#"><i class="icon-glass"></i> Støtte</a></li>
- <li><a href="kalkulator.html"><i class="icon-th"></i>
- Nedbetalingskalkulator</a></li>
- <li><a href="#"><i class="icon-random"></i> Rentesatser</a></li>
- <li><a href="#"><i class="icon-info-sign"></i> Info</a></li>
- </ul>
- </nav>
+ <!-- Meny -->
+ <nav class="span3">
+ <div class="hideOnMobile well sidebar-nav" id="menu" data-role="mobile-page">
+ <ul class="nav nav-list">
+ <li class="active"><a href="#innhold"><i class="icon-home"></i> Hovedsiden</a></li>
+ <li><a href="#"><i class="icon-envelope"></i> Postkasse</a></li>
+ <li><a href="#"><i class="icon-glass"></i> Støtte</a></li>
+ <li><a href="kalkulator.html"><i class="icon-th"></i>Nedbetalingskalkulator</a></li>
+ <li><a href="#"><i class="icon-random"></i> Rentesatser</a></li>
+ <li><a href="#"><i class="icon-info-sign"></i> Info</a></li>
+ </ul>
</div>
- </div>
- <div id="innhold" data-role="mobile-page">
- <div class="span9">
+ </nav>
+
+ <!-- Innhold -->
+ <section class="span9">
+ <article id="innhold" data-role="mobile-page">
<a class="mobileLink" href="#menu">Tilbake</a>
<p>
<b>Bli gjeldsslave med oss i Lånekassen!</b>
</p>
<a class="mobileLink" href="#innhold2">Til side 2</a>
- </div>
- </div>
- <div id="innhold2" class="hideOnMobile" data-role="mobile-page">
- <div class="span9">
+ </article>
+
+ <article id="innhold2" class="hideOnMobile" data-role="mobile-page">
<a class="mobileLink" href="#innhold">Tilbake</a>
<p>
<b>Innhold fra Lånekassen som kommer på side 2 på en mobil!</b>
</p>
- </div>
- </div>
+ </article>
+ </section>
</div>
+
+ <!-- Rad 4 -->
<footer class="row-fluid" style="text-align: center;">Copyright 2012 Mesan AS</footer>
</div>
@@ -262,8 +262,8 @@ a:hover {
clear: both;
}
.container-fluid {
- padding-left: 20px;
- padding-right: 20px;
+ padding-left: 2%;
+ padding-right: 2%;
*zoom: 1;
}
.container-fluid:before, .container-fluid:after {
@@ -27,21 +27,21 @@
width: 100%;
height: 28px;
/* Make inputs at least the height of their button counterpart */
-
+
/* Makes inputs behave like true block-level elements */
-
+
-webkit-box-sizing: border-box;
/* Older Webkit */
-
+
-moz-box-sizing: border-box;
/* Older FF */
-
+
-ms-box-sizing: border-box;
/* IE8 */
-
+
box-sizing: border-box;
/* CSS3 spec*/
-
+
}
.input-prepend input[class*="span"], .input-append input[class*="span"] {
width: auto;
@@ -84,24 +84,24 @@
position: static;
}
}
-@media (max-width: 768px) {
- .container {
- width: auto;
- padding: 0 20px;
- }
- .row-fluid {
- width: 100%;
- }
- .row {
- margin-left: 0;
- }
- .row > [class*="span"], .row-fluid > [class*="span"] {
- float: none;
- display: block;
- width: auto;
- margin: 0;
- }
-}
+/*@media (max-width: 768px) {*/
+ /*.container {*/
+ /*width: auto;*/
+ /*padding: 0 20px;*/
+ /*}*/
+ /*.row-fluid {*/
+ /*width: 100%;*/
+ /*}*/
+ /*.row {*/
+ /*margin-left: 0;*/
+ /*}*/
+ /*.row > [class*="span"], .row-fluid > [class*="span"] {*/
+ /*float: none;*/
+ /*display: block;*/
+ /*width: auto;*/
+ /*margin: 0;*/
+ /*}*/
+/*}*/
@media (min-width: 768px) and (max-width: 980px) {
.row {
margin-left: -20px;
@@ -1,12 +1,17 @@
.mobileLink {
display: none;
-}
+}
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 480px) {
.mobileLink {
display: inline;
}
.hideOnMobile {
display: none;
- }
-}
+ }
+}
+
+.nav-list a {
+ white-space: nowrap;
+}
+

0 comments on commit 7d37943

Please sign in to comment.