Foros del Web » Creando para Internet » CSS »

Iconos en un div

Estas en el tema de Iconos en un div en el foro de CSS en Foros del Web. Hola chicos tengo dos div dentro de un contenedor, y uno como float:right, el caso es que en el otro div quiero situar los iconos ...
  #1 (permalink)  
Antiguo 28/08/2010, 11:12
 
Fecha de Ingreso: enero-2010
Mensajes: 46
Antigüedad: 7 años, 10 meses
Puntos: 0
Iconos en un div

Hola chicos tengo dos div dentro de un contenedor, y uno como float:right, el caso es que en el otro div quiero situar los iconos en la derecha para animar un poco la web,y la pregunta viene en que propiedad usais vosotros para unir 4 iconos (png) verticalmente en un div.

Muchísimas gracias.
  #2 (permalink)  
Antiguo 28/08/2010, 17:29
Avatar de iwexcoder  
Fecha de Ingreso: mayo-2009
Ubicación: San Carlos de Bariloche
Mensajes: 404
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: Iconos en un div

haber...primero creas len html la capa con las imágenes de los iconos, la idea es que los iconos tengan la mismo valor de width para que queden bien alineados...
Código HTML:
Ver original
  1. <div id="iconos">
  2. <img src="image1.jpg" />
  3. <img src="image2.jpg" />
  4. <img src="image3.jpg" />
  5. <img src="image4.jpg" />
  6. </div>


luego el css...


Código CSS:
Ver original
  1. #iconos {
  2.      position:relative
  3.      float:left;
  4.      width:100px;    //aca pones el ancho de las imagenes
  5.      height:auto;
  6. }
  7.  
  8. #iconos img {
  9.    width:100px;
  10.    float:left;
  11. }
__________________
iWexCoder.com - Programación - Desarrollo Movil - Programación Web www.iwexcoder.com
  #3 (permalink)  
Antiguo 31/08/2010, 17:30
 
Fecha de Ingreso: enero-2010
Mensajes: 46
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Iconos en un div

Hola iwexcoder, muchas gracias por tu código, aunque me fallan los div, parece como que se superponen te dejo el codigo por si veis algo inusual.


Código PHP:
Ver original
  1. <div id="iconos">
  2.  
  3.    <img src="images/ico-new.gif" />
  4.  
  5.    <img src="images/ico-edit.gif" />
  6.  
  7.    <img src="images/ico-del.gif" />
  8.  
  9.    <img src="images/ico-filter.gif" />
  10.  
  11. </div>
  12.  
  13. <div class=cabecera>
  14.  
  15. <table width="100%" border="1" cellspacing="0" cellpadding="4" bordercolor="#CCCCCC" align="center">
  16.  
  17.   <tr>
  18.  
  19.     <td colspan="4" bgcolor="#4b5d81">
  20.  
  21.       <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFFF">.:
  22.  
  23.         Gesti&oacute;n Clientes :.</font></b></font><br>
  24.  
  25.         <a href="aut_logout.php">LogOut (salir)</a>
  26.  
  27.         </div>
  28.  
  29.     </td>
  30.  
  31.   </tr>
  32.  
  33.   <tr bgcolor="#ced3dc">
  34.  
  35.     <td width="14%">
  36.  
  37.       <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">ID
  38.  
  39.         </font></b></div>
  40.  
  41.     </td>
  42.  
  43.     <td width="30%">
  44.  
  45.       <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Nombre de empresa
  46.  
  47.         </font></b></div>
  48.  
  49.     </td>
  50.  
  51.     <td width="32%" bgcolor="#ced3dc">
  52.  
  53.     <div align="center"><font color="#FFFFFF"><a href="$pag?ver=$redir&accion=nuevo">Registrar usuario</a></font></div></td>
  54.  
  55.         </font></b></div>
  56.  
  57. </td>
  58.  
  59.     <td width="30%">
  60.  
  61.       <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">    <A HREF="javascript:popup('http://localhost/creacontrato.php',400,300)">Crear contrato</A>
  62.  
  63.        </font></b></div>
  64.  
  65.   </tr>


y aquí el css:


