Barra superior II

Crear el div

Primero, vamos a crear el div en css escribiendo esto:
#barrasuperior
Ya hemos creado el div.

Poner cosas al div

Ahora, vamos a ponerle altura y color de fondo de la siguiente manera:
#barrasuperior{background-color: #0BB9A8; height: 20px}

En la barra, queremos que salgan una lista de enlaces, por lo cual usaremos ul y li, los cuales deben ser configurados para que haya separación entre los enlaces. Los enlaces tienen que salir desde la izquierda, por lo cual, usamos float:left en li. No queremos que salgan los puntos así que usaremos list-style:none, también en li. Y por último, vamos a poner separación a la lista con margin en ul.

#barrasuperior li {float:left; list-style:none; margin: 0px 20px 0px 20px}
#barrasuperior ul { margin-left: 50px }

Y entonces al poner:

<div id="barrasuperior">
<ul>
<li><a href="#">Enlace 1<br /></a></li>
<a href="#">  </a>
<li><a href="#">Enlace 2<br /></a></li>
<li><a href="#">Enlace 3<br /></a></li>
<li><a href="#">Enlace 4<br /></a></li>
<li><a href="#">Enlace 5<br /></a></li>
</ul>
</div>

Saldría

Tags: Barra superior, html, css, div