Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » display:block no funciona

CSS - display:block no funciona

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 4
Ha aumentado su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

display:block no funciona

Publicado por German (3 intervenciones) el 29/06/2018 01:04:44
Hola Gente, espero se encuentren bien. Necesito ayuda con algo que me tiene enfermo, creí entender como funcionaba position: y display: pero veo que no.

Trato de explicar y mostrar el código.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
.titulo   {position:relative; top:0; left:0;}
.titulo p{position:absolute; top:50%; margin:auto;}
 
.slider        {position:relative; top:0; left:0;}
.slider img {position:absolute; top:50%; margin:auto; display:inline-block;}
 
.pie   {position:relative; top:0; left:0;}
.pie p{position:absolute; top:50%; margin:auto;}
 
</style>
 
 
 
<div class="titulo">
      <p>TITULO con Telefonos</p>
</div>
 
<div class="slider">
      <img src="img1.jpg" style="left:0;">
      <img src="img2.jpg" style="left:100%;" >
      <img src="img3.jpg" style="left:-100%;">
</div>
 
<div class="pie">
     <p>Escribo un poco del rubro</p>
</div>

Bueno eso sería el código resumido, el tema es que si pongo que la imagen tiene position:absolute, el pie se me pega al div "titulo", y no debajo del slider. No se por que. Probé pegar por todos lados display:block; y no le da pelota.
Mi idea es con jquery cambiar la propiedad "left" y así ir pasando de imagen en imagen. Algo simple.

Que estoy haciendo mal y por que un div queda arriba de otro?

Al colocar cada div como contenedor con la propiedad position:relative;, no deberían de quedarse uno debajo del otro?

Gracias gente!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi
Val: 68
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

display:block no funciona

Publicado por santi (27 intervenciones) el 29/06/2018 23:09:57
Hola,

quizás hay demasiadas posiciones relativas...

Creo que deberías envolver las imágenes con una lista y quitar las posiciones absolutas tanto del título como del pié:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="es">
<head>
<title>slider</title>
</head>
<body>
<style>
#container {

	background: #f5f5f5;

	max-width: 1100px;
	margin: 0 auto;
}
.slider ul {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-width: 100%;
	height: 500px;
}
.slider ul li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
</style>
 
<div id="container">
	<div class="titulo">
      <p>TITULO con Telefonos</p>
	</div>
 
	<div class="slider">
	      <ul>
	      	<li style="left:0%;">
	      		<img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg">
	      	</li>
	      	<li style="left:100%;">
	      		<img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg">
	      	</li>
	      	<li style="left:-100%;">
	      		<img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg">
	      	</li>
	      </ul>
	</div>
 
	<div class="pie">
	     <p>Escribo un poco del rubro</p>
	</div>
</div>
</body>
</html>

Le he dado un poco de estilo... Prueba a ver ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar