Added more examples and links

optiguy · Nov 5, 2014 · 065aa61 · 065aa61
1 parent ad840ee
commit 065aa61
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 1 deletion.
diff --git a/css/responsive.css b/css/responsive.css
@@ -0,0 +1,13 @@
+@media screen and (max-width:599px) {
+  nav{
+    position:relative;
+    width: 100%;
+  }
+  section{
+    margin-bottom: 20px;
+    margin-left: 0;
+  }
+  nav li {
+    display: inline;
+  }
+}
diff --git a/css/style.css b/css/style.css
@@ -1 +1,43 @@
-style.css
+.container {
+  position: relative;
+  margin:auto;
+  width:960px;
+}
+nav {
+  position: absolute;
+  left: 0px;
+  width: 200px;
+}
+section {
+  /* position is static by default */
+  margin-bottom: 20px;
+  margin-left: 200px;
+}
+
+img {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 70px;
+  background-color: white;
+  width: 100%;
+}
+body {
+	background: #f1f1f1;
+    margin-bottom: 70px;
+}
+
+.clearfix {
+  overflow: auto;
+  zoom: 1;
+}
+
+.clearfix {
+  overflow: auto;
+  zoom: 1; //IE6 Fix
+}
diff --git a/fixed2-layout.html b/fixed2-layout.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Fixed layouts</title>
+	<style>
+		*{ margin: 0;padding: 0; }
+
+		.wrapper{
+			width: 750px;
+			position: absolute;
+			margin-left: auto;
+			margin-right: auto;
+			padding: 0;
+			border: solid 1px black;
+		}
+
+		#extra{
+			position: absolute;
+			margin-left: 225px;
+			width: 200px;
+			background-color: orange;
+		}
+
+		#extra2{
+			position: absolute;
+			width: 200px;
+			background-color: blue;
+		}
+
+		#content{
+			margin-left: 450px;
+			background-color: yellow;
+		}
+	</style>
+</head>
+<body>
+	<div class="wrapper">
+		<div id="extra">
+			<h2>Extra</h2>
+			<p>Bacon ipsum dolor amet landjaeger commodo tenderloin jowl, culpa anim quis capicola enim corned beef ut sunt. Salami short loin ham hock, kevin fatback tail officia dolor veniam ullamco velit pork loin enim. Fugiat biltong bresaola in voluptate brisket jowl kevin. Minim short ribs irure tenderloin venison quis id fatback sausage tongue nisi beef ribs cupidatat. Tongue adipisicing nostrud voluptate short ribs. Commodo salami t-bone id boudin ground round porchetta landjaeger minim lorem.</p>
+		</div>
+		<div id="extra2">
+			<h2>Extra2</h2>
+			<p>Bacon ipsum dolor amet landjaeger commodo tenderloin jowl, culpa anim quis capicola enim corned beef ut sunt. Salami short loin ham hock, kevin fatback tail officia dolor veniam ullamco velit pork loin enim. Fugiat biltong bresaola in voluptate brisket jowl kevin. Minim short ribs irure tenderloin venison quis id fatback sausage tongue nisi beef ribs cupidatat. Tongue adipisicing nostrud voluptate short ribs. Commodo salami t-bone id boudin ground round porchetta landjaeger minim lorem.</p>
+		</div>
+		<div id="content">
+			<h1>Main content</h1>
+			<p>Enim in spare ribs ullamco sirloin ex. Cow rump veniam short loin id aute. Cillum pariatur sausage dolore, aliquip laborum chuck. Ullamco eiusmod ad spare ribs tempor consequat. Mollit ex bacon magna, meatloaf anim fatback duis ham minim culpa. Pariatur short loin pork chop sint.
+
+			Prosciutto dolore pork chuck, incididunt adipisicing t-bone boudin short loin. Velit anim consectetur shoulder in nulla in minim shankle ham hock jowl jerky pork chop chuck proident. Nisi sausage incididunt deserunt. Hamburger dolor ground round mollit pastrami, non enim capicola biltong eiusmod occaecat bresaola drumstick consectetur tenderloin. Ut ground round in flank jerky. Consectetur porchetta ball tip exercitation labore proident pancetta quis cupidatat sunt nostrud. Tongue exercitation frankfurter enim ut anim id velit laborum.
+
+			Ham deserunt kielbasa, laboris in boudin ribeye mollit short ribs nostrud. Corned beef venison ham aliquip ad, cupidatat spare ribs velit swine flank filet mignon chicken. Consequat pancetta biltong short loin jowl boudin duis voluptate ex turducken pork loin. Flank spare ribs mollit strip steak aliquip shank porchetta sirloin tenderloin chicken. Beef venison in nostrud hamburger tri-tip ribeye filet mignon dolor veniam dolore aute sausage. Elit incididunt brisket jowl qui mollit quis nulla shankle ground round capicola occaecat velit.
+
+			Meatloaf meatball ham hock fugiat velit enim, strip steak quis tenderloin. Excepteur sausage turkey prosciutto. Cillum elit ham reprehenderit dolor. Tail ham esse incididunt occaecat in tempor ullamco commodo tri-tip ut pork chop. Eiusmod incididunt fugiat, fatback bresaola biltong irure ut ribeye chuck ad pork loin in ham. Tempor capicola brisket id filet mignon lorem eu sirloin short loin beef ut ex minim. Officia eu ball tip sunt brisket shankle dolor deserunt veniam laborum quis kielbasa id.</p>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/flexbox-layout.html b/flexbox-layout.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title></title>
+	<style>
+		.container {
+		  display: -webkit-flex;
+		  display: flex;
+		}
+		nav {
+		  width: 200px;
+		}
+		.flex-column {
+		  -webkit-flex: 1;
+		          flex: 1;
+		}
+		img{ float: right; }
+	</style>
+</head>
+<body>
+	<div class="container">
+		<nav>
+			<ul>
+				<li><a href="#">Hjem</a></li>
+		        <li><a href="#">Tilbud</a></li>
+		        <li><a href="#">Produkter</a></li>
+		        <li><a href="#">Restlager</a></li>
+		        <li><a href="#">Services</a></li>
+		        <li><a href="#">Om os</a></li>
+			</ul>
+		</nav>
+		<div class="flex-column">
+			<section>
+		      <img src="http://placehold.it/50x50" alt="Titel">
+		      Bacon ipsum dolor amet tail salami prosciutto strip steak fatback meatloaf. Beef ribs meatloaf drumstick shankle. Meatball kielbasa pork chop, landjaeger kevin pork pork belly bresaola sausage capicola. Turducken fatback salami, filet mignon ball tip kielbasa ham brisket tri-tip boudin pork belly ribeye frankfurter t-bone. Tri-tip pork short ribs jerky short loin ham hock ground round pork chop beef pork belly porchetta.
+		    </section>
+		    <section>
+		      <img src="http://placehold.it/50x50" alt="Titel">
+		      Bacon ipsum dolor amet tail salami prosciutto strip steak fatback meatloaf. Beef ribs meatloaf drumstick shankle. Meatball kielbasa pork chop, landjaeger kevin pork pork belly bresaola sausage capicola. Turducken fatback salami, filet mignon ball tip kielbasa ham brisket tri-tip boudin pork belly ribeye frankfurter t-bone. Tri-tip pork short ribs jerky short loin ham hock ground round pork chop beef pork belly porchetta.
+		    </section>
+		    <section>
+		      <img src="http://placehold.it/50x50" alt="Titel">
+		      Bacon ipsum dolor amet tail salami prosciutto strip steak fatback meatloaf. Beef ribs meatloaf drumstick shankle. Meatball kielbasa pork chop, landjaeger kevin pork pork belly bresaola sausage capicola. Turducken fatback salami, filet mignon ball tip kielbasa ham brisket tri-tip boudin pork belly ribeye frankfurter t-bone. Tri-tip pork short ribs jerky short loin ham hock ground round pork chop beef pork belly porchetta.
+		    </section>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -57,6 +57,9 @@ <h2>Når du er klar til det hele </h2>
 	<div class="box">
 		<h2><a href="http://caniuse.com">Can I Use ????</a></h2>
 		<h2><a href="http://slides.html5rocks.com/#css-selectors">HTML5 & CSS3 slideshow</a></h2>
