Foros del Web » Creando para Internet » CSS »

Iconos alineados en la parte inferior de una tarjeta

Estas en el tema de Iconos alineados en la parte inferior de una tarjeta en el foro de CSS en Foros del Web. Hola a todos Utilizo los siguientes estilos para dar formato a una tarjeta. La tarjeta lleva 5 iconos en la parte inferior de la misma ...
  #1 (permalink)  
Antiguo 23/04/2009, 09:43
 
Fecha de Ingreso: abril-2008
Mensajes: 81
Antigüedad: 15 años, 11 meses
Puntos: 0
Pregunta Iconos alineados en la parte inferior de una tarjeta

Hola a todos

Utilizo los siguientes estilos para dar formato a una tarjeta. La tarjeta lleva 5 iconos en la parte inferior de la misma (bottom).

Código PHP:
/* ESTILO ICONOS TARJETA */
.iconotarj img {
     
width30px;
     
border3px solid #646565;
     
padding1px;
     
margin1px;
     
floatright;
}

/* Rollover sobre el icono*/    
.iconotarj img:hover {
      
border3px solid #CD5C5C;

Mi problema es el siguiente: en algunas tarjetas, los iconos me aparecen en la parte inferior de la tarjeta ordenados de derecha a izquierda, que es tal y como quiero que aparezcan. Sin embargo, en otras tarjetas, me aparecen ordenados de derecha izquierta (correcto) pero no en la parte inferior, sino más arriba... incluso en el centro.

Los iconos están dentro de un <div>, así que he probado de meter tota la tarjeta en otro <div> para darle posicionamiento relativo, luego le doy posicionamiento absoluto al <div> de los iconos... per no me funciona... se me desmadran.

¿Alguna pista?

Muchas gracia,
Luisa Javaloyes
  #2 (permalink)  
Antiguo 23/04/2009, 09:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Iconos alineados en la parte inferior de una tarjeta

Y que tiene la clase iconotarj, podrías ponerlo?
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 23/04/2009, 13:45
 
Fecha de Ingreso: abril-2008
Mensajes: 81
Antigüedad: 15 años, 11 meses
Puntos: 0
Respuesta: Iconos alineados en la parte inferior de una tarjeta

Gracias por contestar


Esa clase es la que contiene los iconos de la tarjeta.

Mira el código de arriba

.iconotarj img {

ICONOS DE LA TARJETA
}
  #4 (permalink)  
Antiguo 23/04/2009, 13:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Iconos alineados en la parte inferior de una tarjeta

me refería a que es lo que contiene a todo, o cual es el marco de la tarjeta, ya que si solo utilizas esas 2 que muestras no quedan dependiendo de nada, cuando declaras de esa manera quiere decir que tienes un contenedor que se llama iconotarj y que todas las imágenes que estén dentro que sean insertadas en el HTML tomarán los estilos que mostraste anteriormente:

Código:
<div class="iconotarj">
   aquí las imágenes con los estilos que nos mostraste anteriormente
</div>
solo así lo harán, no se si me explico?
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 24/04/2009, 02:49
 
Fecha de Ingreso: abril-2008
Mensajes: 81
Antigüedad: 15 años, 11 meses
Puntos: 0
Respuesta: Iconos alineados en la parte inferior de una tarjeta

Aquí tienes el código que utilizo para armar la tarjeta


Código:
<!-- Aquí comienza la tarjeta -->

<td <?php echo $style; ?>>

<div>
	<?php echo $editButton; ?>
	<?php echo $deleteButton; ?>
	<?php echo $ico; ?>


 	<?php echo $title; 
		echo $fieldsObjects['field_street']->data."<br>";
		echo $fieldsObjects['field_postcode']->data." - "; 
		echo $fieldsObjects['field_county']->data." ("; 
		echo $fieldsObjects['field_provincia']->data.")"; 
		echo "<br>";
		echo "Tfnos: ";
		echo $fieldsObjects['field_tfno1']->data; 
		/*Si hay dos teléfonos, mostramos la barra*/	
			if ($fieldsObjects['field_tfno2']->data) {
				echo " / "; 
			}
		echo $fieldsObjects['field_tfno2']->data; 
		echo "<br>";
		
		if ($fieldsObjects['field_website']->data){
			echo '<a href="'.$fieldsObjects['field_website']->data.'" target="_blank" >
			Visitar Web</a>'; 
		}
		
		
		echo "<br>";
	?>
	
</div>



	
<div class="iconotarj" >
<?php 

/*Mostramos los iconos de las categorías*/
foreach (HTML_TARJ::getMyCategories($myTarj) as $category) {
	$catlink = "<a href=\"";
	$catlink .= $category['href'];
	$catlink .= "\" >";
	$catlink .= $category['icon'];
	$catlink .= "</a>";
	echo $catlink;
	
}
	
?>
</div>


		

<!-- Aquí termina la Tarjeta -->

<!-- No borrar estas líneas -->
</td><?php
}
?>
Gracias por tu ayuda

Luisa
  #6 (permalink)  
Antiguo 24/04/2009, 07:39
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Iconos alineados en la parte inferior de una tarjeta

vamos a hacer esto, tendrías que tener la maqueta de la tarjeta primero que nada, y eso es lo que te he estado pidiendo que coloques, no como la llenas con php, entonces lo que quiero ver es la maqueta ya que lo que tu presentas es un problema de css, por ejemplo cuanto mide de ancho y alto toda la tarjeta y cosas así.
__________________
WFC
codigo82
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 05:50.