Foros del Web » Creando para Internet » CSS »

No funcionan algunos links en spans

Estas en el tema de No funcionan algunos links en spans en el foro de CSS en Foros del Web. Buenas gente. Sigo incursionando en CSS, pero desalentado por varios malos resultados... En el siguiente código tengo una tabla paginada, pero la paginación la hago ...
  #1 (permalink)  
Antiguo 23/12/2005, 08:29
Avatar de Seppo  
Fecha de Ingreso: marzo-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 1.284
Antigüedad: 12 años, 8 meses
Puntos: 17
No funcionan algunos links en spans

Buenas gente.
Sigo incursionando en CSS, pero desalentado por varios malos resultados...
En el siguiente código tengo una tabla paginada, pero la paginación la hago con spans.
El problema es, con FireFox, que andan algunos links a su antojo, y quiero, obviamente, que anden todos.
Fijense que en este no anda el de próxima página (class c3) y sí el de última página (class c4).

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MARCAR</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	background-color:#eeeeee;
	padding-top:24px;
	padding-left:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
}

#menu {
	background-color:#CCCCCC;
	position:absolute;
	color:#333333;
	border-color:#000000;
	border-width:thin;
	border-style:outset;
	width:124px;
	height:400px;
	padding: 6px 2px 6px 4px;
}

#menu li {
	display:block;
	width:80px;
	padding:4px 0px 0px 0px;
	border: 0px solid #000000;
	line-height: 20px;
	margin: 2px 2px 2px -20px;
	list-style-type: none;
	list-style-position:outside;
}

#menu li a {
	text-decoration:none;
	background-color: #000000;
	color:#FFFFFF;
	width:100%;
	height:100%;
	display:block;
	padding:4px 0;
	text-align:center;
	font-size:11px;
}

#menu li a:hover {
	color:#99CC00;
	background-color:#003366;
}

#main {
	background-color:#CCCCCC;
	color:#222222;
	border-color:#000000;
	border-width:thin;
	border-style:outset;
	width:704px;
	height:400px;
	padding: 10px 4px 2px 4px;
	margin-left:140px;
	position:absolute;
	overflow:auto;
}

table {
	table-layout:fixed;
	border: thin solid #000000;
	width:98%;
	background-color:#EEEEEE;
	margin: 4px 4px 4px 4px;
}

td {
	border: thin none #666666;
	padding: 2px 2px 2px 2px;
	height:1em;
}

a {
	text-decoration:none;
	color:#003366;
}

input.textForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-style:none;
	background-color:#DDDDDD;
	width:114px;
}

select.textForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-style:none;
	background-color:#DDDDDD;
	width:114px;
}

textarea.textForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-style:none;
	background-color:#DDDDDD;
	width:100%;
	height:80px;
}

input.buttonForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-color:#CCCCCC;
}

h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-style:normal;
	text-decoration:none;
	font-weight:bold;
	color:#003399;
	padding-left:8px;
	position:relative;
}

td.mini {
	font-size:10px;
	font-weight:100;
}
span.c1 {width:24%; position:absolute; padding-left:0%;}
span.c2 {width:24%; position:absolute; padding-left:25%;}
span.c3 {width:24%; position:absolute; padding-left:50%;}
span.c4 {width:24%; position:absolute; padding-left:75%;}
span.c5{width:40%; position:absolute; text-align:right;}
span.c6{width:50%; position:absolute; text-align:left; padding-left:42%; }
span.editar {width:50%; position:absolute; text-align:left; padding-left:42%; }
span.nuevo {padding-left:4px; padding-top:20px; position:absolute}
tr.c1 {background-color:#999999}
tr.c2 {cursor:pointer; }
.textLink {
	text-decoration:none;
	color:#000066;
}
</style>
<script language="javascript" type="text/javascript">
function confirmar() {
	if (!confirm("¿Esta seguro que desea eliminar esta cuenta?"))  {
		return false
	} else {
		document.formulario.usuario.value = "";
		document.formulario.submit();
	}
}
</script>
</head>

<body>
<div id="menu">
 <ul>
<li><a href="stock.php">Ver stock</a></li>

<li><a href="ingreso.php">Ver ingresos</a></li>
<li><a href="egreso.php">Ver egresos</a></li>
<li><a href="usuario.php">Usuarios</a></li>
<li><a href="producto.php">Productos</a></li>
<li><a href="cliente.php">Clientes</a></li>
<li><a href="texto.php">Textos</a></li>
<li><a href="ningreso.php">Nuevo ingreso</a></li>
<li><a href="negreso.php">Nuevo egreso</a></li>
<li><a href="index.php?accion=logout">Salir</a></li>

</ul>
</div>
<div id="main">
<h1>Ver lista de usuarios</h1>
	<table cellpadding="0" cellspacing="0">
	  <tr style="background-color:#999999 ">
		<td>Nombre de usuario</td>
		<td>Nombre</td>
		<td>Acceso</td>

	  </tr>
		  <tr onMouseOver="this.style.backgroundColor='#DDDDDD'" onMouseOut="this.style.backgroundColor='#EEEEEE'" style="cursor:pointer " onClick="location.href='usuario.php?usuario=1'">
		<td><a class="textLink" href='usuario.php?usuario=1'>SeppoA</a></td>
		<td><a class="textLink" href='usuario.php?usuario=1'>Sebastián</a></td>
		<td><a class="textLink" href='usuario.php?usuario=1'>Administrador</a></td>
	  </tr>
		</table>

			<span class="c3"><a href="usuario.php?pag=1">Pr&oacute;xima p&aacute;gina</a></span>
	<span class="c4"><a href="usuario.php?pag=1">&Uacute;ltima p&aacute;gina</a></span>
	<span class="nuevo"><a href="usuario.php?usuario=new">Nuevo usuario</a></span>
</div>
</body>
</html> 
Muchas gracias por su tiempo
  #2 (permalink)  
Antiguo 23/12/2005, 09:35
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
Hola Seppo, el problema del link que no te funciona es porque tu ".c3" esta debajo de tu ".c4", prueba usar este codigo:
Código:
span.c3 {width:24%; position:absolute; left:50%;} 
span.c4 {width:24%; position:absolute; left:75%;}
fijate que he cambiado el "padding-left" por simplemente "left", al darle padding lo que haces es ampliar el espacio de la caja del "span", el padding es como un relleno, por lo cual la otra clase queda debajo, para que esto no pase deberias haber usado "margin", pero como estas usando posiciones absolutas puedes usar simplemente "left".
Espero te ayude
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 11:38.