¿Como puedo alinear correctamente esto?

OfSerker · #1 (**permalink**) 09/12/2016, 17:34

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;
	
  
}

AngelKrak · #2 (**permalink**) 09/12/2016, 23:53

te lo hice mediante flexbox

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

dime si eso era lo que querias

OfSerker · #3 (**permalink**) 10/12/2016, 03:55

¡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...

OfSerker · #4 (**permalink**) 10/12/2016, 04:21

¡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?

OfSerker · #5 (**permalink**) 10/12/2016, 06:12

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