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;
}
