Problemas de height con medidas en porcentajes

Hola. ¡Solucioné el problema (y generé otro XD)!

Quité el height del botón y puse height:100%; en la imagen y en el recuadro negro, como la imagen tiene la proporción correcta ahora se escala todo a medida :D
Menos la tipografía y los padding que quedan igual y claro hay un momento que se sale la tipografía del recuadro (bueno en realidad se oculta dentro de él).
¿Existe manera de hacer que el tamaño de la tipo se escale?

Si no pondré los textos en un .png transparente y a correr que tampoco es el menú principal, pero ya que estamos estaría bien aprender ha hacerlo bien hecho.

Y ya que estamos... ¿Alguien sabe si se puede hacer solo con CSS que una lista sea de una, dos o más columnas segun el ancho de pantalla?

Gracias! ;)

Hola

Mira te pego el codigo que tengo:

HTML:
<ul class="botonsPortafoli">
<li>
<a href="" target="_self" title="">
<img src="imgs/foto.jpg"></img>
</a>
<div class="dreta">
<p>
<h1>Títol</h1>
<p>Subtítol</p>
</p>
</div>
</li>
<li>
<a href="" target="_self" title="">
<img src="imgs/foto.jpg"></img>
</a>
<div class="dreta">
<p>
<h1>Títol</h1>
<p>Subtítol</p>
</p>
</div>
</li>
</ul>


CSS:
ul.botonsPortafoli {
list-style:none;
margin:0 auto 2.5% auto;
padding:0;
width:100%;
/*height:12em;*/
}
ul.botonsPortafoli li {
overflow:hidden;
position:relative;
display:inline-block;
margin:0;
padding:0;
width:47%;
height:12em;
color:white;
background:black;
}
ul.botonsPortafoli li div.dreta {
position:absolute;
top:0;
left:50%;
width:50%;
height:12em;
background:#000000;
}
ul.botonsPortafoli li div p {
display:block;
margin:0;
padding:0;
text-align:left;
}
ul.botonsPortafoli li div h1 {
margin:0;
margin-top:4em;
margin-left:2em;
padding:0;
font-size:150%;
font-weight:bold;
color:white;
text-transform:uppercase;
}
ul.botonsPortafoli li div p {
margin:0;
margin-top:0;
margin-left:3em;
padding:0;
font-size:100%;
font-weight:bold;
color:#E2017B;
text-transform:uppercase;
}
ul.botonsPortafoli li:first-child {
margin-left:0;
margin-right:2%;
}
ul.botonsPortafoli li:last-child {
margin-left:2%;
margin-right:0;
}


El problema que tengo realmente es que cuando escalo la pantalla, el ancho se adapta, pero claro, el alto no.

Gracies.
Llegiré els teus enllaços ;)

Si todo lo haces adaptable, pierdes el control sobre las proporciones, porque no puedes (ni, en principio, debes) controlar cómo será la ventana del navegador del usuario. Entendiendo que normalmente estará según unos patrones más o menos estandarizados de resolución de pantalla, está claro.

No estoy del todo seguro, ni antes ni ahora, de comprender la pregunta, pero te he echado todo el rollo porque entiendo que el problema viene por aquí. Si quieres definir porcentualmente un height, de forma que el cociente del porcentaje tenga una relación fija con otro valor (en ese caso, el del width, 5:3 dijiste), tienes que poder atenerte a una medida fija. Es decir, primero tendrías que definir seguramente en px o en em el height del elemento contenedor, para luego poder aplicar al elemento contenido un height con un valor porcentaje de aquél.

Por ello, la cosa es jugar con una mezcla ingeniosa de dónde pones valores porcentuales y dónde absolutos para conseguir lo que quieres. Igual si adjuntas el código que estás intentando usar, otros compañeros o yo te podremos ayudar más. No sé si me explico o si te he entendido, pero lo he intentado ;). Ah, y como veo que hablas catalán, te recomiendo muy pero que muy encarecidamente que te estudies eso http://www.dense13.com/wec/curscss/ porque ahí están muy bien explicados esos temas del css box model y cómo se calculan las medidas. Es un poco denso pero, aun cuando parezca paradoja, muy didáctico.

Raimon

PS: Y sí, deberíamos abrir otro hilo para lo de Joomla vs. loquesea. Yo particularmente no te recomendaría aprender a usar/construir/maquetar CMSs con Joomla, pero ahora mismo no te lo sabría argumentar muy bien: hace demasiado tiempo que estoy algo desconectado tanto del que más conozco, Wordpress, como de otras cosillas que he probado más puntualmente, como Drupal y Joomla. En cuanto a esos últimos, independientemente de que te gusten más o menos, son sistemas más complejos, por lo que en general la maquetación también es más compleja. Pero esta afirmación es opinable y matizable, con lo que el debate para otro hilo está servido. De hecho ya existe alguno antiguo, por si quieres repasar o preguntar ahí.

