buenas yo tengo este codigo, funciona perfectamente pero quiero que se vea mas organizado como pueden ver de arauca a armenia hay un espacio muy grande y preciso es del tamaño del texto oculto, pero se ve muy feo ya que son casi 36 ciudades las que colocare. mi pregunta es ¿ como quito ese espacio sin afectar el texto oculto?
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css" media="screen">
A:link {color: transparent; font-size: 14pt; font-family: arial; text-decoration: none }
A:hover {color: transparent; font-size: 14pt; font-family: arial; text-decoration: none }
A:visited {color: transparent; font-size: 14pt; font-family: arial; text-decoration: none }
.texton { color: black }
.texton a:link { color: black; font-size: 14pt; font-family: arial; text-decoration: none }
.texton a:hover { color: black; font-size: 8pt; font-family: arial; text-decoration: none }
texton a:visited { color: black; font-size: 8pt; font-family: arial; text-decoration: none }
</style>
<script>
function mostrar(id) {
obj = document.getElementById(id);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
<style type="text/css">
<!--
.Estilo2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.Estilo3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
-->
</style>
</head>
<body>
<a href="#" onclick="mostrar('divTexto1'); return false" /><img src="http://i.imgur.com/GHbfl.png" width="136" height="23" />
<div id="divTexto1" style="visibility:hidden">
<table width="404" border="0">
<tr>
<td width="182" class="texton"><p class="Estilo3">Punto de Asistencia<br />
Persona Autorizada</p></td>
<td width="104" valign="top" class="texton"><p class="Estilo3">Dirección<br />
Teléfono</p></td>
<td width="104" valign="top" class="texton"><p class="Estilo3">S/N/Or/Oc<br />
Barrio</p></td>
</tr>
</table>
</div>
<BR>
<a href="#" onclick="mostrar('divTexto2'); return false" /><img src="http://i.imgur.com/ZLpkm.png" width="110" height="22" />
<div id="divTexto2" style="visibility:hidden">
<table width="404" border="0">
<tr>
<td width="182" class="texton"><p class="Estilo3">Punto de Asistencia<br />
Persona Autorizada</p></td>
<td width="104" valign="top" class="texton"><p class="Estilo3">Dirección<br />
Teléfono</p></td>
<td width="104" valign="top" class="texton"><p class="Estilo3">S/N/Or/Oc<br />
Barrio</p></td>
</tr>
</table>
</div>
<BR>
<a href="#" onclick="mostrar('divTexto2'); return false" /></a>
<div id="divTexto2" style="visibility:hidden">
</body>
</html>