HTML - Adaptar Resolucion automaticamente del sitio Web

Val: 18

Adaptar Resolucion automaticamente del sitio Web

Publicado por poncho (12 intervenciones) el 26/10/2013 07:39:42

Saludos cordiales a todos los del foro, Esta es mi primera pregunta. He buscado informmcion pero no la encuentro calra, por ser algo novato.
lo que quiero es que mi sitio web se adapte automaticamente a la resolucion de la pantalla del que entra a ver el sitio. o que se vea sentrada en cualquier resolucion.

aqui pongo el link del sitio.
http://www.autokeymexico.com/akmpro/2/menu.html

Nota: uso frames en la parte de abajo por medio de css.
aqui pongo el codigo de los 2 archivos .css que uso. y el hatml.

menup1.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

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

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

#menu-bar {

  width: 924; /* 95% */

  margin: 0px 0px 0px 0px;

  padding: 6px 8px 6px 20px;

  height: 32px;

  line-height: 100%;

  border-radius: 7px;

  -webkit-border-radius: 7px;

  -moz-border-radius: 7px;

  box-shadow: 2px 2px 3px #666666;

  -webkit-box-shadow: 2px 2px 3px #666666;

  -moz-box-shadow: 2px 2px 3px #666666;

  background: #A0A3A6;

  border: solid 1px #6D6D6D;

  position:relative;

  z-index:999;

#menu-bar li {

  margin: 0px 0px 6px 0px;

  padding: 0px 6px 0px 6px;

  float: left;

  position: relative;

  list-style: none;

#menu-bar a {

  font-weight: bold;

  font-family: arial;

  font-style: normal;

  font-size: 38px; /* 32 px */

  color: #E7E5E5;

  text-decoration: none;

  display: block;

  padding: 6px 20px 6px 20px;

  margin: 0;

  margin-bottom: 6px;

  border-radius: 10px;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  text-shadow: 2px 2px 3px #000000;

#menu-bar li ul li a {

  margin: 0;

#menu-bar .active a, #menu-bar li:hover > a {

  background: #0399D4;

  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);

  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);

  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));

  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);

  color: #444444;

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

  text-shadow: 2px 2px 3px #FFFFFF;

#menu-bar ul li:hover a, #menu-bar li:hover li a {

  background: none;

  border: none;

  color: #666;

  -box-shadow: none;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

#menu-bar ul a:hover {

  background: #0399D4 !important;

  background: linear-gradient(top,  #04ACEC,  #0186BA) !important;

  background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important;

  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;

  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;

  color: #FFFFFF !important;

  border-radius: 0;

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  text-shadow: 2px 2px 3px #FFFFFF;

#menu-bar ul {

  background: #DDDDDD;

  background: linear-gradient(top,  #FFFFFF,  #CFCFCF);

  background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF);

  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));

  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);

  display: none;

  margin: 0;

  padding: 0;

  width: 185px;

  position: absolute;

  top: 32px;

  left: 0;

  border: solid 1px #B4B4B4;

  border-radius: 10px;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-box-shadow: 2px 2px 3px #222222;

  -moz-box-shadow: 2px 2px 3px #222222;

  box-shadow: 2px 2px 3px #222222;

#menu-bar li:hover > ul {

  display: block;

#menu-bar ul li {

  float: none;

  margin: 0;

  padding: 0;

#menu-bar ul a {

  padding:10px 0px 10px 15px;

  color:#424242 !important;

  font-size:12px;

  font-style:normal;

  font-family:arial;

  font-weight: normal;

  text-shadow: 2px 2px 3px #FFFFFF;

#menu-bar ul li:first-child > a {

  border-top-left-radius: 10px;

  -webkit-border-top-left-radius: 10px;

  -moz-border-radius-topleft: 10px;

  border-top-right-radius: 10px;

  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topright: 10px;

#menu-bar ul li:last-child > a {

  border-bottom-left-radius: 10px;

  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-bottomleft: 10px;

  border-bottom-right-radius: 10px;

  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-bottomright: 10px;

#menu-bar:after {

  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

#menu-bar {

  display: inline-block;

  html[xmlns] #menu-bar {

  display: block;

* html #menu-bar {

  height: 1%;

/* dos imagenes en una linea

#imag {float:left; margin:0px 80px 0px 80px} */

css_frames.css

1

2

#Izquierda { position:absolute; top:18%; left:2%; width:95%; height:85%; overflow:auto; }

#Derecha { position:absolute; top:13%; right:4%; width:25%; height:85%; overflow:auto; }

menu.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

38

39

40

41

42

43

44

45

46

47

48

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Autokeymexico</title>

<link rel="shortcut icon" type="image/ico" href="images/favicon.ico">

<link rel="stylesheet" href="css/menup1.css" type="text/css" />

<link rel="stylesheet" href="css/css_frames.css" type="text/css" />

</head>

<body>

<div class="fotos superiores"> <img src="images/Logo Autokey_220X138.png" width="220" height="138"  align="left"/><img src="images/menu3.png" width="440" height="204"  align="right"/></div>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/>

