Foros del Web » Creando para Internet » CSS »

rollover css

Estas en el tema de rollover css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/09/2009, 23:19
 
Fecha de Ingreso: julio-2008
Mensajes: 4
Antigüedad: 9 años, 5 meses
Puntos: 0
rollover css

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>

<!--

background-color de a.botonMenu : color de estado reposo (out).
background-color de a.botonMenu:hover : color de estado sobre (over).
background-color de a.botonMenu:active : color de estado seleccionado.

-->
<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.
  #2 (permalink)  
Antiguo 09/09/2009, 06:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: rollover css

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body {background: #F0F0F0;}
  8. ul li a {
  9.   display: block;
  10.   font-size: 1.5em;
  11.   background: #556975;
  12.   color: #fff;
  13.   text-decoration: none;
  14.   line-height: 70px;
  15.   width:204px;
  16.   height: 70px;
  17.   text-align: center;
  18. }
  19. ul li a:hover {
  20.   background: #637D4D;
  21.   color: #000;
  22.   text-decoration: none;
  23. }
  24. </head>
  25. <body>
  26. <ul>
  27. <li><a href="#">Opción 1</a></li>
  28. <li><a href="#">Opción 2</a></li>
  29. <li><a href="#">Opción 3</a></li>
  30. <li><a href="#">Opción 4</a></li>
  31. </ul>
  32. </body>
  33. </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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 09/09/2009, 09:03
 
Fecha de Ingreso: julio-2008
Mensajes: 4
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: rollover css

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


saludos!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:38.