Foros del Web » Creando para Internet » CSS »

Tamaño de la caja y texto

Estas en el tema de Tamaño de la caja y texto en el foro de CSS en Foros del Web. Muy buenas :) Tengo un pequeño problemilla que descubrí hoy xD. Sucede que tengo una caja con una imagen, nombre, número de votos y la ...
  #1 (permalink)  
Antiguo 15/09/2010, 03:02
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
De acuerdo Tamaño de la caja y texto

Muy buenas :)

Tengo un pequeño problemilla que descubrí hoy xD.
Sucede que tengo una caja con una imagen, nombre, número de votos y la opción de votar. El problema que tengo es que cuando el nombre de la caja, por llamarlo así, es más grande que la caja en si el texto baja, haciendo que la caja sea más grande, y como debajo de esta hay otra caja igual, esta bajaría y se descolocaría por el tamaño del texto.

Os pongo una imagen de ejemplo:


http://i55.tinypic.com/wk0bwm.png

Os dejo el código:

CSS

Código CSS:
Ver original
  1. .contenidoLista{
  2.     width:650px;
  3.     min-height:570px;
  4. }
  5.  
  6.     .nombreUnico{
  7.         font-size:12px;
  8.         padding:10px 0 0 5px;
  9.         font-weight:bold;
  10.         line-height:normal;
  11.     }
  12.  
  13.     .contenidoMini{
  14.         width:200px;
  15.         height:225px;
  16.         margin:5px 5px 20px 5px;
  17.         float:left;
  18.         display:block;
  19.     }
  20.    
  21.     .contenidoMini img{
  22.         margin:-6px 0 0 -6px;
  23.         border:1px solid #ff0000;
  24.         padding:0px;
  25.     }
  26.    
  27.     .espaciado{
  28.         margin-top:5px;
  29.     }
  30.  
  31.     .botonvotos{
  32.         color:#666666;
  33.         font-weight:bold;
  34.         padding:9px 0 0 0px;
  35.         text-align:center;
  36.     }
  37.    
  38.     .botonvotos input{
  39.         margin-right:3px;
  40.         margin-left:3px;
  41.         padding:0px;
  42.     }
  43.    
  44.     .fondoVotos{
  45.         background-image:url(images/fondo-votos.jpg);
  46.         background-repeat:no-repeat;
  47.         background-position:center;
  48.         height:33px;
  49.         margin-top:15px;
  50.     }
  51.    
  52.    
  53. .votarOk{
  54.     width:100%;
  55.     padding:20px;
  56.     border:1px dotted #3366FF;
  57.     background-color:#CFF;
  58.     text-align:center;
  59.     font-size:24px;
  60.     margin-top:15px;
  61. }

PHP

Código PHP:
# Guarda en una variabla la ID única de cada lista. Para poder identificarla. 
    $numLista = $_REQUEST['verlista'];
    
    ?>
    
    <form action="#" method="post" name="votarlista">
    
    <?php
    
# Selecciona todo de wp_lista cuando lista_id_propia es igual a $numlista que es la id única de cada sección.
    
$selectContenidoLista mysql_query("SELECT * FROM wp_lista WHERE lista_id_propia='$numLista' ");
    
$consultarListanoRepeat mysql_fetch_assoc($selectContenidoLista);
    
     
?>
     <h2><?php echo $consultarListanoRepeat['lista_categoria']; ?> </h2>
     <div class="contenidoLista">
          <div class="textoAzul margintop">
            <?php echo $consultarListanoRepeat['lista_nombreunico']; ?>    
        </div>
        <div class="textoListas">
            <?php echo $consultarListanoRepeat['lista_descripcion']; ?>
        </div>
        
    <?php
    
    $contenidoMiniR 
mysql_query("SELECT * FROM wp_lista WHERE lista_id_propia='$numLista' ORDER BY lista_votos DESC");
    
# Esto sería la repitición (poner cajas con imagen, nombre y votos )
    
$numeracion 1;
    while(
$conLista mysql_fetch_assoc($contenidoMiniR)){
        
    
    
//    echo $conLista['lista_nombre']." + ";
    
            // Cuenta cuantos registros hay en cada Lista para 
            // más adelante sumarle 1 al name del input radio
            
$queryContar "SELECT COUNT(*) FROM wp_lista WHERE lista_id_propia='$numLista' ";
            
$contar mysql_query($queryContar);
            
$contarPrint mysql_fetch_array($contar);
            
$numeroCajaLista $contarPrint[0];
    
    
        
?>
            <div class="contenidoMini">
                <img src="http://<?php echo $conLista['lista_imagen']; ?>" width='199' height='133' alt="<?php echo $conLista['lista_nombre']; ?>" />
                <div class="nombreUnico">
                
                    <?php 
                    
echo $numeracion.". ";
                    echo 
$conLista['lista_nombre']; 
                    
?>
                    
                </div>
                <div class="textogris espaciado">
                    <?php
                    
# Gestión de puntos que tiene
                    
echo "(".$conLista['lista_votos']." Puntos)";
                    
?>
                </div>
                <div class="fondoVotos">                
                    <div class="botonvotos">
                    <?php
                    
                        
// Imprime los 5 votones input radio.
                        
$numRadio 1;
                        while(
$numRadio <= 5){
                            
?>
                            <input type="radio" name="radio<?php echo $numeracion?>" value="<?php echo $numRadio?>" /><?php echo $numRadio?>
                            <?php
                            
                            $numRadio
++;
                        } 
// Cierra while numRadio
                        
                    
?>
                    </div>
                </div>
            </div>
            
        <?php
    $numeracion
++;    
    }
    
    
