Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/06/2014, 17:44
djcm
 
Fecha de Ingreso: junio-2014
Ubicación: mexico df
Mensajes: 2
Antigüedad: 9 años, 11 meses
Puntos: 0
Pregunta Adaptar web a cualquier resolucion

Hola que tal, se un poco sobre el desarrollo web y pues tengo una pagina que hice ya hace unos años que se requiere darle el toque de responsivo, pero la verdad en eso del responsivo soy nuevo en ello alguien que me pueda ayudar, se lo agradeceria bien cañon, ya que he tratado de hacer varias cosas y no da resultado nada para que quede... les pongo aqui parte del codigo en CSS

@charset "utf-8";
/* CSS Document */
body {
color: #EDEDED;
background-color: #000;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
}
.main {
background:url(img/fondo_home.png);
background-position:top;
background-repeat:no-repeat;
vertical-align:top;
width:auto;
max-height:auto;
}
.main td {
vertical-align:top;
}

#container {
height:auto;
width:auto;
}
.main #menu {
left:0px;
font-size:13px;
width:100%;
z-index:1;
}
#menu a {
color:#454545;
text-decoration:none;
margin-left:auto;
margin-right:auto;
}
#menu a:hover {
color:#8C8C8C;
}
#menu div {
background-color:#000;
padding:5px;
text-align:auto;
}
#menu img {
margin-left:auto;
}

img {
max-width: 100%;
height: auto;

}
.logo {
vertical-align:top;
text-align:left;
width:50%;
padding-left:25px;
**height:50px;
**padding-top:5px;
height:130px;
padding-top:15px;
z-index:9999;
}
.banner {
position:relative;
top:0px;
vertical-align:top;
z-index:4;
}
.buscador {
width:50%;
vertical-align:bottom;
}
.form_busc {
position:relative;
float:right;
padding-top:54px;
height:76px;
}
.form_busc table #input_busc {
vertical-align:top;
text-align:right;
padding-right:18px;
padding-top:30px;
**padding-top:28px;
}
.form_busc table #but_busc {
vertical-align:top;
padding-top:29px;
}
.top_menu {
position:relative;
top:0px;
vertical-align:top;
width:1024px;
}
#bgbottommenu {
background-image:url(img/bg_bottom_menu.png);
background-position:center;
background-repeat:no-repeat;
}
#bgbottommenu td {
vertical-align:bottom;
}
.bottom_menu {
vertical-align:top;
height:64px;
max-height:64px;
text-align:center;
padding-top:10px;
}
.distribuidores {
vertical-align:top;
text-align:center;
padding-top:80px;
}
.acerca {
background-image:url(img/acerca_es.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:970px;
height:349px;
}
.acerca_en {
background-image:url(img/acerca_en.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:970px;
height:349px;
}
.catalogo {
background-image:url(img/catalogo.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:851px;
height:349px;
}
.catalogo_en {
background-image:url(img/catalogo_en.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:851px;
height:349px;
}
.busqueda {
vertical-align:top;
padding-top:20px;
text-align:right;
padding-right:10px;
}
.nuevo {
background-image:url(img/nuevos.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:851px;
height:349px;
}
.nuevo_en {
background-image:url(img/nuevos_en.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:851px;
height:349px;
}
.dist {
background-image:url(img/distribuidores_2.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:851px;
height:349px;
}
.dist_en {
background-image:url(img/distribuidores_2_en.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:851px;
height:349px;
}
.informacion {
background-image:url(img/info_tec.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:965px;
height:349px;
}
.informacion_en {
background-image:url(img/info_tec_en.png);
background-position:center;
background-repeat:no-repeat;
vertical-align:top;
width:965px;
height:349px;
}
#info_tec {
text-align:left;
position: relative;
float:left;
height: 323px;
width: 870px;
**height: 325px;
**width: 955px;
overflow:auto;
padding-left:85px;
left:10px;
top:8px;
**top: 10px;
margin-bottom:10px;
}
.titulo {
font-family:Arial, Helvetica, sans-serif;
**width:500px;
font-size:22px;
color:#FFF;
font-style:italic;
padding-right:10px;
}
.texto {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
**width:500px;
color:#FFF;
font-style:normal;
padding-right:10px;
}
.estado {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
font-style:normal;
}
.estado a:link {
color: #FFF;
text-decoration: none;
}
.estado a:visited {
text-decoration: none;
color: #FFF;
}
.estado a:hover {
text-decoration: underline;
color: #FFF;
}
.estado a:active {
text-decoration: none;
color: #FFF;
}
#lista_dist {
text-align:center;
position: relative;
**padding-top:12px;
float:left;
height: 161px;
width: 125px;
**height: 162px;
**width: 125px;
overflow:auto;
}
.entrar {
position:absolute;
vertical-align:top;
padding-top:200px;
padding-left:490px;
}
.topmenu2 {
width:80%
}
.topmenu2 td {
text-align: center;
padding-right: 10px;
padding-left: 10px;
color: #FFFFFF;
background-color:#666;
font-size:12px;
}
.topmenu2 td:hover {
background:#999;
}
.topmenu2 a {
color: #FFFFFF;
text-decoration: none;
}
.topmenu2 a:hover {
text-decoration:underline;
}