problema con links

dmm84 · #1 (**permalink**) 14/05/2011, 08:21

Buenas, aqui os pongo mi situacion:

yo uso este codigo:

Código HTML:

Ver original<html>
<head>
<style type="text/css">
#media {
    background:#000;
    padding-left:10px;
    padding-top:10px;
    width:400px;
    height:50px;
}
a #fotos, a:visited #fotos {
    display:block;
    background:url(images/fotosOff.jpg) left top no-repeat;
    color:#000;
    height:20px;
    color:#999;
}
a:hover #fotos {
    background:url(images/fotosOn.jpg) left top no-repeat; 
    color:#333;
}
a #videos, a:visited #videos {
    display:block;
    background:url(images/videosOff.jpg) right top no-repeat;
    color:#000;
    height:20px;
    color:#999;
}
a:hover #videos {
    background:url(images/videosOn.jpg) right top no-repeat; 
    color:#333;
}
</style>
<title>Estilo CSS</title>
</head>
<body>
<div id="media">
    <a href="fotos.php"><span id="fotos"></span></a>
    <a href="videos.php"><span id="videos"></span></a>
</div>
</body>
</html>

hasta aqui normal pero el problema es que el link de videos aparece debajo del de las fotos como si hubiera un <br> y me gustaría que apareciesen en la misma linea. ¿Alguien sabe como consigo este resultado?

TEPO · #2 (**permalink**) 14/05/2011, 08:52

Lo que tenes que hacer es agregar la propiedad display:inline-block; en las siguientes lineas de tu codigo:

a #fotos, a:visited #fotos {
display:block;
background:url(images/fotosOff.jpg) left top no-repeat;
color:#000;
height:20px;
color:#999;
display:inline-block;
}

a #videos, a:visited #videos {
display:block;
background:url(images/videosOff.jpg) right top no-repeat;
color:#000;
height:20px;
color:#999;
display:inline-block;
}

Asi te va a funcionar.
Saludos.

dmm84 · #3 (**permalink**) 14/05/2011, 10:16

no me funciona, me desaparecen los links al poner eso

TEPO · #4 (**permalink**) 14/05/2011, 11:04

Bueno, yo lo probe en mi maquina con texto y funcionaba, hay que ver que es lo que estas poniendo dentro de los span, de todos modos es la primera vez que veo algo estructurado de ese modo, y el css tambien me parece bastante raro, tal vez si probas con no enroscarte tanto, me refiero a :

a #fotos, a:visited #fotos { (nunca habia visto algo asi)

o:

<a href="fotos.php"><span id="fotos"></span></a> (Tampoco nunca había visto esto)

Tal vez alguien mas del foro pueda ayudarnos a ver como esto, si es una cuestion de estructura o solo de css, probaste con ir cambiando el posicionamiento de los elementos?, tal vez eso te ayude.-

dmm84 · #5 (**permalink**) 14/05/2011, 11:17

con tu codigo no me aparecen las fotografias, si introduzco un texto dentro del span si que me aparece el texto colocado en su sitio pero las fotos sin aparecer

dmm84 · #6 (**permalink**) 14/05/2011, 12:58

al final he conseguido llegar a la solucion, habia que introducir el display:inline-block dentro de #media

TEPO · #7 (**permalink**) 14/05/2011, 13:03

ja!, por ahi venia la mano.