CSS - Visualizar en disp. moviles

   
Vista:

Visualizar en disp. moviles

Publicado por Juan (6 intervenciones) el 09/05/2014 21:49:44
Hola, he hecho una web ( mi primera ) y el caso es que en ordenadores se ve correctamente pero a la hora de verla en disposibtivos moviles tengo problemas en algunos. He probado en varios moviles de tamaño muy similar y en algunos se ve correctamente pero en otros se sobreponen unas cosas con otras.

Alguien sabe que puede ser?

Gracias, un saludo
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 xve

Visualizar en disp. moviles

Publicado por xve (350 intervenciones) el 09/05/2014 22:59:41
Hola Juan, entiendo que tiene que ver con la programación de los estilos... nos puedes mostrar la url para probarla? o adjuntar-nos el código para probarlo?
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

Visualizar en disp. moviles

Publicado por Juan (6 intervenciones) el 10/05/2014 00:00:28
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
/*--------------------------------------------------------------*
		Cabecera
**--------------------------------------------------------------*/
 
#cabecera {
	margin: 3% auto 0 auto;
	width: 70%;
	height: 180px;
	padding: 1px;
	background-color: #ececec;
	}
 
#cabecera #imagen {
	padding-top: 1px;
	height: 78%;
	background: url("banner3.png") repeat-x center top;
	margin-top: 3.1%;
		}
 
#cabecera #menu {
	text-align: center;
	margin: 0;
	}
 
#cabecera #menu ul {
	width: 93%;
	margin: 0 auto;
	padding: 0;
 
	}
 
#cabecera #menu li {
	margin: 0.29% 0.9%;
	list-style-type: none;
	display: inline;
	float: left;
	width: 14.7%;
	height: 30px;
	font-size: 125%;
	text-align: center;
	background: url("nav.jpg") no-repeat;
	}
 
#menu li a {
	margin: auto auto;
	display: block;
	padding-top: 0;
	color: white;
	width: 105%;
	height: 100%;
	}
 
#menu li a:hover {
	background-color: black; color: white; }
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

Visualizar en disp. moviles

Publicado por Juan (6 intervenciones) el 10/05/2014 00:01:13
En el head del html tengo esto

<meta name="viewport" content="width=device-width, initial-scale=0.3">
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
Imágen de perfil de xve

Visualizar en disp. moviles

Publicado por xve (350 intervenciones) el 11/05/2014 10:01:44
Hola Juan, únicamente con el css no podemos probar para ver que es lo que se visualiza mal... nos puedes adjuntar la parte de la web?
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

Visualizar en disp. moviles

Publicado por Juan (6 intervenciones) el 11/05/2014 17:11:57
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
	<title>Prueba</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="author" content="Juan" />
	<meta name="copyright"	content="Copyright 2014" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="imagetoolbar" content="no" />
	<link href="webcss.css" rel="stylesheet" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=0.3">
</head>
 
<body>
<div id="contenedor">
	<div id="cabecera">
		<div id="menu">
			<ul>
				<li><a href="#">Menu1</a></li>
				<li><a href="#">Menu2</a></li>
				<li><a href="#">Menu3</a></li>
				<li><a href="#">Menu4</a></li>
				<li><a href="#">Menu5</a></li>
				<li><a href="#">Menu6</a></li>
			</ul>
		</div>
			<div id="imagen"> </div>
	</div>
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
Imágen de perfil de xve

Visualizar en disp. moviles

Publicado por xve (350 intervenciones) el 11/05/2014 19:40:47
Hola Juan, pero en esta cabecera, no defines ningún otro estilo para el responsive... ni para ninguna otra resolución de pantalla.
Lo único que tienes puesto, es lo que nos comentabas del viewport...

Te pido mil perdones, cuando me lo comentabas, no entendí que no tenias puesto nada de responsive.

Exactamente que quieres que haga cuando tenga una resolución pequeña? que el menú se ponga uno debajo del otro?
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

Visualizar en disp. moviles

Publicado por Juan (6 intervenciones) el 11/05/2014 20:56:54
No, quiero que se vea siempre igual..
El caso es que en algunos telefonos se ve bien y en otros no. Yo suponia que con el viewport ya era suficiente
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

Visualizar en disp. moviles

Publicado por Juan (6 intervenciones) el 15/05/2014 18:27:47
¿Ninguna solucion?
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
Imágen de perfil de xve

Visualizar en disp. moviles

Publicado por xve (350 intervenciones) el 16/05/2014 08:02:43
Hola Juan, una manera de hacerlo, por ejemplo, es poniendo esto al final de tu archivo CSS:

1
2
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
}

y dentro del mismo, poner las nuevas propiedades para los elementos... por ejemplo, para tu problema con el tamaño de la fuente, seria:
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
    <title>Prueba</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="author" content="Juan" />
    <meta name="copyright"  content="Copyright 2014" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="imagetoolbar" content="no" />
    <style>
    #cabecera {
        margin: 3% auto 0 auto;
        width: 70%;
        height: 180px;
        padding: 1px;
        background-color: #ececec;
    }
 
    #cabecera #imagen {
        padding-top: 1px;
        height: 78%;
        background: url("banner3.png") repeat-x center top;
        margin-top: 3.1%;
    }
 
    #cabecera #menu {
        text-align: center;
        margin: 0;
    }
 
    #cabecera #menu ul {
        width: 93%;
        margin: 0 auto;
        padding: 0;
    }
 
    #cabecera #menu li {
        margin: 0.29% 0.9%;
        list-style-type: none;
        display: inline;
        float: left;
        width: 14.7%;
        height: 30px;
        font-size: 125%;
        text-align: center;
        background: url("nav.jpg") no-repeat;
    }
 
    #menu li a {
        margin: auto auto;
        display: block;
        padding-top: 0;
        color: white;
        width: 105%;
        height: 100%;
    }
 
    #menu li a:hover {
        background-color: black; color: white;
    }
 
    @media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
        #cabecera {
            width: 95%;
        }
        #cabecera #menu li {
            font-size: 80%;
        }
    }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=0.3">
</head>
 
<body>
<div id="contenedor">
    <div id="cabecera">
        <div id="menu">
            <ul>
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li><a href="#">Menu3</a></li>
                <li><a href="#">Menu4</a></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a></li>
            </ul>
        </div>
            <div id="imagen"> </div>
    </div>
</div>
</body>
</html>

Coméntanos, ok?
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