<div class="menu">

  <ul id="menu-bar">

    <li class="active"><a href="#">Inicio</a></li>

    <li><a href="#">Servicios</a>

    <!-- <ul>

    <li><a href="#">Products Sub Menu 1</a></li>

    <li><a href="#">Products Sub Menu 2</a></li>

    <li><a href="#">Products Sub Menu 3</a></li>

    <li><a href="#">Products Sub Menu 4</a></li>

    </ul> -->

    </li>

    <li><a href="#">Modelos de Franquicias</a>

    <!-- <ul>

    <li><a href="#">Services Sub Menu 1</a></li>

    <li><a href="#">Services Sub Menu 2</a></li>

    <li><a href="#">Services Sub Menu 3</a></li>

    <li><a href="#">Services Sub Menu 4</a></li>

    </ul> -->

    </li>

    <li><a href="#">Sucursales</a></li>

    <li><a href="#">Contacto</a></li>

  </ul>

</div>

<br/><br/><br/><br/><br/>

<!-- <div id="Superior"> <p>Mi texto superior aquí</p>

</div> -->

<div id="Izquierda"><br/><br/><br/><br/><br/><br/>

<img src="images/franquicias/Valle Oriente_800_468.png" width="800" height="468"></div>

<div id="Derecha"><br/><br/><br/><br/><br/><br/><br/><br/><br/> <iframe src="http://www.facebook.com/plugins/likebox.php?id=126424147376088&amp;width=292&amp;connections=10&amp;stream=true&amp;header=true&amp;height=450" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:450px;" allowTransparency="true"></iframe></div>

</body>

</html>

Serian tan amables de echarle un vistazo y ayudarme a adaptarlo a las resoluciones o que se vea todo el menu centrado en la pagina.
de antemano muchas gracias a las personas que quieran ayudarme y a las que no kieran muchas gracias por tomarse unos segundos en leer mi post.

Atte: Poncho Garcia.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

0

Responder

Adaptar Resolucion automaticamente del sitio Web

Publicado por robert (15 intervenciones) el 27/10/2013 15:16:13

Yo tambien tuve problemas con mi web repecto a este tema, RESPONSIVE DESIGN, mira primero deberia aprender html5 que no es dificil, pues con html5 facilita a los navegadores a que tu pagina se carge mejor, otra cosa es que para que tu web sea adaptable tienes que optar por CSS3 Y JAVASCRIPT.

CSS3 Media Queries es para darle distintos estilos a tu web dependiendo el tamaño de la pantalla del dispositivo que la visite, pero tener en cuenta que esto solo es soportado por navegadores modernos, y como esto de la web es una cosa de locos no puedes asegurar que todos usen el mismo navegador ni la version, entonces para esos casos esta JAVASCRIPT.

Por experiencia yo te recomiendo que lo investigar por ti mismo, ah una recomendacion prueba tu web en todos los navegadores posibles y trata de solucionar si existen problemas, INTERNET EXPLORER es una porqueria! pero hay usuarios que la usan haci que tambien tienes que considerarlo.

“Si deseas empezar y desarrollar algo grandioso, no necesitas millones de dólares de capitalización. Necesitas suficiente pizza y Diet Coke en la nevera, una PC barata y trabajo y dedicación para realizar tu idea.”

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

1

Comentar

Pos: 64

Val: 18

Adaptar Resolucion automaticamente del sitio Web

Publicado por poncho (12 intervenciones) el 27/10/2013 23:46:10

Gracias Robert por tus comentario, asi lo hare seguire investigando...

Valora esta respuesta

0

Comentar

Pos: 2

Val: 1.144

Adaptar Resolucion automaticamente del sitio Web

Publicado por xve (1543 intervenciones) el 27/10/2013 17:18:46

Hola Poncho la he mirado un poco por encima, y no me queda muy claro que quieres conseguir... pero prueba a poner el en class menu:

1

2

3

4

text-align: center;

overflow: hidden;

clear: both;

display: block;

y elimina del class menu-bar:

1

height: 32px;

No se si es esto lo que estas buscando... coméntanos, ok?

Valora esta respuesta

1

Comentar

Pos: 64

Val: 18

Adaptar Resolucion automaticamente del sitio Web

Publicado por poncho (12 intervenciones) el 27/10/2013 23:53:06

GRacias XVE. por tu comentario.
inserte el codigo y suprimi la que me inidcas. al parecer si se centra en relacion a la pagina pero al cambiar de resolucion es dodne se hace el problemon se desfasan los iframes que tengo en la parte de abajo, se corren todos y se sobreponen con el menu.
por eso el interes de mi pregunta.
en concreto quero que mi sitio web se vea en todas las resoluciones posibles.
en estos momentos ya estyo casi al borde del colapso, llevo 1 semana entera dia,con dia noche con noche y no he podido terminarla...

si tuberas alguna idea sobre esto, te lo agardeceria infinitamente....
Saludos.

Valora esta respuesta

0

Comentar

Pos: 2

Val: 1.144

Adaptar Resolucion automaticamente del sitio Web

Publicado por xve (1543 intervenciones) el 28/10/2013 07:14:44

Hola Poncho, una manera es fijar la anchura de tu web para que no se desmonte al hacer el navegador pequeño o grande, pero si el requisito es que se modifique, tendrás que hacer lo que te comenta Robert... utilizar RESPONSIVE DESIGN o diferentes estilos dependiendo de la resolución de la pantalla.

Valora esta respuesta

0

Comentar