CSS, Diseño, WWW
Barra de menu con CSS e imagen de fondo
9 de Mayo del 2009 por b@cHo · 2 Comentarios
Pués este metodo te permite tener una barra de menu de tamaño variable, permitiendo editar al gusto y que sea esteticamente “fino”
Esta entrada es una continuación de la anterior de CSS, por lo que las mismas herramientas son usadas.
Crear la barra de menu
Lo que tenemso que hacer, es un diseño de la barra de menu, este se aplicara la misma tecnica que el anterior, una imagene para contener el texto, y una de cada extremo.
Bueno mi imagen quedo asi:
Si lo desean, creen separadores y textos de prueba para obtener lo deseado:
Seccionando la imagen:
Hay que dividir nuestra imagen en 3 partes
- El marco izquierdo
- El boton de contenido (se sugiere una anchura constante para evitar problemas)
- Y el marco derecho
De tal manera que nos queda:
El estilo
Ahora el CSS, necesitaremos 6 nuevas clases:
- El contenedor del menu
- La imagen derecha
- La imagen izquierda
- El fondo de imagen
- Color de los enlaces
- Listado de enlaces
Este es el ejemplo del CSS, asumiendo que las imagenes miden lo mismo que las del ejemplo.
#contenido {
width: 612px;
background-color: #fff;
}
#menu {
position:relative;
width: 612px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
.menuder {
float: left;
height: 62px;
width: 13px;
background: url(der.jpg) no-repeat;
}
.menuizq {
float: left;
height: 62px;
width: 21px;
background: url(izq.jpg) no-repeat;
}
#enlace {
list-style: none;
margin: 0 0px;
padding: 0 0 0 0px;
float: left;
height: 62px;
}
#enlace li {
float: left;
width: 104px;
height: 62px;
background: url(enlace.jpg) no-repeat;
margin: 0 0px;
padding: 18px 0 0 0;
}
#enlace li a
{
color: #838383;
font-weight: bold;
text-decoration: none;
}
#izq {
float: left;
background-color: #fff;
width: 400px;
}
#derecha {
float: right;
width: 212px;
}
.top {
height: 47px;
background: url(top.jpg) no-repeat;
}
.contenido {
background: url(contenido.jpg) repeat-y;
padding: 5px 5px 5px 5px;
}
.contenido p {
margin: 2px 29px 2px 29px;
}
.bottom {
background: url(bottom.jpg) no-repeat;
height: 43px;
}
Son las lineas de la 7 a la 54 lo agregado para el menu
El HTML
Casi el final, lo unico que tenemos que hacer es agregar el contenedor del menu, la imagen derecha, los enlaces y la imagen izquierda!.
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<title> Barra lateral y menu</title>
</head>
<body>
<div id="contenido">
<div id="menu">
<div class="menuder"></div>
<ul id="enlace">
<li><a href="#">Un enlace</a></li>
<li><a href="#">Un enlace</a></li>
<li><a href="#">Un enlace</a></li>
<li><a href="#">Un enlace</a></li>
<li><a href="#">Un enlace</a></li>
</ul>
<div class="menuizq"></div>
</div>
<div id="derecha">
<div class="top"></div>
<div class="contenido">
<p>
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
Un pequeño texto acerca de nada
</p>
</div>
<div class="bottom"></div>
</div>
<div id="izq">
<p>
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentacion de un documento estructurado escrito en HTML o XML (y por extension en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacion de las hojas de estilo que serviran de estandar para los agentes de usuario o navegadores.<br />
La idea que se encuentra detras del desarrollo de CSS es separar la estructura de un documento de su presentacion.<br />
</p>
</div>
</div>
</body>
</html>
Son las lineas de la 9 a la 19 lo agregado para el menu
Recuerden comentar cualquier duda o sugerencia ;)
- Posts Relacionados
- Botones CSS Misma Imagen efecto de hover y active // Antes de que FeCr sugiera que tome un descanso,...
- Barra de progreso con ncurses Buenas. Pues eso una barra de progresos, no crean que...
- FSTAB a fondo. Esta entrada se tratara acerca de lo que es FSTAB,...
- Usar una imagen como portada de carpeta en Windows Un tema corto, en Windows existen varias formas de...
- Rectángulo con bordes redondeados, de tamaño variable Esta clase de formato puede resultar peculiarmente util, al momento...
- Sombreado con CSS Pués basicamente esta entrada explica como hacer cuadros de texto...
- Editar propiedades CSS con jQuery En esta entrada abarcaré el uso de jQuery para alterar...
WordPress MU
Jimmy Salcedo M.
b@cHo
muy buena informacion un saludo
Usando