Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Centrado cuando de redimensiona

Estas en el tema de Centrado cuando de redimensiona en el foro de CSS en Foros del Web. Buenas, Tengo una capa, con dos subcapas dentro: - en una hay una imagen - en la otra texto. Cuando por espacio es posible, quiero ...
  #1 (permalink)  
Antiguo 19/08/2014, 10:00
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 2 meses
Puntos: 4
Centrado cuando de redimensiona

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
  1. #peu div.part1Peu{width:26%;
  2.     float:left;
  3.     margin-right:1%}
  4. #peu div.part1Peu div.interiorPeu{width:100%;
  5.     overflow:hidden;
  6.     background:-webkit-linear-gradient(#5cacad, #3c8783);
  7.     background:-o-linear-gradient(#5cacad, #3c8783);
  8.     background:-moz-linear-gradient(#5cacad, #3c8783);
  9.     background:linear-gradient(#5cacad, #3c8783);
  10.     -moz-box-shadow: 5px 5px 5px #888;
  11.     -webkit-box-shadow: 5px 5px 5px #888;
  12.     box-shadow: 5px 5px 5px #888;}
  13. #peu div.part1Peu div.interiorPeu div.bannerImg{float:left;
  14.     margin-right:1%;}
  15. #peu div.part1Peu div.interiorPeu div.bannerImg a{width:100%;}
  16. #peu div.part1Peu div.interiorPeu div.bannerImg a img {border:1px solid #000000;
  17.     margin:5%;
  18.     min-width:90px;}
  19. #peu div.part1Peu div.interiorPeu div.bannerText{overflow:hidden;
  20.     padding-left:4%;
  21.     padding-top:3%;
  22.     padding-right:2%;
  23.     min-width:105px;}
  24. #peu div.part1Peu div.interiorPeu div.bannerText a {text-decoration:none;
  25.     color:#FFF;}
  26. #peu div.part1Peu div.interiorPeu div.bannerText a p.p1{font:bold .9em 'Helvetica';}
  27. #peu div.part1Peu div.interiorPeu div.bannerText a p.p2{font: .8em 'Helvetica';}
  28. #peu div.part1Peu div.interiorPeu div.bannerText a p.p3{float:right;
  29.     font:.8em 'Helvetica';
  30.     margin-top:18%;
  31.     margin-right:1%;}
  32. #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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 19/08/2014 a las 10:56
  #2 (permalink)  
Antiguo 19/08/2014, 11:41
Avatar de JSGarcia91  
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 12 años
Puntos: 0
Pregunta Respuesta: Centrado cuando de redimensiona

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>
  #3 (permalink)  
Antiguo 19/08/2014, 11:42
Avatar de JSGarcia91  
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 12 años
Puntos: 0
Respuesta: Centrado cuando de redimensiona

Siento el doble post, para lo del alto declara la propiedad "max-height: ¿?px"
  #4 (permalink)  
Antiguo 19/08/2014, 12:34
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 2 meses
Puntos: 4
Respuesta: Centrado cuando de redimensiona

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

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

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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 20/08/2014 a las 04:17
  #5 (permalink)  
Antiguo 21/08/2014, 03:51
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 2 meses
Puntos: 4
Respuesta: Centrado cuando de redimensiona

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
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  2.     <head>
  3.         <title>Columnas equilibradas - Recursos CSS - araudi.net</title>
  4.         <style type="text/css">
  5.             #contenedor {display: table;}
  6.             #fila {display: table-row;}
  7.             #columna1, #columna2, #columna3 {display: table-cell;color: #000;width: 100px;font-weight: bold;}
  8.             #columna1 {
  9.             background-color: #F00;}
  10.             #columna2 {background-color: #FF0;}
  11.             #columna3 {background-color: #00F;}
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <div id="contenedor">
  16.             <div id="fila">
  17.                 <div id="columna1">
  18.                     <p>Columna 1</p>
  19.                     <p>Texto de ejemplo.<br />
  20.                     Texto de ejemplo.</p>
  21.                 </div>
  22.                 <div id="columna2">
  23.                     Columna 2
  24.                 </div>
  25.                 <div id="columna3">
  26.                     Columna 3
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </body>
  31. </html>
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: background, color, hover, width
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 16:57.