Foros del Web - Ver Mensaje Individual

kseso? · #9 (**permalink**) 21/11/2010, 17:15

Cita:

Iniciado por PedroDesing

Lo que gano con meter el li dentro y no al reves, es la superficie que consigo cambiar de color en el estado :hover, con el li puedo conseguir una superficie mayor usando padding y tal incluso meter una img con background en el hover del li.

Esta parte se me pasó
No tiene porqué dar medidas al li, ni es recomendable.
Es preferible que sea el propio enlace el que marque el tamaño, y así toda la superficie recibe el foco

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" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
  font-size: 1em;
  font-family: garamond, serif;
}
ul {list-style-type: none;}
ul li {float:left; border: 1px solid #CC0000; margin: 0 5px;}
ul li a {display: block; padding: 50px 200px; background: #f5f5f5; color: #444; text-decoration: none;}
ul li a:hover {background: #444; color: #f5f5f5;}
</style>
</head>
<body>
  <ul>
      <li><a href="#">Enlace 1</a></li>
      <li><a href="#">Enlace 1</a></li>
  </ul>
</body>
</html>

Fíjese que son los li los que tienen el borde, pero no tienen asignado nada que relativo al tamaño.