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> Espero hayan entendido mi duda.
Muchas Gracias.
