[SOLUCIONADO] Ancla en html5

ErikaR · #1 (**permalink**) 17/06/2013, 19:59

Hola

Estoy queriendo hacer una ancla, este codigo funciona bien

<a name="s1"> </a>

<a href="#s1"><img src="images/top2.gif" width="20" height="8" alt="top"></a>

solo que no valida bien con esta estructura que estoy usando

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Como hay que escribir el codigo?!

gracias
erika

pzin · #2 (**permalink**) 18/06/2013, 05:12

Los anclas en HTML5 funcionan de otra manera. Ya no se usa el atributo name para indicar el lugar del ancla, sino que se usan los identificadores que se usan para CSS para indicar el ancla.

Por ejemplo:

Código HTML:

Ver original<a href="#cualquiercosa">Ir a cualquier cosa</a>
<div id="cualquiercosa"></div>

ErikaR · #3 (**permalink**) 18/06/2013, 05:30

Hola Pzin

Funciona, solo que le incorpore un jpg y me valida mal, no lo estoy haciendo bien:

<div id="ancla"></div>

<a href="#ancla"><img src="images/top2.gif" width="20" height="8" alt="top"></a>

como seria?

gracias!
erika

ErikaR · #4 (**permalink**) 18/06/2013, 05:52

Hola Pzin,

Probe hacer esto que coipio despues pero el gif no logre sea boton, entonces no funciona:

HTML

<div id="ancla"></div>

<div id="anclaabajo" >
<a href="#ancla"></a>
</div >

CSS

#anclaabajo{
height:8px;
width:20px;
margin-top:30px;
background-image:url(images/top2.gif);

}

Que esta mal?

gracias!
erika

pzin · #5 (**permalink**) 18/06/2013, 06:27

¿Lo tienes subido en algún sitio para verlo in situ? En principio no veo nada mal.

ErikaR · #6 (**permalink**) 18/06/2013, 06:48

ahi va: http://www.erikarubaja.com.ar/abogad...ubinstein.html

pzin · #7 (**permalink**) 18/06/2013, 07:47

Fíjate que el enlace no tiene alto ni ancho, porque realmente no tiene contenido. En lugar de poner la imagen de fondo al contenedor del enlace, lo ideal sería que pusieras algo así:

Código HTML:

Ver original<a href="#ancla">
  <img src="images/top2.gif">
</a>

Así tendrá el tamaño de la imagen.

ErikaR · #8 (**permalink**) 19/06/2013, 10:04

Hola Pzin,

para que valide le faltaba el "alt", asi valida bien:

<div id="anclaabajo" >
<a href="#ancla">
<img src="images/top2.gif" alt="top">
</a>
</div >

Otra pregunta, si quiero este ancla quede fijo abajo, seimpre visible por mas que se escrolee, es una flecha a modo de atajo para que al click vaya al top de la pagina, hago estas pruebas, pero no me funciona:

#anclaabajo{
height:8px;
width:20px; margin-left:750px;
/*margin-bottom:0; z-index:9999; position:static; o position:fixed;*/

como hay que hacerlo?

gracias!
erika

}

pzin · #9 (**permalink**) 19/06/2013, 11:10

Tienes que indicar que la posición sea fija:

Código CSS:

Ver original#anclaabajo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

Así te saldrá abajo a la derecha, a 20 pixeles de ambos bordes.