Foros del Web » Creando para Internet » CSS »

No puedo alinear unos iconos con respecto a otra imagen

 Estas en el tema de No puedo alinear unos iconos con respecto a otra imagen en el foro de CSS en Foros del Web. Hola tengo un problema de como alinear los iconos con respecto a la imagen que esta como fondo de aqui: http://designblogcp-works.blogspot.com/2011/02/afiliados-2.html La imagen del fondo ...
  #1 (permalink)  
Antiguo 28/02/2011, 23:54
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 1 mes
Puntos: 0
No puedo alinear unos iconos con respecto a otra imagen
Hola tengo un problema de como alinear los iconos con respecto a la imagen que esta como fondo de aqui:

http://designblogcp-works.blogspot.com/2011/02/afiliados-2.html

La imagen del fondo y el librito si quedan pero los iconos siempre salen alineados a la izquierda y arriba sin importar donde peguen el codigo.

Ya busque y busque y no doy con nada, y asi llegue a este foro igual ya lei por aqui unos temas pero no encontre nada, alguien me puede ayudar porfavor? gracias.

Este es el codigo que use

Código: 
<div style="position: absolute; left: auto; top: auto; width: 150px; height: 650px;">
<img src="http://1.bp.blogspot.com/-f80Tf_9yvqw/TWwOBFmmFUI/AAAAAAAABJA/pp-XfQ1f8iE/s1600/fondo%2Bde%2Blos%2Bafiliados.png" alt="" align="TOP" border="0" height="650" width="150" />
</div>
<div style="position: absolute; left: auto; top: auto; width: 150px; height: 128px;">
<a title="Afiliados La Elite de Vossed"><img src="http://3.bp.blogspot.com/-TbWa49wz-9M/TWwOBrzKFjI/AAAAAAAABJI/hgwldYNLkkM/s1600/cabecera%2Bde%2Bafiliados.png" alt="" align="TOP" border="0" height="128" width="150" /></a>
</div>
<div style="position: absolute; left: 9px; top: 166px; width: 32px; height: 82px;">
<a href="http://fabulasdevossed.forolatin.com/forum" title="Tu foro ami :D"><img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" /></a>
</div>
<div style="position: absolute; left: 56px; top: 166px; width: width: 32px; height: 82px;">
<a href="http://designblogcp-works.blogspot.com/2011/02/afiliados.html" title="Gibran Odin Chanez"><img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" /></a>
</div>
<div style="position: absolute; left: 103px; top: 166px; width: width: 32px; height: 82px;">
<a href="http://designblogcp-works.blogspot.com/" title="Gibran Odin Chanez"><img oncontextmenu="alert('Ami!! no te vueles las cosas de los demas XD');return false;" onselectstart="alert('Material Protegido');return false;" onkeydown="alert('Material Protegido');return false;" ondragstart="alert('Material Protegido');return false;" src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" /></a>
</div>
<div style="position: absolute; left: 9px; top: 257px; width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 257px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 257px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 9px; top: 348px; width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 348px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 348px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 9px; top: 439px; width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 439px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 439px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="hex8.jpg" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 9px; top: 530px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 530px; width: width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 530px; width: width: 32px; height: 82px;">
<img src="http://3.bp.blogspot.com/_Skt9IqeFCPg/S9cveIvNc1I/AAAAAAAAA6c/a4io_ECl6Pg/s1600/Sin+t%C3%ADtulo-1.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
Es para una seccion de un foro, la de afiliados, cada icono cambiara claro, por el de algun afiliado, solo que llene todos los espacios para probar XD.

Saludos.
  #2 (permalink)  
Antiguo 01/03/2011, 12:12
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: No puedo alinear unos iconos con respecto a otra imagen
Como veo que es otro amante del position:absolute creo que le conviene hacer lo siguiente:
Vaya a este tema: http://www.forosdelweb.com/f53/aport...ml-css-648073/ que está como fijo o importante al inicio de este foro.

En el #1 (o primera entrada) tiene un enlace a la "Guía de migración sin dolor". Pinche en él.
Una vez en dicho documento, vaya a la parte donde explica su autor, Mikmoro, las distintas posiciones y sus particularidades.

Una vez hecho lo anterior, cualquier duda o problema que le surja al intentar aplicar los conocimientos adquiridos, la consulta.
  #3 (permalink)  
Antiguo 01/03/2011, 13:10
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: No puedo alinear unos iconos con respecto a otra imagen
Gracias kseso? !! me sirvio bastante XD me faltaba meter todo eso en una caja de posición relativa:

http://www.araudi.net/migracion/ejemplo_posiciones.html

asi quedo el codigo:

Código: 
<div style="position: relative; left: auto; top: auto; width: 150px; height: 650px;">
<div style="position: absolute; left: 0px; top: 0px; width: 150px; height: 650px;">
<img src="http://1.bp.blogspot.com/-f80Tf_9yvqw/TWwOBFmmFUI/AAAAAAAABJA/pp-XfQ1f8iE/s1600/fondo%2Bde%2Blos%2Bafiliados.png" alt="" align="TOP" border="0" height="650" width="150" />
</div>
<div style="position: absolute; left: 0px; top: 9px; width: 150px; height: 128px;">
<a title="Afiliados La Elite de Vossed"><img src="http://3.bp.blogspot.com/-TbWa49wz-9M/TWwOBrzKFjI/AAAAAAAABJI/hgwldYNLkkM/s1600/cabecera%2Bde%2Bafiliados.png" alt="" align="TOP" border="0" height="128" width="150" /></a>
</div>
<div style="position: absolute; left: 9px; top: 166px; width: 32px; height: 82px;">
<a href="http://fabulasdevossed.forolatin.com/forum" title="Tu foro ami :D"><img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" /></a>
</div>
<div style="position: absolute; left: 56px; top: 166px; height: 82px;">
<a href="http://designblogcp-works.blogspot.com/2011/02/afiliados.html" title="Gibran Odin Chanez"><img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" /></a>
</div>
<div style="position: absolute; left: 103px; top: 166px; height: 82px;">
<a href="http://designblogcp-works.blogspot.com/" title="Gibran Odin Chanez"><img oncontextmenu="alert('Ami!! no te vueles las cosas de los demas XD');return false;" onselectstart="alert('Material Protegido');return false;" onkeydown="alert('Material Protegido');return false;" ondragstart="alert('Material Protegido');return false;" src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" /></a>
</div>
<div style="position: absolute; left: 9px; top: 257px; width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 257px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 257px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 9px; top: 348px; width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 348px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 348px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 9px; top: 439px; width: 32px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 439px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 439px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="hex8.jpg" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 9px; top: 530px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 56px; top: 530px; height: 82px;">
<img src="http://4.bp.blogspot.com/-oWsOczUJu5c/TWwOBwJKV7I/AAAAAAAABJQ/Z8OVOQNkHTI/s1600/SM%2Bafiliaci%25C3%25B3n.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
<div style="position: absolute; left: 103px; top: 530px; height: 82px;">
<img src="http://3.bp.blogspot.com/_Skt9IqeFCPg/S9cveIvNc1I/AAAAAAAAA6c/a4io_ECl6Pg/s1600/Sin+t%C3%ADtulo-1.png" alt="" align="TOP" border="0" height="82" width="38" />
</div>
</div>
y ya quedo en su posicion todo, ahora solo faltan detallitos:

http://designblogcp-works.blogspot.com/2011/02/afiliados-2.html

Saludos.

Etiquetas: alinear, iconos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:39.