Forum Moderators: not2easy
I'm looking for a good solution to take 6 images and display them in two columns vertically.
<ul>
<li><a href="#">home</a></li>
<li><a href="#">biography</a></li>
<li><a href="#">shows</a></li>
<li><a href="#">discography</a></li>
<li><a href="#">media</a></li>
<li><a href="#">merch</a></li>
</ul>
With the css off, it would just be a regular unordered list, but with css on, I'd like to use my own images to achieve something more to the effect of...
<ul>
<li style="float:left"><a href="#">home</a></li>
<li style="float:left"><a href="#">biography</a></li>
<li style="float:left"><a href="#">shows</a></li>
<br />
<li style="float:right"><a href="#">discography</a></li>
<li style="float:right"><a href="#">media</a></li>
<li style="float:right"><a href="#">merch</a></li>
</ul>
Thanks in advance for any help and suggestions!
gen
Trick is to float the items in a container that has the right width.
I've not tested it in anything but Firefox, you might need considerable work to get it workign in IE.
As an alternative, search for sliding doors, it's much nicer for most uses.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
} /*aggressive reset, milder one can be done too*/
#menu {
width: 650px /*too wide to hold 3 not wide enough to hold 4*/
}
#menu li {
float:left /*float the individual items*/
}
#menu li a {
width:200px;
height: 78px; /*size of my example image*/
display:block; /*to make it act as a block*/
text-indent: -5000px; /*to make the text go off-screen*/
}
#menu1{
background-image:url("logo1.png");
}
#menu2 {
background-image:url("logo2.png");
}
#menu3 {
background-image:url("logo3.png");
}
#menu4 {
background-image:url("logo4.png");
}
#menu5 {
background-image:url("logo5.png");
}
#menu6 {
background-image:url("logo6.png");
}
</style>
</head>
<body>
<h1>title</h1>
<ul id="menu">
<li id="menu1"><a href="#">one</a></li>
<li id="menu2"><a href="#">two</a></li>
<li id="menu3"><a href="#">three</a></li>
<li id="menu4"><a href="#">four</a></li>
<li id="menu5"><a href="#">five</a></li>
<li id="menu6"><a href="#">six</a></li>
</ul>
</body>
</html>