Código CSS:
Ver original
  1. .cabecera{
  2. overflow: auto;
  3. width: 85%;
  4. height: 85%;
  5. float: right;
  6. }
  7. #iconos {
  8. position:relative
  9. float:left;
  10. width:100px;    //aca pones el ancho de las imagenes
  11. height:auto;
  12. }
  13. #iconos img {
  14. width:100px;
  15. float:left;
  16. }

Gracias, y un saludo!

PD: Sabeis si con esos 100pix puede que me este comiendo, el 85 del otro contenedor?.
  #4 (permalink)  
Antiguo 31/08/2010, 17:52
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Iconos en un div

El codigo que copiaste y pegaste no está corregido. Fijate que le falta un ";". Además, vos pedías alinear los íconos a la derecha y el CSS que te propuso iwexcoder va para la izq.

Probá:
Cita:
#iconos {
float: right;
}
#iconos img {
width:100px;
display:block;
}
El display: block es mi propuesta para que las imágenes vayan una abajo de la otra.

Y ya que estás en el foro de CSS... te recomiendo que te libres de estas etiquetas:

<font color="#FFFFFF">

<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">

También de las propiedades de la tabla:

<table width="100%" border="1" cellspacing="0" cellpadding="4" bordercolor="#CCCCCC" align="center">

En fin. La idea es que te pases a CSS, y no uses en lo posible estilos inline :o)
  #5 (permalink)  
Antiguo 31/08/2010, 17:58
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Iconos en un div

La verdad no te entiendo que clase de animacion quieres darle a esas imagenes (iconos).

Explicate un poco mejor sobre como deseas que salga o mejor aun postea una imagen.

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #6 (permalink)  
Antiguo 31/08/2010, 18:18
 
Fecha de Ingreso: enero-2010
Mensajes: 46
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Iconos en un div

Sigue sin alinearmelo como yo quiero, os adjunto una imagen, para que lo veais:
http://img835.imageshack.us/i/pantallazo1r.png/ la idea es que estos queden alineados verticalmente a la izq de tabla.
  #7 (permalink)  
Antiguo 31/08/2010, 18:31
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Iconos en un div

lo de la imagen lo haces poniendolos uno delante de otro sin ningun estilo o en todo caso con un float: left.

quieres que se vea como esta en la imagen o ya tienes lo que esta en la imagen y quieres otra cosa ???

Espero tu respuesta.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #8 (permalink)  
Antiguo 31/08/2010, 18:34
 
Fecha de Ingreso: enero-2010
Mensajes: 46
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Iconos en un div

MUy buenas, ahora mismo tengo lo que te he mostrado en la imagen y lo que deseo es que estos iconos se situen lateralmente a la tabla en su parte izquierda, las he puesto como float pero siguen quedando así, espero que me entiendas.

Un saludo.
  #9 (permalink)  
Antiguo 31/08/2010, 18:55
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Iconos en un div

Esto me va perfecto:

#iconos img {display:block}

El tema es que tu div con información no le está dando espacio al div con íconos. Probá:

#iconos {float:left; width:90px}
#contenidos {float:left; width:auto}

Es decir, jugá con los anchos de los divs.
  #10 (permalink)  
Antiguo 31/08/2010, 19:02
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Iconos en un div

sigo sin entenderte mi estimado....

no puedes alterar esa imagen con un softwate o inclusive con paint y mostrar como deseas....

Te quiero ayudar pero no entiendo como deseas que aparesca :S
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #11 (permalink)  
Antiguo 31/08/2010, 19:21
 
Fecha de Ingreso: enero-2010
Mensajes: 46
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Iconos en un div

Hola masterojitos, lo unico que quiero es situar el div que contienes los iconos a la izquierda de la tabla. y que los iconos que son 4 se situen verticalmente como por ejemplo el boton nuevo, edicion, eliminar,filtrar para que luego puedan interactuar con la tabla.
  #12 (permalink)  
Antiguo 31/08/2010, 22:57
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Iconos en un div

espero haya entendido bien... si es asi.... por que no pones las imagenes y al final de cada una un salto de linea (<br />)... asi estarian en forma vertical no ??

sino podrias hacer c omo te dije con float: left; y con clear:both;
De esta forma estaria alineado a la izquierda y uno debajo de otro.

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog

Etiquetas: 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




La zona horaria es GMT -6. Ahora son las 12:10.