CODEWITHSUNDEEP
htmlcsshtml-lists
Mark
Mark

Reputation: 3

Vertical align sub ul's to bottom

i'm creating a site for a bookstore and the designer wants to represent the menu as seperate piles of books. I have 4 piles with different amount of books (read menu items). I can create the menu with ul containing 4 li's (piles) which contain ul with li's (books). I have to stick to the ul and li notation because the menu will be created like that by Joomla.

The problem is that the books look like they float to the ceiling instead of lying on the shelf. How can i make the books lie down on the shelf?

Example: http://jsfiddle.net/cJ8an/

<html>
<head>
<style>

* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}

a:hover {
color: black;
}

ul li {
float: left;
list-style: none;
}

ul li ul {
margin-right: 25px;
}

ul li ul li {
float: none;
margin-top: 5px;
}

hr {
clear: both;
height: 10px;
background: brown;
}

</style>
</head>
<body>
<ul>
<li>
    <ul>
        <li><a href="#">HOME</a></li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">BOEKENTIPS</a></li>
        <li><a href="#">MEER DAN BOEKEN</a></li>
        <li><a href="#">NIEUWS</a></li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">LEZERSBLOG</a></li>
        <li><a href="#">BESTELFORMULIER</a></li>
        <li><a href="#">VERTELTHEATER</a></li>
        <li><a href="#">ANTROPOSOFIE</a></li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">SCHOLEN</a></li>
        <li><a href="#">KINDEROPVANG</a></li>
    </ul>
</li>
</ul>
<hr id="bookshelf" />
</body>
</html>

Upvotes: 0

Views: 99

Answers (1)

Tim Wasson
Tim Wasson

Reputation: 3656

display:table used in a clever way seems to have worked. This will need some tweaking, but I'm sure you can take it from here. Good luck. http://jsfiddle.net/tmpQM/

* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}

a:hover {
color: black;
}
ul {
display:table;
}
ul li {
display:table-cell;
list-style: none;
vertical-align:bottom;
}

ul li ul {
margin-right: 25px;
display:block;
}

ul li ul li {
float: none;
margin-top: 5px;
display:inline-block;
}

hr {
clear: both;
height: 10px;
background: brown;
}

Upvotes: 1

Related Questions