<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="assets/css/screen.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="assets/js/bestandsnaam.js"></script>
<script type="text/javascript">
// stukje javascript op alle oneven elementen een achtergrond te geven. tellen in jquery start bij 0
// kan ook wel met css gedaan worden maar word nog niet overal ondersteund
$(function(){
$('#twitter_update_list li:odd').css({ 'background-color' : '#70c5f5', 'padding-bottom' : '10px' });
})
</script>
<style type="text/css">
/* algemene opmaak body */
body {
margin: 0;
padding: 0;
font: normal 13px 'Arial';
}
/* zelf toegevoegd kan weg is om te centreren */
#page {
padding-top: 50px;
position: relative;
width: 400px;
margin: 0 auto;
}
/* de ul waar alles word ingeladen ik heb <div id="twitter_update_list"></div> veranderd in een ul dus <ul id="twitter_update_list"></ul> */
#twitter_update_list {
margin: 0;
padding: 0;
width: 400px;
padding:20px;
list-style: none;
background-color: #52b8f2;
border-radius: 10px;
color: #fff;
}
/* de list item waar het bericht instaat */
#twitter_update_list li {
padding: 10px;
line-height: 16px;
border-bottom: 1px solid #48a8df;
}
/* het eerste bericht */
#twitter_update_list li:first-child {
padding-top: 0;
}
/* alle anchors binnen twitter update */
#twitter_update_list li a {
color: #255a79;
}
/* link onder het bericht zodra je er over gaat*/
#twitter_update_list li a:hover {
text-decoration: none;
}
/* het bericht */
#twitter_update_list li span {
padding: 0;
display: block;
overflow: hidden;
}
/* het laatste bericht */
#twitter_update_list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
</style>
</head>
<body>
<div id="page">
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/miniauke.json?callback=twitterCallback2&count=5"></script>
</div>
</body>
</html>
