Hola a todos necesito ayuda en CSS

RevolucionVegana · 27 Julio 2016, 22:22 PM

Hola, estoy haciendo una página web y tengo que poner 4 imágenes que quiero que queden alineadas horizontalmente todas en la misma línea, lo que he hecho ha sido coger y crear un div:

Código [Seleccionar]

#misimagenes{
	height:250px;
	width:100%;
	background:black;
	
}

y después he puesto para que las imágenes hagan lo siguiente dentro de este div:

Código [Seleccionar]

#misimagenes img{
	height:100%;
	width:24%;
	text-align: center;


}

funciona bien la parte de que dependiendo de como sea la ventana se ajustan solas las imágenes y quedan todas en la misma línea pero no se por que pero no puedo quitarle los margenes es decir quiero cuatro imágenes pegadas unas con otras en la misma línea sin dejar espacios por los lados ni entre ellas, he intentado con cosas como margin-left:0; y right y top y bottom pero no cambia nada, mirar a ver si podéis echarme una mano por favor

! Si necesitáis algo más de código me decís.

Un saludo!

Adrialmend · 28 Julio 2016, 08:19 AM

Código (html4strict) [Seleccionar]

<html>
<head>
</head>

<body>

<div>
    <p>
        <img style="width:100px;" src="1.jpg"/>
        <img style="width:100px;" src="1.jpg"/>
        <img style="width:100px; "src="1.jpg"/>
        <img style="width:100px;" src="1.jpg"/>
    </p>
</div>

</body>
</html>

Ahí tienes las imágenes alineadas en horizontal.

Un saludo

RevolucionVegana · 28 Julio 2016, 14:10 PM

Hola Adrialmed, gracias por la ayuda pero esto no es exactamente lo que busco, lo que busco es que las 4 imagenes ocupen desde el lado izquierdo hasta el lado derecho siempre, sin importar las medidas del navegador o dispositivo, lo he intentado con porcentajes poniendole a cada imagen 25%, pero siguen quedando unos pequeños espacios entre medias de ellas y también a la derecha de la web queda un poco de margen con la cuarta imagen...

Saludos!

Adrialmend · 28 Julio 2016, 15:37 PM

Estoy fuera, cuando llegue a casa editare este mensaje. Perdona por la confusión.

Un saludo

karmany · 28 Julio 2016, 16:46 PM

Podrías intentar hacer algo así (he robado las imágenes del blog.elhacker.net):

Código (php) [Seleccionar]

<p>Texto por arriba</p>
<div class="padre">
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
</div>
<p>Texto por abajo</p>

Y de reglas de estilo, podrías hacer algo así:

Código (css) [Seleccionar]

div.padre{width: 100%;border: 1px solid black;text-align: center;}
div.padre img{max-width: 23%; margin:2px;}

El 23% nunca hay que ponerlo al 25% porque algunos navegadores te pondrán la imagen de más a la derecha abajo. Además también he puesto un margin de 2 píxeles. Esto igual en navegadores con dispositivos muy pequeños también haga saltar la última imagen abajo (pero esto ya lo tienes que estudiar y con las media queries corregirlo a tu manera). Yo por ejemplo, en un smartphone no dejaría las imágenes en horizontal, porque no se ven, las dejaría una debajo de la otra.
Pongo un <div> padre y dentro las imágenes porque es posible centrarlas, ya que estas son elementos en línea y no en bloque, como el <div>. Así siempre quedarán bien centradas dentro de un div que ocupa todo el ancho de la pantalla.

karmany · 28 Julio 2016, 17:18 PM

Y juntas y centradas, puedes hacer algo así:

Código (php) [Seleccionar]

<p>Texto por arriba</p>
<div class="padre">
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<img src="http://3.bp.blogspot.com/-L44dSJ5R-_E/UN3unDUvbcI/AAAAAAAAAGQ/tIUkL5EeeDk/s1600/captura_pantalla_notificador_nuevos_mensajes_foro.png"/>
<br style="clear:both;" />
</div>
<p>Texto por abajo</p>

CSS

Código (css) [Seleccionar]

div.padre{width: 100%;border: 1px solid black;text-align:center;font-size:0;}
div.padre img{max-width: 23%;}

Habrá que ver compatibilidades de navegadores.

Si no quieres centrarlas dentro del <div>, es muy sencillo poniendo a cada <img> float:left.

Test Foro de elhacker.net SMF 2.1

Hola a todos necesito ayuda en CSS

RevolucionVegana

Adrialmend

RevolucionVegana

Adrialmend

karmany

karmany