Gracias por responder Raimon.

Primero de todo me entra la curiosidad sobre lo de Joomla, ¿porque tu crees que no se deba utilizar Joomla? Quizas deberíamos abrir otro hilo para debatir eso, pero es algo que me tiene muy curioso... La verdad, quería aprender a dominar un CMS y antes de decidirme entre Joomla o Wordpress estuve leyendo y hablando con gente que entendía sobre este tema y al final la balanza se decanto ampliamente hacía Joomla... Pero también me he dado cuenta que el amor/odio entre usuaríos de J/WP es inmenso...

Sobre el tema que nos ha traído aquí, que como dices se muestre en WP, J! o lo que sea no influye a mi pregunta. No se si no he sabido hacer la pregunta o es que no he entendido lo que tu me has explicado (100 veces 100px son 10000px, ¿10000px de ancho?).
Así pues para explicarme mejor adjunto una imagen:

Yo quiero hacer un menú en filas de 2 botones, defino el ancho como width:47%; para que se adapte a la pantalla.
¿Para que tenga la misma proporción que en la imagen como debería definir la altura? Porque si lo hago sobre un porcentaje, este se mide por el 100% del contenedor de lo botones que ese también tendría que ser adaptatble.

Gracias.

Hola,

Igual que le decíamos a indendient que no usara Dreamweaver, yo te aconsejaría no usar Joomla.

De todas formas, tampoco quiero liarte más; seguramente en Joomla lo resolverías igual que en otros CMS. El tema de los porcentajes no es que sea muy difícil... pero tiene su miguilla.

Además desde el punto de vista del CSS el height no tiene exactamente el mismo comportamiento que el width (como sí que la tendría si estuvieras trabajando qué se yo, sobre papel o madera, así en general) puesto que los documentos web suelen desarrollarse por defecto en sentido vertical, y eso tiene algunas implicaciones que afectan como se procesa el height. No lo tengo bien contrastado y no te lo sabría explicar mejor que eso.

Pero volviendo al tema, la idea es que cuando tú pones como valor de una propiedad CSS un porcentaje, ese porcentaje se calcula sobre el valor de esa propiedad en el elemento contenedor, en la mayoría de los casos. Por ejemplo, si tú tienes un <p style="width: 60%"> dentro de <div style="width: 1000px"> ese <p> tendrá un ancho tal que 1000px * 60px / 100 = 600px . Si el tamaño de ese elemento contenedor también es un porcentaje, el porcentaje del elemento contenido se calcularía sobre el cociente de aquél porcentaje, y así sucesivamente, con lo que ciertas configuraciones pueden ser un lío de cojones. A eso, añádele la dificultad de que el valor que se utiliza como base del cálculo para el width del elemento contenido es en realidad la suma del width más los paddings del elemento contenedor, si no recuerdo mal.

Los porcentajes son muy útiles, pero cómo la mayoría de cosas muy útiles pueden ser armas de doble filo si no los controlas muy bien. Para mi particularmente no es un tema que sienta que tengo lo bastante controlado. Piensa también que puedes usar unidades como los "em" que se refieren al texto pero a la vez te permiten establecer una especie de módulo, con lo que podrías definir el ancho (y seguramente el alto, también) de tres columnas ocupando en total el 100% de la pantalla con una fórmula tipo:

<!-- aquí defines el módulo (el tamaño de em): una cifra absoluta y redondeada si procede, resultado de hacer esa división anchoDePagina/100 -->
<body style="font-size: ancho de página en pixeles/100px;">

<!-- y aquí lo usas cada vez que usas la unidad em -->
<div id="primera_columna" style="width: 30em;">
blabla
</div>

<div id="segunda_columna" style="width: 50em;">
blabla
</div>

<div id="tercera_columna" style="width: 20em;">
blabla
</div>

</body>

No lo he comprobado pero debería funcionar, a falta quizá de algún position o algo así para hacer que los elementos se computen como posicionados, y obviamente de colorines y tonterías para que pudieras distinguir cuál es cuál. Fíjate que 30em+50em+20em = 100em, que es 100 veces el valor que has puesto en body, en style="font-size: ancho página en pixeles/100px;". Esto obviamente funciona igual, o mejor, en un archivo css separado, sólo lo ponía así para abreviar.

Un diseño reponsive y/o fluido suele implicar un uso estratégico tanto de medidas absolutas en pixels como relativas en porcentajes y em, además del tema de media queries de CSS3 que me tengo que estudiar YA ;). Te recomiendo que sigas a un tal Dan Cederholm, del que me leí Handcrafted CSS, dónde explica un poco todas esas movidas de los em. También están los frameworks de CSS como 960 u otros, en los ya tienes unos grids definidos, pero también tienen sus particularidades. En general cualquier sitio dónde puedas ampliar lo poco que te he avanzado yo. Y si ya lo sabías disculpa, espero que al menos algo te haya sido útil ;).

Saludos,
Raimon