[SOLUCIONADO] Centrado cuando de redimensiona

mblascog · #1 (**permalink**) 19/08/2014, 10:00

Buenas,
Tengo una capa, con dos subcapas dentro:
- en una hay una imagen
- en la otra texto.
Cuando por espacio es posible, quiero que ambas partas salgan una al lado de la otra. En la siguiente imagen se ve lo quiero:

Y el código para conseguirlo es el siguiente:

Código CSS:

Ver original#peu div.part1Peu{width:26%;
    float:left;
    margin-right:1%}
#peu div.part1Peu div.interiorPeu{width:100%;
    overflow:hidden;
    background:-webkit-linear-gradient(#5cacad, #3c8783);
    background:-o-linear-gradient(#5cacad, #3c8783);
    background:-moz-linear-gradient(#5cacad, #3c8783);
    background:linear-gradient(#5cacad, #3c8783);
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;}
#peu div.part1Peu div.interiorPeu div.bannerImg{float:left;
    margin-right:1%;}
#peu div.part1Peu div.interiorPeu div.bannerImg a{width:100%;}
#peu div.part1Peu div.interiorPeu div.bannerImg a img {border:1px solid #000000;
    margin:5%;
    min-width:90px;}
#peu div.part1Peu div.interiorPeu div.bannerText{overflow:hidden;
    padding-left:4%;
    padding-top:3%;
    padding-right:2%;
    min-width:105px;}
#peu div.part1Peu div.interiorPeu div.bannerText a {text-decoration:none;
    color:#FFF;}
#peu div.part1Peu div.interiorPeu div.bannerText a p.p1{font:bold .9em 'Helvetica';}
#peu div.part1Peu div.interiorPeu div.bannerText a p.p2{font: .8em 'Helvetica';}
#peu div.part1Peu div.interiorPeu div.bannerText a p.p3{float:right;
    font:.8em 'Helvetica';
    margin-top:18%;
    margin-right:1%;}
#peu div.part1Peu div.interiorPeu div.bannerText a:hover{text-decoration:underline;}

He puesto todo el código, aúnque sea largo.
- part1Peu: es todo el recuadro
- interiorPeu: la sombra de dicho recuadro
- bannerImg: el contenedor de la imagen
- bannerText: el contenedor del texto

De estos recuadros tengo 3, alineados horizontalmente. Según el ancho del navegador, llega un momento que no caben, entonces, al estrecharse, el texto salta por debajo de la imagen, quedando así:

Y lo que quisiera, es que la imagen también quedara centrada, es decir:

Creo que lo que tengo es que redefinir, en el media query de máximo 800 píxeles, las propiedades de #peu div.part1Peu div.interiorPeu div.bannerImg a img, pero no lo consigo.

Y ya por último, cuando el navegador el navegador es más ancho de 800 píxeles, los recuadros quedan así, bien para mi gusto

Pero cuando es más estrecho, la altura del recuadro varía según el texto,

y yo querría que quedaran igual de altos.

Muchas gracias por leerme y si podeis ayudarme.
Saludos

JSGarcia91 · #2 (**permalink**) 19/08/2014, 11:41

No se si te he entendido pero... ¿Has probado utilizando media queries? Declaras que cuando el dispositivo sea de entre X y X tamaño de ancho se cargue unos estilos CSS u otros.

te dejo un ejemplo, lo descargas y redimensionas tu navegador, verás como se modifica según el ancho del dispositivo.

En dispositivos grandes:

En dispositivos pequeños:

Y aquí el código (crea un archivo HTML, lo pegas y redimensionas el navegador para ver los cambios):

Código:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Cosas sosas</title>
	<style>
	@media screen and (min-width:1200px) {
		.wrapper {
			width: 400px;
			height: 110px;
			background-color: #297F7B;
			overflow: hidden;
		}
		.img {
			width: 100px;
			padding: 5px;
			float: left;
		}
		.texto {
			width: 270px;
			padding: 5px;
			float: left;
		}
	}
	@media screen and (max-width:767px) {
		.wrapper {
			background-color: #297F7B;
		}
		.img {
			padding-top: 16px;
		}
		.img>img{
			display: block;
			margin: auto;
		}
		.texto {
			padding-bottom: 8px;
		}
		.texto>p {
			text-align: center;
		}
	}
	</style>
</head>

<body>

	<div class="wrapper">
		<div class="img">
			<img src="http://placehold.it/100x100" alt="Foto vídeo">
		</div>
		<div class="texto">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolor dolores id neque eaque dicta.</p>
		</div>
	</div>
	
</body>
</html>

JSGarcia91 · #3 (**permalink**) 19/08/2014, 11:42

Siento el doble post, para lo del alto declara la propiedad "max-height: ¿?px"

mblascog · #4 (**permalink**) 19/08/2014, 12:34

Gracias JSGarcia91, finalmente lo he resuelto de la siguiente manera:

Código CSS:

Ver original@media screen and (max-width:767px){
    #opcionsMenu nav ul li {font-size:.7em;width:15%;} 
    #peu div.part1Peu div.interiorPeu{text-align:center;}
    #peu div.part1Peu div.interiorPeu div.bannerImg {float:none;}
}

Lo que me pasa ahora, es que al saltar el texto por debajo de la imagen, dependiendo de la longitud del texto, los recuadros quedan de diferente altura.
Hay alguna manera de controlar esto:

El estilo de los recuadros los defino de igual manera, a partir de una clase.

Gracias

mblascog · #5 (**permalink**) 21/08/2014, 03:51

Buenas, buscando por el foro vi la sugerencia de buscar "columnas equilibradas" en Google y así lo hice.
Hay muchas maneras de hacerlo, para mi caso, la más fácil de adaptar ha sido en formato de tabla.
Si a alguien le interesa el código es este:

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
    <head>
        <title>Columnas equilibradas - Recursos CSS - araudi.net</title>
        <style type="text/css">
            #contenedor {display: table;}
            #fila {display: table-row;}
            #columna1, #columna2, #columna3 {display: table-cell;color: #000;width: 100px;font-weight: bold;}
            #columna1 {
            background-color: #F00;}
            #columna2 {background-color: #FF0;}
            #columna3 {background-color: #00F;}
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div id="fila">
                <div id="columna1">
                    <p>Columna 1</p>
                    <p>Texto de ejemplo.<br />
                    Texto de ejemplo.</p>
                </div>
                <div id="columna2">
                    Columna 2
                </div>
                <div id="columna3">
                    Columna 3
                </div>
            </div>
        </div>
    </body>
</html>