?>
    </div>
Muchas gracias :) !
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 15/09/2010, 10:47
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Tamaño de la caja y texto

Ya veo... pero ¿que tipo de solucion buscas?

se me ocurre varias opciones
a) que cambies el tamaño del texto
b) que uses "overflow:hidden" que hace que el navegador oculte todos los contenidos que se salen de "la caja del texto"
c)"overflow: scroll" o "overflow: auto", para que aparezca una barra de desplazamiento en "la caja del texto" o en la caja que contiene el resto de elementos
d) que aumentes el tamaño de la "caja" que contiene los elementos
  #3 (permalink)  
Antiguo 15/09/2010, 11:02
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Tamaño de la caja y texto

Buenas :)

Gracias por tu respuesta.
Principalmente lo que busco es que cuando el texto sea más grande bajen las 3 cajas y asi se alinee y no quede desigualada :)

Un saludo y gracias
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #4 (permalink)  
Antiguo 15/09/2010, 11:18
Avatar de vertigo112  
Fecha de Ingreso: agosto-2006
Ubicación: Estado de Mexico
Mensajes: 25
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Tamaño de la caja y texto

Tienes un link a esa pagina en la Red y te ayudo a solucionar ese problema lo que pueda faltarte seria la forma de saber maquetarlo bien... si no dejame te hago un ejemplo de como puedes aprender a hacerlo de una forma muy facil......
  #5 (permalink)  
Antiguo 15/09/2010, 12:25
Avatar de vertigo112  
Fecha de Ingreso: agosto-2006
Ubicación: Estado de Mexico
Mensajes: 25
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Tamaño de la caja y texto

Intentava hacer un manual para explicarte todo ese rollo de la maquetacion pero por el trabajo que se me ha acomulado, ya que tengo algunos clientes que no pueden esperar te dejo aqui abajo unos tips rapidos y unas imagenes de lo que deberias empezar a practicar asi como el codigo de tu ejemplo maquetado, usarlo es muy facil y te daras cuenta que hacerlo resultara:

bien lo primero que debes hacer para entender este rollo de la maquetacion es pensar en unos cuadros como cajas que encuadren el contenido que necesites no importa que lleve codigo embebido como el PHP, ASP JSP etc. para todos seria igual hablando de embeberlos en un XHTML, por ejemplo para tu ejemplolo que me dibuje en un PAINT fue la estructura asi:



es tan sencillo como eso y de ahi ya empiensas ha generar la estructura en tu XHTML el resultado de eso seria esto:

Código HTML:
<div class="Cont-gral">
	<div class="capa-escalar">
    	<div class="contenedor">CONTENEDOR</div>
		<div class="contenedor">CONTENEDOR</div>            	
		<div class="contenedor">CONTENEDOR</div>        
    </div>
	<div class="capa-escalar">    	
    	<div class="contenedor">CONTENEDOR</div>
        <div class="contenedor">CONTENEDOR</div>
        <div class="contenedor">CONTENEDOR</div>
    </div>
	<div class="capa-escalar">    	
    	<div class="contenedor">
        	<span class="inter-imagen">IMG</span>
        	<span class="inter-texto">texto</span>
           	<span class="inter-calificacion">votacion</span>
        </div>
        <div class="contenedor">CONTENEDOR</div>
        <div class="contenedor">CONTENEDOR</div>
    </div>        
</div> 


y la maquetacion de ello estaria ya en el CSS lo que tienes que tomar encuenta es que debes comenzar a pensar de la parte superior osea el primer DIV y de ahi hacia bajo pero antes pasando por cada uno de sus contenedor osea su Interior.

por ejemplo en la imagen lo primero es definir el ancho del envoltorio mayor en este caso 850px de ahi voy a los interiores pongo un padding de 10px osea que su contenido se encontrara 10px al interior en todos las partes superior inferior derecha e izquierda,,,,,

y asi con los demas,,

