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