rollover css

javs89 · #1 (**permalink**) 08/09/2009, 22:19

Que tal? tengo el siguiente codigo que muestra 4 botones en los cuales hace efecto roll over, necesitaria que los botones tuvieran las siguientes medidas 204x70

donde y que codigo tendria que agregar ?

<html>

<head>

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {

background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}
</style>

</head>


<body>

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a><br />
<a class="botonMenu" href="">Opción 2</a><br />
<a class="botonMenu" href="">Opción 3</a><br />
<a class="botonMenu" href="">Opción 4</a><br />
</div></div>
</body>

</html>

desde ya gracias.

kseso? · #2 (**permalink**) 09/09/2009, 05:42

Hola Javs
Bienvenido a fdw

Creo que tienes un error de base y concepción bastante común.
Lo que tienes es una lista de enlaces, por lo tanto, debería estar etiquetada con los tag's correctos: ul | li

Mira a ver si el siguiente código te sirve de base y ayuda:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {background: #F0F0F0;}
ul li a {
  display: block;
  font-size: 1.5em;
  background: #556975;
  color: #fff;
  text-decoration: none;
  line-height: 70px;
  width:204px;
  height: 70px;
  text-align: center;
}
ul li a:hover {
  background: #637D4D;
  color: #000;
  text-decoration: none;
}
</style>
</head>
<body> 
<ul>
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
</ul>
</body>
</html>

Si necesitas más ejemplos (y más complejos/completos) sobre menús, en las faq's de css, mensajes #69, #70 y #77 tienes una amplia colección.

Un saludo

javs89 · #3 (**permalink**) 09/09/2009, 08:03

Muchisimas gracias por la ayuda!
me sirvio de maravilla!
espero poder aportar tambien ayuda en el foro! :D

saludos!