05/06/2014, 17:44
|
| | Fecha de Ingreso: junio-2014 Ubicación: mexico df
Mensajes: 2
Antigüedad: 10 años, 5 meses Puntos: 0 | |
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;
} |