Foros del Web » Creando para Internet » CSS »

Alinear iconos en la parte inferior de una celda.

Estas en el tema de Alinear iconos en la parte inferior de una celda. en el foro de CSS en Foros del Web. Buenas tardes... Tengo una tarjeta en la que aparece una dirección también pueden aparecer algunos números de teléfono y un enlace web. En la parte ...
  #1 (permalink)  
Antiguo 12/02/2009, 07:26
 
Fecha de Ingreso: octubre-2008
Mensajes: 11
Antigüedad: 9 años, 2 meses
Puntos: 0
Pregunta Alinear iconos en la parte inferior de una celda.

Buenas tardes...

Tengo una tarjeta en la que aparece una dirección también pueden aparecer algunos números de teléfono y un enlace web.

En la parte inferior de la tarjeta, aparecen horizontalmente una serie de iconos. El caso es que cuando la tarjeta no muestra los teléfonos o el enlace web, los iconos se muestran un par de líneas más arriba.

Ejemplo 1:

Nombre
Calle CP – Población (Provincia)
Tfnos: xxx.xxx.xxx
Web: www…..

LINEA DE ICONOS
------------------------------------------------


Ejemplo 2:

Nombre
Calle CP – Población (Provincia)
LINEA DE ICONOS



------------------------------------------------


Ambas líneas de iconos deberían alinearse en la parte inferior de la tarjeta (en este caso representada por la línea discontinua), tal y como se muestra en el ejemplo uno. Observen que en el ejemplo 2 queda un mayor espacio entre la parte inferior de la línea de iconos y la parte inferior de la celda.


Gracias por vuestra ayuda,
Mabel
  #2 (permalink)  
Antiguo 12/02/2009, 08:26
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear iconos en la parte inferior de una celda.

Soluciones hay varias, podrías usar position:absolute, para colocar los íconos, también podrías crear un div que contenga los datos y no los íconos y darle un tamaño explicito a tal div, podrías enseñarnos tu código para poder ayudarte mejor?.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 12/02/2009, 09:51
 
Fecha de Ingreso: octubre-2008
Mensajes: 11
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Alinear iconos en la parte inferior de una celda.

Muchas gracias, Dalvenjha. Aquí tienes el código:

Código PHP:
<td <?php echo $style?>>
    <?php echo $editButton?>
    <?php echo $deleteButton?>
    <?php echo $ico?>
    <?php echo $img?>

     <?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><br>";
    
?>
    




<div class="iconotarj" >
<?php 

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

?>
</div>


<?php 
    
if (HTML_SOBI::newLabel($mySobi15)==true){
    echo 
"<img src='images/new.gif' alt='nuevo' align='left' />";
    }
?>
Saludos,
Mabel
  #4 (permalink)  
Antiguo 12/02/2009, 09:56
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear iconos en la parte inferior de una celda.

Y las CSS? -.-
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 12/02/2009, 14:09
 
Fecha de Ingreso: octubre-2008
Mensajes: 11
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Alinear iconos en la parte inferior de una celda.

Disculpa, Dalvenjha.

Las CSS's las tengo en otro archivo separado.

Ahí van...


/* ESTILO ICONOS TARJETA */
.iconotarj img {
width: 30px;
border: 4px solid #0F7FB1;
padding: 1px;
float: left;
margin-bottom: 0px;
margin: 0px;
vertical-align: sub;

}


/* Rollover sobre el icono*/
.iconotarj img:hover {
border: 4px solid #CD5C5C;
}


Saludos,
Mabel
  #6 (permalink)  
Antiguo 12/02/2009, 14:19
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear iconos en la parte inferior de una celda.

Esteeee, a ver vamos por partes como decía Jack the Ripper, primero el primer código que has puesto es el PHP, pero no el html que se genera, para nosotros es importante saber el código html que se genera, el PHP no importa a la hora de hacer estilos ¿Pq? pq no es lo que presentaremos, y las CSS dan estilo a la presentación.

Segundo, las CSS que están ahí son las de las imágenes si no me equivoco, pero sería necesario que me des las del div que las contiene, mi consejo es que hagas lo sgte:

Tienes un TD que es la tarjeta no?, dentro tienes los items y el div con las imágenes. Pq no englobas los items en un div, asi tienes dos, uno con los items y otro con las imágenes. Luego dependiendo del tamaño de tu TD cambias algunas cosas, por ejemplo podrías crear el div: "itemtarg"

Entonces, digamos que tu TD tiene 70px de alto y tus div de las imagenes, tiene 20 px de alto, lo que harías sería En la hoja de estilo, darle al div "itemtarg" un width de 100%; position:relative y un height fijo de 50px; cosa que 50 + 20 es igual a 70.

De esa manera tu Div que contienes las imágenes JAMÁS se moverá de donde está.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #7 (permalink)  
Antiguo 13/02/2009, 09:37
 
Fecha de Ingreso: octubre-2008
Mensajes: 11
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Alinear iconos en la parte inferior de una celda.

Muchas gracias por tu aporte, Dalvenjha.

Ahora todo se ve bien.

Saludos,
Mabel
  #8 (permalink)  
Antiguo 13/02/2009, 10:09
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear iconos en la parte inferior de una celda.

Ah!!! de nada, y mi karma? xD.

Jajaja, es broma porsiacaso, no vayan a pensar mal...
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
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 23:26.