Iconos en un div

[xiskoct]

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.

[iwexcoder]

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:

<div id="iconos">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
 

luego el css...

Código CSS:

#iconos {
     position:relative
     float:left;
     width:100px;    //aca pones el ancho de las imagenes
     height:auto;
}
 
#iconos img {
   width:100px;
   float:left;
}
 

[xiskoct]

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:

<div id="iconos">
 
   <img src="images/ico-new.gif" />
 
   <img src="images/ico-edit.gif" />
 
   <img src="images/ico-del.gif" />
 
   <img src="images/ico-filter.gif" />
 
</div>
 
<div class=cabecera>
 
<table width="100%" border="1" cellspacing="0" cellpadding="4" bordercolor="#CCCCCC" align="center">
 
  <tr>
 
    <td colspan="4" bgcolor="#4b5d81">
 
      <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><font color="#FFFFFF">.:
 
        Gesti&oacute;n Clientes :.</font></b></font><br>
 
        <a href="aut_logout.php">LogOut (salir)</a>
 
        </div>
 
    </td>
 
  </tr>
 
  <tr bgcolor="#ced3dc">
 
    <td width="14%">
 
      <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">ID
 
        </font></b></div>
 
    </td>
 
    <td width="30%">
 
      <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Nombre de empresa
 
        </font></b></div>
 
    </td>
 
    <td width="32%" bgcolor="#ced3dc">
 
    <div align="center"><font color="#FFFFFF"><a href="$pag?ver=$redir&accion=nuevo">Registrar usuario</a></font></div></td>
 
        </font></b></div>
 
</td>
 
    <td width="30%">
 
      <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>
 
       </font></b></div>
 
  </tr>
 

y aquí el css:

Código CSS:

.cabecera{
overflow: auto;
width: 85%; 
height: 85%; 
float: right;
}
#iconos {
position:relative
float:left;
width:100px;    //aca pones el ancho de las imagenes
height:auto;
}
#iconos img {
width:100px;
float:left;
}
 

Gracias, y un saludo!

PD: Sabeis si con esos 100pix puede que me este comiendo, el 85 del otro contenedor?.

[mayid]

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

#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)

[masterojitos]

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

[xiskoct]

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.

[masterojitos]

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.

[xiskoct]

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.

[mayid]

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.

[masterojitos]

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

[xiskoct]

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.

[masterojitos]

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