CSS Horizontal Menu with thumbs

HTML & CSS
1

Below i have attached an image of a menu I am creating.

Its not hard to make, but i would like to know the best way to make it.
Example: Would loading the thumbnails in CSS be a better?

My quick code I made for this post.

If you think there is a better way to design this kind of menu please let me know.



<style type="text/css">

#box { width:100%; }
.box2 { width:300px; padding: 10px; }
.image { float: left; }
.title {  }
.des { font-size: 10px; font-style:italic; }


</style>

<div id="box">

	<div class="box2">

		<div class="image">
			<img src="http://www.google.com/intl/en_us/services/images/small/sitemaps.gif" />
		</div>
		
        <div class="title">This is the Title</div>
        <div class="des">This is the mini description</div>

	</div>
    
    <!--This is the second menu item-->
    
    <div class="box2">

		<div class="image">
			<img src="http://www.google.com/intl/en_us/services/images/small/sitemaps.gif" />
		</div>
		
        <div class="title">This is the Title</div>
        <div class="des">This is the mini description</div>

	</div>
    

</div>
2

There are different ways to create such a menu. Your way is one of them. I would use a list but that is personal:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

#menu {
	width: 300px;
	margin-left: 20px;
	float: left;
	clear: both;		
}

#menu li {
	width: 100%;
	margin-bottom: 10px;	
}

#menu li a {
	width: 240px; /* 300px with padding */
	line-heigh: 12px;
	padding: 4px 30px;
	display: block;
	color: #000;
	text-decoration: none;	
}

#menu li a.sitemap {
	background: url(http://www.google.com/intl/en_us/services/images/small/sitemaps.gif) no-repeat left center;	
}

#menu li a span {
	display: block;
}
 
#menu li a span.title,
#menu li a span.description {
	font-size: 12px;
	color: #000;	
}

#menu li a span.description {
	font-size: 10px;
	font-style: italic;	
}
</style>
</head>

<body>

<ul id="menu">
<li><a href="#" class="sitemap">
<span class="title">This is the Title</span>
<span class="description">This is the mini description</span>
</a></li>

<li><a href="#" class="sitemap">
<span class="title">This is the seciond Title</span>
<span class="description">This is the mini description</span>
</a></li>
</ul>

</body>
</html>

And there are more ways of course. maybe you can do something with it.

3

Version 2:

Thanks 4 the reply “donboe”

Right before you replied I decided it would be better to wrap it in <ul> and <li> tags and redefine the classes.

Here is my version 2 with minimal design.




<style type="text/css">

#box { width:100%; }
.box2 { width:300px; padding: 10px; }
.box2 ul { list-style: none outside none; }
.box2 li { margin-bottom: 20px; }
.box2 ul li .image { float: left; }
.box2 ul li .title {  }
.box2 ul li .des { font-size: 10px; font-style:italic; }


</style>

<div id="box">
	<div class="box2">
        <ul>
        	<li>

				<a class="image" href="#">
					<img src="http://www.google.com/intl/en_us/services/images/small/sitemaps.gif" height="40px" width="40px" border="0px" />
				</a>
		
				<a class="title">This is the Title</a>
				<p class="des">This is the mini description</p>
		
			</li>
    
    <!--This is the second menu item-->
    
			<li>

				<a class="image">
					<img src="http://www.google.com/intl/en_us/services/images/small/sitemaps.gif" height="40px" width="40px" border="0px" />
				</a>
		
				<a class="title">This is the Title</a>
				<p class="des">This is the mini description</p>
		
			</li>
		</ul>
	</div>
</div>

I think it makes it much easier to read.

4

Like I said my example is personal. I prefer to use the images as backround. But when you’re happy with what you did there is no reason why you should change it. One small detail though you could have used the class box2 on the ul instead of wrapping it in a separate div