Foros del Web » Creando para Internet » CSS »

Los hipervínculos no aparecen en su forma predeterminada

Estas en el tema de Los hipervínculos no aparecen en su forma predeterminada en el foro de CSS en Foros del Web. Hola a todos. Saludos. Tengo la siguiente duda. Sé que la etiqueta ancla (a) está dentro del grupo de los inline elements, es decir que ...
  #1 (permalink)  
Antiguo 08/06/2009, 10:48
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Los hipervínculos no aparecen en su forma predeterminada

Hola a todos.
Saludos.
Tengo la siguiente duda.
Sé que la etiqueta ancla (a) está dentro del grupo de los inline elements, es decir que la misma para que se comporte como un block elements hay que utilizar una css y específicar en la propiedad display el valor block.
Bueno esa es la teoría. En la realidad me esta sucediendo que tengo unos enlaces dentro de un div que en vez de salir en su forma predeterminada (inline), están saliendo como si les hubiese declarado el valor block a la propiedad display.
Es un diseño que he tomado de un ejemplo que he visto y lo he adaptado para una página que estoy construyendo, pero no hay forma que me quede como la muestra.
A continuación les muestro el código css:
[STYLE]
body{
font-family: Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background-color: #cccccc;}

/* layout boxes */
#page{
position:absolute;
top: 10px;
left:10px;
width:800px;
background-color: #ffffff;}

#masthead{border-bottom:1px solid #cccccc;}

#topNav {
border-bottom:1px solid #ccd2d2;
padding:5px;
background-color:#e7e7e7;}

#topNav a:link, #topNav a:visited{
padding:0px 5px 0px 5px;}

#sideNav{
float: left;
width:150px;
background-color: #F5f7f7;
border-bottom: 1px solid #cccccc;}

#sideRight{
float: right;
width:150px;
background-color: #F5f7f7;
border-bottom: 1px solid #cccccc;}

#content{
margin:0px 150px 0px 150px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;}

#footer{
clear: both;
border-top: 1px solid #cccccc;
padding: 10px;}

.item{
padding:10px;
min-height: 75px;
height: 75px;}

#search{
position: absolute;
top:10px;
right: 10px;
z-index:100;}

form {margin:0px;}

#sideNav a:link, #sideNav a:visited{
display:block;
padding:5px;}

#sideNav a:hover {background-color:#d6d6d6;}
[/STYLE]
Esto funciona perfectamente bien en el ejemplo, pero cuando lo llevo a mi página, cuyo código es el que pongo a continuación:
Código PHP:
<html>
<head>
    <title>Sistema de Noticias</title>
    <script type="text/javascript">
    function cambiar(){
        document.getElementById('divXCambiar').innerHTML = "ADIOS";
    }
    </script>
    <style type="text/css">
    body{
    font-family: Arial,sans-serif;
    color: #333333;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;}

/* layout boxes */
 #page{
    position:absolute;
    top: 10px;
    left:10px;
    width:800px;
    background-color: #ffffff;}

  #masthead{border-bottom:1px solid #cccccc;}

   #topNav {
    border-bottom:1px solid #ccd2d2;
    padding:5px;
    background-color:#e7e7e7;}

   #topNav a:link, #topNav a:visited{
    padding:0px 5px 0px 5px;}

   #sideNav{
    float: left;
    width:150px;
    background-color: #F5f7f7;
    border-bottom: 1px solid #cccccc;}

   #sideRight{
    float: right;
    width:150px;
    background-color: #F5f7f7;
    border-bottom: 1px solid #cccccc;}

   #content{
    margin:0px 150px 0px 150px;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;}

   #footer{
    clear: both;
    border-top: 1px solid #cccccc;
    padding: 10px;}

   .item{
    padding:10px;
    min-height: 75px;
    height: 75px;}

    #search{
     position: absolute;
     top:10px;
     right: 10px;
     z-index:100;}

     form {margin:0px;}

      #sideNav a:link, #sideNav a:visited{
      display:block;
      pad8ding:5px;}

     #sideNav a:hover {background-color:#d6d6d6;}
    </style>
</head>
<body>
<?php include('db-cnx.php'); ?>
<div id = "page"> 
<div id = "masthead">
 <h2>Masthead</h2>
</div>
<div id = "topNav">
<a href = "#">Top link one</a>
<a href = "#">Top link two</a>
<a href = "#">Top link three</a>
<a href = "#">Top link four</a>
<a href = "#">Top link five</a>
</div>
<h1>Sistema de Noticias</h1>
<div id = "sidenav">
    <?php include('list-categoria.php'); ?>
</div>
<div id = "sideRight">
</div>
<div id = "content">
  <div class = "item"> 
    <?php include('list-noticia.php'); ?>
  </div> 
</div>
<div id = "footer">
</div>
</div>
</body>
</html>
Entonces el identificador topNav donde van los enlaces uno al lado del otro me salen uno debajo del otro. A qué se debe esto?
Espero hayan entendido mi duda.
Muchas Gracias.
  #2 (permalink)  
Antiguo 08/06/2009, 10:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Seguramente es porque no usas un doctype en tu página. Haz una simple búsqueda por ese término y encontrarás una enorme cantidad de información al respecto.
  #3 (permalink)  
Antiguo 08/06/2009, 10:56
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Gracias por tu respuesta. Voy a buscar y te diré si se debe a eso el problema.
  #4 (permalink)  
Antiguo 08/06/2009, 11:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Bueno, sólo para probar si es eso, reemplaza tu etiqueta <html> por esto:
Cita:
<!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">
Y así ya pruebas a ver.
  #5 (permalink)  
