Alinear iconos en la parte inferior de una celda.

[Mabelweb]

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

[Dalvenjha]

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!!

[Mabelweb]

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($mySobi, 15)==true){
    echo "<img src='images/new.gif' alt='nuevo' align='left' />";
    }
?>   

Saludos,
Mabel

[Dalvenjha]

Y las CSS? -.-

[Mabelweb]

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

[Dalvenjha]

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!!

[Mabelweb]

Muchas gracias por tu aporte, Dalvenjha.

Ahora todo se ve bien.

Saludos,
Mabel

[Dalvenjha]

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

Jajaja, es broma porsiacaso, no vayan a pensar mal...