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