ahora para cuando llegue a los contenedores de informacion, esos los hago flotar hacia la izquierda pero eso provoca que todo a su izquierad flote hacia el, asi que por eso lo tenia dentro de un DIV mas y a ese DIV simplemente le coloco el overflow: auto, que quiere decir que tome su altura y anchura en automatico de lo que se encuentre dentro,,,,

ahora para que esos contenedores tengan las misma dimenciones lo unico que hago es hacer unas pequeñas sumitas para dar con la anchura exacta por ejemplo le voy restando al ANCHO [WIDTH] del envoltorio mayor todos los margenes, y padding de sus interiores y eso me dara como resultado el tamaño que sobra para los contenedores ya ese valor lo divido entre el numero de CONTENEDORES en este caso 3 asi madaria el exacta de cada contenedor para que no se muevan hacia abajo,, si quiero darles un margen se lo agrego y le resto eso tambien,,,

si asigno un marge a los contenedores estos se aplicaran a los 3 asi que aplico una simple regla para que solo lo aplique a todos menos el primero....

el resultado seria este CSS
Código CSS:
Ver original
  1. .Cont-gral{
  2.         border: 1px solid red;
  3.         width: 850px;
  4.         margin: 0 auto;
  5.         padding: 10px;
  6.     }
  7.         .capa-escalar{
  8.             border: 1px solid red;     
  9.             padding: 5px;
  10.             overflow: auto;
  11.             margin-top: 10px;          
  12.         }
  13.         DIV > .capa-escalar:first-child{
  14.             margin-top: 0;
  15.         }
  16.             .contenedor{
  17.                 border: 1px solid red;         
  18.                 padding: 5px;
  19.                 float: left;
  20.                 width: 256px;
  21.                 margin-left: 17px;
  22.             }          
  23.             DIV > .contenedor:first-child{
  24.                 margin-left: 0;        
  25.             }                  
  26.                 span.inter-imagen{
  27.                     border: 1px solid red;             
  28.                     display: block;
  29.                     border: 1px solid red;
  30.                     margin-bottom: 5px;
  31.                 }
  32.                 span.inter-texto{
  33.                     border: 1px solid red;             
  34.                     display: block;
  35.                     border: 1px solid red;
  36.                     margin-bottom: 5px;            
  37.                 }
  38.                 span.inter-calificacion{
  39.                     border: 1px solid red;             
  40.                     display: block;
  41.                     border: 1px solid red;
  42.                     margin-bottom: 5px;                
  43.                 }


el resultado de eso lo ejecute y dio esto:



eso ya lo puedes usar y no importa que el texto creesca los contenedores escalares creceran y no se vera eso que se ve en tu imagen flotante....

un saludo desde Mexico

[URL="http://www.macrowebdigital.com"]www.macrowebdigital.com[/URL]
  #6 (permalink)  
Antiguo 15/09/2010, 12:41
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Tamaño de la caja y texto

Muchas gracias me pondré con ello. Aunque el problema que veo que hay es con php porque el WHILE genera la caja en si dependiendo de el contenido de la BD :)

Aun así siempre está bien tener esta ayuda :)

Muchísimas gracias maestro ^^ !
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #7 (permalink)  
Antiguo 15/09/2010, 17:12
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Tamaño de la caja y texto

ummm???
Se me ocurre una cosa pero no se si funcionara.
me imagino que te genera las "cajas" dentro de un div contenedor, tal vez usando "display: table" en ese contenedor y asignando "display: table-cell" a la "caja" de texto... es una idea. Lo que conseguirias es que el div se comporte como una tabla con celdas y estas si que se alinean solas.

Es una propiedad css2.1 y no deberias tener muchos problemas (... con IE casi seguro que si...) todo es probar
  #8 (permalink)  
Antiguo 16/09/2010, 03:00
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
De acuerdo Respuesta: Tamaño de la caja y texto

Cita:
Iniciado por minvallado Ver Mensaje
ummm???
Se me ocurre una cosa pero no se si funcionara.
me imagino que te genera las "cajas" dentro de un div contenedor, tal vez usando "display: table" en ese contenedor y asignando "display: table-cell" a la "caja" de texto... es una idea. Lo que conseguirias es que el div se comporte como una tabla con celdas y estas si que se alinean solas.

Es una propiedad css2.1 y no deberias tener muchos problemas (... con IE casi seguro que si...) todo es probar
Exacto, hay un div contenedor y luego están los divs de cada opción, en realidad sería uno multiplicado X veces por el WHILE a si que pruebo y te digo :)

Gracias, un saludo !!

EDITADO -----------------

He puesto como me has dicho y ahora no se esconde debajo del menú si no que lo baja, pero aun así no se alinean los demás :(


http://i54.tinypic.com/jzabeu.png

Vaya caso... xD
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Última edición por Jask; 16/09/2010 a las 03:43

Etiquetas: caja, desproporción, tamaño, fuentes
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 20:45.