Foros del Web » Creando para Internet » CSS »

¿Como puedo alinear correctamente esto?

Estas en el tema de ¿Como puedo alinear correctamente esto? en el foro de CSS en Foros del Web. Hola a todos, he creado un código recientemente que me está dando muchos problemas. He intentado reacerlo y he obtenido un resultado el cual no ...
  #1 (permalink)  
Antiguo 09/12/2016, 17:34
 
Fecha de Ingreso: marzo-2014
Mensajes: 168
Antigüedad: 8 años, 5 meses
Puntos: 2
¿Como puedo alinear correctamente esto?

Hola a todos, he creado un código recientemente que me está dando muchos problemas. He intentado reacerlo y he obtenido un resultado el cual no sé por qué sale todo distorsionado, separado y mal posicionado. Lo que quiero hacer es poner 9 fotos divididas en 3 columnas y en partes proporcionales (es decir todas iguales). El problema es que no se como hacerlo bien para que el href y la img se coloquen bien. Yo lo he intentado con el css el cuál también pasaré.

Otra cosa que me tiene loco es el hecho de no poder cambiar de posición el script de youtube que te permite que los usuarios se suscriban a tu canal mediante un botón. He hecho de todo, desde floats hasta align y varias cosas.

Principalmente, resumiendo, esas son mis dos dudas. Como repartir proporcionalmente 9 imagenes y como puedo alinear correctamente un botón (que funciona como script) a la derecha.

¡Un saludo y gracias!

Código HTML:
<html><head><title>MyBadS</title>
<link rel="stylesheet" href="./media/videos.css" type="text/css" media="all">
<style> 
body{ 
background: url(./media/background.jpg);
background-size: auto 75px;
background-size: 100%;
background-size: contain;
background-size: cover;
} 
</style>  
</head>
<body>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCbrqbGj4SoY2DI39qKioCmw" data-layout="default" data-count="default"></div>

<div>
<a href="https://www.youtube.com/watch?v=VARIABLE1" target="_blank"><img class="img1" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></a>
<center><a href="https://www.youtube.com/watch?v=VARIABLE2" target="_blank"><img class="img2" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></center></a>
<a href="https://www.youtube.com/watch?v=VARIABLE3" target="_blank"><img class="img3" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></a>


<a href="https://www.youtube.com/watch?v=VARIABLE4" target="_blank"><img class="img1" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></a>
<center><a href="https://www.youtube.com/watch?v=VARIABLE5" target="_blank"><img class="img2" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></center></a>
<a href="https://www.youtube.com/watch?v=VARIABLE6" target="_blank"><img class="img3" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></a>



<a href="https://www.youtube.com/watch?v=VARIABLE7" target="_blank"><img class="img1" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></a>
<center><a href="https://www.youtube.com/watch?v=VARIABLE8" target="_blank"><img class="img2" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></center></a>
<a href="https://www.youtube.com/watch?v=VARIABLE9" target="_blank"><img class="img3" src="http://img.youtube.com/vi/VARIABLE/maxresdefault.jpg"/></a>

</div>
</body>
</html> 
Código HTML:
@charset "utf-8";

.img1 {
	width:25%;
	height:25%;
	float:left;
	margin-left:100px;
	
	}
	
.img2 {
	width:25%;
	height:25%;	
	
}

.img3 {
	width:25%;
	height:25%;
	float:right;
	margin-right:100px;
	
  
}
  #2 (permalink)  
Antiguo 09/12/2016, 23:53
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 7 años, 8 meses
Puntos: 91
Respuesta: ¿Como puedo alinear correctamente esto?

te lo hice mediante flexbox

http://codepen.io/anon/pen/XNBVao?editors=1100

dime si eso era lo que querias
  #3 (permalink)  
Antiguo 10/12/2016, 03:55
 
Fecha de Ingreso: marzo-2014
Mensajes: 168
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: ¿Como puedo alinear correctamente esto?

¡Gracias por tu respuesta!

El resultado que quería era ese pero con unos 50 px de margen en relación con los bordes de la web (top, bot, right, left). El problema que a la hora de la práctica no queda igual. Me ha quedado desastroso... mira el resultado:



Que pena, me gustaba mucho. ¿Alguien puede ayudarme?

Gracias.

P.D: Además el botón de youtube no se alinea a la derecha...
  #4 (permalink)  
Antiguo 10/12/2016, 04:21
 
Fecha de Ingreso: marzo-2014
Mensajes: 168
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: ¿Como puedo alinear correctamente esto?

¡Ya me funciona! El único problema ahora que tengo es que el tamaño de las imágenes es demasiado grande y no me gusta que tenga que hacer scroll. Además me interesaría dejar arriba un margen de 10px para poner un botón y ir a otra web (el boton bastante grande). Muchas gracias y saludos. ¿como se hace lo que he dicho?
  #5 (permalink)  
Antiguo 10/12/2016, 06:12
 
Fecha de Ingreso: marzo-2014
Mensajes: 168
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: ¿Como puedo alinear correctamente esto?

Hola, perdón por las molestias pero quería añadir 2 botones (llamados youtube y instagram) que funcionan como imagenes. Y los quería poner arriba a la izquierda que quedasen bien y con un tamaño decente. ¿Alguien me podría ayudar? Os dejo el depen: http://codepen.io/MyBadS/pen/JbBLQe

Etiquetas: alinear, correctamente, height, html, link, margin, todo, 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 05:29.