+
+		<h2><a href="http://learnlayout.com/inline-block.html">CSS Display</a></h2>
+		<h2><a href="http://learnlayout.com/position.html">CSS Positions</a></h2>
 	</div>
 
 </body>

diff --git a/webdesign.html b/webdesign.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/responsive.css">
+</head>
+<body>
+  <div class="container">
+    <nav>
+      <ul>
+        <li><a href="#">Hjem</a></li>
+        <li><a href="#">Tilbud</a></li>
+        <li><a href="#">Produkter</a></li>
+        <li><a href="#">Restlager</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Om os</a></li>
+      </ul>
+    </nav>
+    <section>
+      <img src="http://placehold.it/75x75" alt="Titel">
+      Bacon ipsum dolor amet tail salami prosciutto strip steak fatback meatloaf. Beef ribs meatloaf drumstick shankle. Meatball kielbasa pork chop, landjaeger kevin pork pork belly bresaola sausage capicola. Turducken fatback salami, filet mignon ball tip kielbasa ham brisket tri-tip boudin pork belly ribeye frankfurter t-bone. Tri-tip pork short ribs jerky short loin ham hock ground round pork chop beef pork belly porchetta.
+    </section>
+    <section class="CLEARFIX">
+      <img src="http://placehold.it/200x200" alt="Titel">
+      Bacon ipsum dolor amet tail salami prosciutto strip steak fatback meatloaf. Beef ribs meatloaf drumstick shankle. Meatball kielbasa pork chop, landjaeger kevin pork pork belly bresaola sausage capicola. Turducken fatback salami, filet mignon ball tip kielbasa ham brisket tri-tip boudin pork belly ribeye frankfurter t-bone. Tri-tip pork short ribs jerky short loin ham hock ground round pork chop beef pork belly porchetta.
+    </section>
+    <section>
+      <img src="http://placehold.it/75x75" alt="Titel">
+      Bacon ipsum dolor amet tail salami prosciutto strip steak fatback meatloaf. Beef ribs meatloaf drumstick shankle. Meatball kielbasa pork chop, landjaeger kevin pork pork belly bresaola sausage capicola. Turducken fatback salami, filet mignon ball tip kielbasa ham brisket tri-tip boudin pork belly ribeye frankfurter t-bone. Tri-tip pork short ribs jerky short loin ham hock ground round pork chop beef pork belly porchetta.
+    </section>
+  </div>
+  <footer>Footer der er fixed</footer>
+</body>
+</html>