mein “h” in ul li ul li
Kurzeitige Langeweile heute Mittag führten zur 2. Version “meines” (hokamp) H’s. Vor einiger Zeit hatte ich schon einmal mein graphisches “gepixeltes H” vorgestellt.
Diesmal nun alles ohne Graphik in xHTML mit einfachen ul- und li-tags. 
9*9, neun Reihen mit jeweils neun (angedeuteten) pixel. Ein bisschen CSS und fertig ist das Hokamp H. Den Quelltext könnt ihr Euch direkt hier anschauen, falls Euch das interessiert!
Klick auf das Bild für zur xHTML Version
Hier der entsprechende Quelltext:
<!DOCTYPE HTM L PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>h wie hokamp </title>
<style type="text/css">
body {
text-align: center;
}
* {
padding: 0; margin:0;
}
ul {
list-style-type:none;
}
ul#hpix {
text-align:left;
width:360px;
margin: 10px auto;
}
li{
width: 360px;
height: 40px;
float: left;
}
li li{
width: 40px;
height: 40px;
float: left;
}
li ul {
margin:0; padding:0;
}
li.outer {
background: #09f;
}
li.black {
background: black;
}
li.inner {
background: #00f;
}
li li a {
display: block;
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<ul id="hpix">
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li class="outer"></li>
<li class="outer"></li>
<li class="outer"></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li class="black"></li>
<li></li>
<li></li>
<li></li>
<li class="black"></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li class="black"></li>
<li></li>
<li class="inner"></li>
<li></li>
<li class="inner"></li>
<li></li>
<li class="black"></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li class="outer"></li>
<li></li>
<li></li>
<li class="inner"></li>
<li></li>
<li class="inner"></li>
<li></li>
<li></li>
<li class="outer"></li>
</ul>
</li>
<li>
<ul>
<li class="outer"></li>
<li></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"><a title="©hokamp 2007" href="#"></a></li>
<li class="inner"></li>
<li class="inner"></li>
<li></li>
<li class="outer"></li>
</ul>
</li>
<li>
<ul>
<li class="outer"></li>
<li></li>
<li></li>
<li class="inner"></li>
<li></li>
<li class="inner"></li>
<li></li>
<li></li>
<li class="outer"></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li class="black"></li>
<li></li>
<li class="inner"></li>
<li></li>
<li class="inner"></li>
<li></li>
<li class="black"></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li class="black"></li>
<li></li>
<li></li>
<li></li>
<li class="black"></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li class="outer"></li>
<li class="outer"></li>
<li class="outer"></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
Del.icio.us
Technorati