Buenas amigos, estoy aquí para pedir un poco de ayuda. Estoy haciendo una web en PHP con estilos CSS en Dreamwaver. Tengo una pagina índex.php la cual llama a un archivo que tengo para el encabezado de la pagina (encabezado.php) el cual contiene el siguiente código:
<div id="logo">
<h1>Cliker.com Tu pagina de premios solo por entrar</h1>
<p>La página donde ganar es tan fácil como entrar </p>
</div>
<div id="searchbox"></div>
<div class="clearBoth"> </div>
<div id="navegador">
<ol>
<li class ="Link1"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
<li class ="Link2"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
<li class ="Link3"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
<li class ="Link4"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
<li class ="Link5"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
<li class ="Link6"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
<li class ="Link7"> <a href="PONGO AQUI OTRO LINK"> </a> </li>
</ol> <!-- PONEMOS LOS ICONOS y LOS HIPERVINCULOS -->
</div> <!-- Navegador -->
Se supone que al pinchar en cada una de las imágenes me debería llevar a cada una de las partes de mi página (evidentemente tengo puesto las diferentes direcciones donde pone: PONGO AQUI OTRO LINK). El problema es que, al ser una imagen con CSS no consigo que funcione el Hiper-vínculo, pero si pongo esto:
<li class ="Link7"> <a href="PONGO AQUI OTRO LINK"> Algún nombre </a> </li>
Sale el nombre que haya puesto en "Algún nombre" arriba de la imagen y desde ahí si funciona el hiper-vínculo.
Sabe alguien cómo se soluciona esto o qué hacer para que logre funcionar sin tener que poner los nombres encima?
Muchas Gracias por todo. Un saludo.
Esto más que PHP sería CSS.
En el estilo del vínculo poné algo así:
display: block;
width: 100%;
height: 100%;De cualquier forma te digo que es mejor poner la imagen con: <img src="" /> que con css.
Usa
display: block;
Luego colocas un tamaño tal como te lo indico CrisQC .
Muchas gracias, voy a probar a ver si logro hacer que funcione.
No consigo que funcione, al ponerlo donde tengo el estilo de los iconos sigue sin hacer nada de nada. Os dejo aquí parte del código del CSS donde hace referencia a esto:
#navegador
{
float: left;
width:1100px;
height: 91px;
background-image:url(../images/navBG-1100px.png);
background-repeat: no-repeat;
margin-top: 50px;
}
#navegador ol
{
width: 880px;
height: 80px;
position: relative;
top: -50px;
left: 110px;
}
#navegador ol li
{
list-style: none;
float: left;
}
#navegador ol li.Link1
{
background-image: url(../images/NavLink1.png);
background-repeat: no-repeat;
width: 123px;
height: 96px;
background-position: bottom;
font-size:9px;
}
#navegador ol li.Link1:hover
{
background-image: url(../images/NavLink1.png);
background-repeat: no-repeat;
width: 123px;
height: 96px;
background-position: top;
font-size:9px;
}
Por si le quereis echar un vistazo.
Gracias por todo.
Mirá si vos ponés algo como esto
<a href="una página"></a>
Decime: ¿ donde está el link ? Tenés un link vacío, lógicamente no va a aparecer, por eso te decía que en tu caso es mejor hacer algo así:
<a href="una pagina"><img src="la imagen" /></a>
O sino podrías hacerlo así, pero a mi parecer es terrible:
<a href="una pagina"> </a>
Y le agregás el estilo que te dije en el primer comment.
<a href="una pagina" style="display: block;width: 100%;height: 100%;"> </a>
Entiendo que lo que te voy a decir no te soluciona nada, pero creo que debo hacer que lo consideres.
Estás mezclando aspecto con funcionalidad, confundiendo conceptos.
La etiqueta <a/> enmarca qué va a ser el contenido que ejerce de enlace, si la dejas vacía no hay enlace, es normal.
Por otra parte, si esas imágenes tienen una funcionalidad (ejercer de enlace) y no son sólo atributos estéticos, ¿por qué no las metes con <img/>?
No es solamente que apañes la papeleta, es que lo estarías haciendo correctamente. Francamente no quisiera ser yo quien heredara ese proyecto, las cosas cuanto más rebuscadas, cuando pasa un tiempo y las tienes que tocar .... ¡Uf!
CrisQC veo que estamos en la misma onda ;)
Hombre, eso del Link vacío ya lo sé que ahí va un link a la página. Lo que pasa que lo puse así para que fuese más genérico, de hecho, creo que lo expliqué en el primer post que puse.
Insertar Cita
Entiendo que lo que te voy a decir no te soluciona nada, pero creo que debo hacer que lo consideres.
Estás mezclando aspecto con funcionalidad, confundiendo conceptos.
La etiqueta <a/> enmarca qué va a ser el contenido que ejerce de enlace, si la dejas vacía no hay enlace, es normal.
Por otra parte, si esas imágenes tienen una funcionalidad (ejercer de enlace) y no son sólo atributos estéticos, ¿por qué no las metes con <img/>?
No es solamente que apañes la papeleta, es que lo estarías haciendo correctamente. Francamente no quisiera ser yo quien heredara ese proyecto, las cosas cuanto más rebuscadas, cuando pasa un tiempo y las tienes que tocar .... ¡Uf!
Te agradezco la crítica constructiva y..bueno.. es cierto lo que dices pero es evidente que estoy intentando aprender, ya que no llevo mucho tiempo en esto. Es por eso que os pregunto para que prestéis ayuda, que es de agradecer.
CrsQC, intentaré hacerlo tal y como me pones insertando la imagen con src="la imagen".....
Gracias por la ayuda, ya os contaré.
Jajaja.
En realidad con Css se hace maravillas, bueno como te dije con display:block; y un tamaño fijo puedes lograrlo.
te dejo un ejemplo simple , ojala sea de ayuda.
<style>
li{padding:2px;}
a{ display:block; width:150px; height:30px; background-color:#F00; }
</style>
<ol>
<li><a href="link1.html"></a></li>
<li><a href="link2.html"></a></li>
<li><a href="link3.html"></a></li>
<li><a href="link4.html"></a></li>
<li><a href="link5.html"></a></li>
</ol>
Gracias por ese ejemplo, logré por fin hacer que funcionaran los Links correctamente.
Muchas Gracias Jnl y a todos los demás por la ayuda!!!!