Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/06/2009, 09:48
efelix
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 18 años, 7 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.