Debo ser medio zopenco....
Al final volví a empezar desde el principio para hacer el menú
El código css es este
Código CSS:
Ver original.wrapper {width: 940px; margin: 0 auto; background-color: white; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;}
/* Menu inferior */
.navbar-bottom {margin:0 auto;}
.navbar-bottom ul li {list-style: none}
.navbar-bottom ul li a {display:inline-block; float: left;}
.btn {width: 125px; height: 80px; background-color: #708EB2; margin-right: 8px}
y el html
Código HTML:
<body>
<div class="wrapper">
<h1>Lorem ipsum Sunt exercitation et reprehenderit consectetur est Duis pariatur laboris aute dolore sunt enim.</h1>
<div class="navbar-bottom">
<ul>
<li><a class="btn" href="index.html"></a></li>
<li><a class="btn" href="index.html"></a></li>
<li><a class="btn" href="index.html"></a></li>
<li><a class="btn" href="index.html"></a></li>
<li><a class="btn" href="index.html"></a></li>
<li><a class="btn" href="index.html"></a></li>
</ul>
</div>
</div>
</body>
</html>
Ahora mismo el menú está como quiero salvo por dos fallos. No se porqué razón no aparece dentro del div wrapper y no soy capaz de centrarlo horizontalmente.
Y aprovecho para preguntar otra cosa. El div wrapper, cuando no tiene ningún contenido está pegado arriba de todo en el navegador. Pegado justo debajo de la barra de marcadores. Pero cuando le meto cualquier tipo de contenido crea un margen como de unos 10 px, más o menos. He probado poniendo position relative en el css pero no funciona.