CSS - Hacer DIV responsive

 
Vista:
sin imagen de perfil
Val: 1
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Hacer DIV responsive

Publicado por Y3rs3Y (1 intervención) el 07/03/2018 22:39:20
buenas tardes :
necesito que mi codigo sea responsive:
mi estructura es basicamente asi

1
2
3
4
5
6
7
<DIV>
      <UL>
           <Li>
           <Li>
           <Li>
      </UL>
</DIV>

es mi pagina de inicio en la cual muestro un menu con 3 imagenes y redirijo a otras paginas segun la seleccion.

pero necesito que sea responsive.

agradesco su ayuda
seria genial que el menu al verse en un dispositivo movil en lugar de verse horizontal se vea vertical.

adjunto mi codigo y archivos js/css/imagenes espero su ayuda.
muchas gracias

Mi HTML
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Image Menu Example</title>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
 
 
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
	$(".jimgMenu ul").kwicks({max: 310, duration: 400, easing: "easeOutQuad"});
});
</script> 
<![endif]-->
<script type="text/javascript">
$().ready(function() {
	$('.jimgMenu ul').kwicks({max: 600, duration: 300, easing: 'easeOutQuad'});
	});
</script>
</head>
<body>
<div class="outer-div">
<div class="jimgMenu" >
  <ul>
    <li id="nature" class="servicetable"><a href="/helpdesk/">Nature</a></li>
    <li id="abstract" class="servicetable"><a href="/siges/">Abstract</a></li>
    <li id="urban" class="servicetable"><a href="/compras/">Urban</a></li>
  </ul>
</div>
</div>
</body>
</html>

Mi CSS
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
57
58
59
60
61
62
63
64
65
66
body
{
  padding: 30px;
  background-color: #fcfcfc;  
}
.outer-div
{
  padding: 30px;
  background-color: #f3f3f3;
}
.jimgMenu {
	position:relative;
	margin: 0 auto;
	max-width: 750px;
	padding: 0px;
	height:500px;
	overflow: hidden;
}
 
.jimgMenu ul {
	table-layout: fixed;
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
	height: 500px;
	position: relative;
 
	}
 
.jimgMenu ul li {
	width: 250px;
	float: left;
	display: block;
	overflow: hidden;
 
}
 
.jimgMenu ul li a {
	text-indent: -1000px;
	background:#fff repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow: hidden;
	height: 500px;
 
}
 
.jimgMenu ul li#nature a {
	background: url(images/nature.jpg) repeat scroll 0%;
 
}
 
.jimgMenu ul li#abstract a {
	background: url(images/abstract.jpg) repeat scroll 0%;
}
 
.jimgMenu ul li#urban a {
	background: url(images/urban.jpg) repeat scroll 0%;
	border-right-style: none;
}
 
.clear {
	clear: both;
}
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: 72
Bronce
Ha disminuido su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

Hacer DIV responsive

Publicado por santi (27 intervenciones) el 11/03/2018 23:40:19
Hola,

te falta algo en el <head>:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Y para el css debes utilizar las media queries ;)
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