Sinds vorige week heb ik HTML/CSS weer is opgepakt en vermaak mij er prima mee. Om er weer een beetje in te komen wil ik dit voorbeeld namaken:
Hieronder mijn codering:
HTML:
CSS:
Uitkomst:
Het lijkt erop of de div in de div er iets mee te maken heeft....
Hieronder mijn codering:
HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
<title>Dribbble shot</title>
</head>
<body>
<div class="postwrapper">
<img src="img/knockout.jpg" alt="kockout javascript image" width="200" height="200" />
<div id="contentwrapper">
<ul>
<li><a href="#">Tutorials</a></li>
<li><a href="#">JavaScript & AJAX</a></li>
</ul>
<h1><a href="#">Into the Ring with knockout.js</a></h1>
<p><a href="#">Dan Wellman</a> on Aug 5th 2011 with <a href="#">8 comments</a></p>
<p>
In the red corner, weighing in at just 29Kb (uncompressed), is <a href="#">knockout.js</a>; a pure JavaScript library that simplifies the creation of dynamic user interfaces. Knockout is library agnostic so can easily be used with any of the most popular JavaScript libraries already out there, but it works particularly well with jQuery, and uses jQuery.tmpl as its default templating engine.
</p>
</div>
<p class="moretext">
(<a href="#">continue</a>)
</p>
</div>
</body>
</html>CSS:
Code:
@charset "UTF-8";
/* CSS Document */
body {
font-size: 12px;
font-family:Verdana, Geneva, sans-serif;
color:#666666;
}
body a {
text-decoration:none;
color:#330;
}
.postwrapper {
width: 500px;
margin:auto;
border: solid 1px;
}
.postwrapper img {
float: left;
}
.postwrapper li {
display: inline;
padding-right: 20px;
}
.postwrapper ul {
padding-left: 0px;
}
#contentwrapper {
padding-left: 220px;
padding-right: 20px;
}
.moretext {
float: right;
margin-top: 5px;
}Uitkomst:
Het lijkt erop of de div in de div er iets mee te maken heeft....