Antiguo 08/06/2009, 11:30
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Probé lo que me mandaste, y nada, tengo que documentarme bien acerca de los doctype.
Ojalá esa sea la clave de todo, pués no se ya que cosa revisar.
  #6 (permalink)  
Antiguo 08/06/2009, 11:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Veamos: yo cojo tu código, le pongo el doctype que te he puesto y me salen los enlaces en horizontal, no uno debajo del otro:
Cita:
<!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-es" lang="es-es">
<head>
<head>
<title>Sistema de Noticias</title>
<script type="text/javascript">
function cambiar(){
document.getElementById('divXCambiar').innerHTML = "ADIOS";
}
</script>
<style type="text/css">
body{
font-family: Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background-color: #cccccc;}

/* layout boxes */
#page{
position:absolute;
top: 10px;
left:10px;
width:800px;
background-color: #ffffff;}

#masthead{border-bottom:1px solid #cccccc;}

#topNav {
border-bottom:1px solid #ccd2d2;
padding:5px;
background-color:#e7e7e7;}

#topNav a:link, #topNav a:visited{
padding:0px 5px 0px 5px;}

#sideNav{
float: left;
width:150px;
background-color: #F5f7f7;
border-bottom: 1px solid #cccccc;}

#sideRight{
float: right;
width:150px;
background-color: #F5f7f7;
border-bottom: 1px solid #cccccc;}

#content{
margin:0px 150px 0px 150px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;}

#footer{
clear: both;
border-top: 1px solid #cccccc;
padding: 10px;}

.item{
padding:10px;
min-height: 75px;
height: 75px;}

#search{
position: absolute;
top:10px;
right: 10px;
z-index:100;}

form {margin:0px;}

#sideNav a:link, #sideNav a:visited{
display:block;
pad8ding:5px;}

#sideNav a:hover {background-color:#d6d6d6;}
</style>
</head>
<body>
<?php include('db-cnx.php'); ?>
<div id = "page">
<div id = "masthead">
<h2>Masthead</h2>
</div>
<div id = "topNav">
<a href = "#">Top link one</a>
<a href = "#">Top link two</a>
<a href = "#">Top link three</a>
<a href = "#">Top link four</a>
<a href = "#">Top link five</a>
</div>
<h1>Sistema de Noticias</h1>
<div id = "sidenav">
<?php include('list-categoria.php'); ?>
</div>
<div id = "sideRight">
</div>
<div id = "content">
<div class = "item">
<?php include('list-noticia.php'); ?>
</div>
</div>
<div id = "footer">
</div>
</div>
</body>
</html>
¿Era eso? Si no es así, no he entendido la consulta.
  #7 (permalink)  
Antiguo 08/06/2009, 13:21
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Te reitero las gracias, pero he probado y me sigue haciendo lo mismo.
Mira no se si no me has entendido. Deja ver si me explico mejor, en esta mism página hay un menú de navegación: Panel de Control Ayuda Comunidad Nuevos Mensajes, donde como podrás apreciar los enlaces están colocados uno al lado del otro, lo cual es el comportamiento por defecto de la etiqueta ancla, eso es lo que quiero en mi caso, que el menú superior me salga de esa manera, pues el que está a la izquierda no tiene problemas, ya que en ese si quiero que salgan como si fueran blocks elements.
Cuando aplicó el doctype que me sugieres sigue haciendo lo mismo, pero aún peor, ya que el div que contiene los enlaces de la izquierda se me expanden ocupando todo el ancho del browser y debajo se coloca entonces el div con el id content, en vez de que dar al lado.
Espero me hayas entendido.
Paradójicamente el ejemplo ejemplo lo corro aparte sin ningún doctype y sin nada de php y funciona.
Qué crees que pueda estar sucediendo?.
  #8 (permalink)  
Antiguo 08/06/2009, 13:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

mmm... veamos: coge el código completo que he pegado en el anterior mensaje, pégalo en un archivo .html sin nada más y dime cómo lo ves: ¿en el menú superior no salen los elementos uno al lado del otro en horizontal?

Deberías ver exactamente esto

¿No es eso a lo que te refieres, a que top link one y top link txo estén uno al lado del otro?
  #9 (permalink)  
Antiguo 08/06/2009, 13:40
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Voy a probar y te digo, eso mimo es lo que deseo. Deja ver que pasa.
  #10 (permalink)  
Antiguo 08/06/2009, 13:48
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Pues si acabo de probarlo y funciona, no se entonces donde está el problema.
Te comento el que la página la estoy construyendo usando el Zend Studio, puesto que lo uso como editor PHP, tendrá esto que ver algo?.
He copiado el código que pusiste en el Dreamweaver y funciona de la forma que deseo.
Te agradezco enormemente tu paciencia con este tema.
Hay que seguir profundizando en cuestiones como los doctype.
De todas formas voy a mirar detenidamente el código que pusiste a ver si además del doctype añades otra cosa.
Gracias.
  #11 (permalink)  
Antiguo 08/06/2009, 16:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Los hipervínculos no aparecen en su forma predeterminada

Cita:
Iniciado por efelix Ver Mensaje
De todas formas voy a mirar detenidamente el código que pusiste a ver si además del doctype añades otra cosa.
1.- Si he dicho que no he tocado nada, ¡es porque no he tocado nada!: tú código con el DOCTYPE que te he puesto.
2.- Cuando tras ponerte el código completo has contestado: "Te reitero las gracias, pero he probado y me sigue haciendo lo mismo.", es que sencillamente no habías probado el ejemplo, y ¡¡¡eso me revienta!!!

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 02:30.