Foros del Web » Creando para Internet » CSS »

Ajuste de objetos en página

 Estas en el tema de Ajuste de objetos en página en el foro de CSS en Foros del Web. Hola buenos días... Tengo un problema con algunos ajustes con CSS. Tengo un sitio hecho con PHP, Javascript... el sitio contiene puras imágenes, algunas con ...
  #1 (permalink)  
Antiguo 10/12/2012, 11:52
Avatar de Middrel  
Fecha de Ingreso: abril-2005
Mensajes: 835
Antigüedad: 19 años
Puntos: 27
Ajuste de objetos en página
Hola buenos días...

Tengo un problema con algunos ajustes con CSS. Tengo un sitio hecho con PHP, Javascript... el sitio contiene puras imágenes, algunas con movimiento y otras fijas. Sin embargo todas las imágenes las ajusto con CSS. El sitio se ajusta a diferentes resoluciones de pantalla, siendo en este, por el momento, ajustable a 1960 como máximo y 1440 como mínimo.

Bueno, como les decía... todo los objetos se acomodan con CSS, sin embargo hay dos imágenes que no he podido ajustar, en una resolución las veo en una posición y en otra resolución en otra... lo curioso es que uso el mismo proceso que en las demás.

En sitio lo tengo alojado en esta dirección: http://www.boutiquedeideas.com/mangu...ito-screen.php

Los objetos que no se acomodan son estos:

Código HTML:
 <div id="layer-contacto">
         	<img src="LINKM/CONTACTO.png" class="adaptive-contact" alt="" onMouseOver="this.src='LINKM/CONTACTO.png'" onMouseOut="this.src='LINKM/CONTACTO.png'" >
         </div>
Código HTML:
 <div id="button-layer-bottom"><!--	En esta zona definiremos como irán los botones a las diferentes secciones [QR & RA]  -->
            <div id="botones-gp3">
                    <a href="manguito.php?seccion=qr" class="fancybox">
                        <img src="LINKM/BOTON_MANGO-13.png" class="boton-qr" alt="" onMouseOver="this.src='LINKM/BOTON_MANGO-11.png'" onMouseOut="this.src='LINKM/BOTON_MANGO-13.png'" >
                    </a>
            </div>
            <div id="botones-gp4">
                    <a href="manguito.php?seccion=ra" class="fancybox">
                        <img src="LINKM/BOTON_MANGO-15.png" class="boton-ra" alt="" onMouseOver="this.src='LINKM/BOTON_MANGO-09.png'" onMouseOut="this.src='LINKM/BOTON_MANGO-15.png'" >
                    </a>
            </div>
         </div>
y el CSS es este:

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.     background-color:#000;
  6.     overflow-x:hidden;
  7.     font-family: Real, Arial, Helvetica, sans-serif;
  8. }
  9.  
  10. h1 {
  11.     font-size:48px;
  12.     font-weight:bold;
  13. }
  14.  
  15. /* Definimos la fuente a utilizar */
  16. @font-face {
  17.     font-family:'Real';
  18.     src: url('../Blanch/BLANCH_CAPS_LIGHT.otf');
  19.     src: local(':D'), url('../Blanch/BLANCH_CAPS_LIGHT.woff') format('woff'), 
  20.                         url('../Blanch/BLANCH_CAPS_LIGHT.otf') format('opentype'),
  21.                         url('../Blanch/BLANCH_CAPS_LIGHT.svg#webfont') format('svg');
  22.     color:#FFF;
  23.     font-size:85%;
  24.     font-style: normal;
  25.     font-variant: normal;   
  26.     font-weight: normal;
  27.     
  28. }
  29.  
  30. /* Cuerpo principal  */
  31. #wrapper {
  32.     position:absolute;
  33.     width:100%;
  34.     min-width:1440px;
  35.     height:auto; }
  36.  
  37. /* Definimos los estilos de los layers que conforman al cuerpo principal */
  38. #background-img {
  39.     width: 100%;
  40.     height: auto; }
  41.  
  42. #first-layer{
  43.     height:auto;
  44.     position:relative;
  45.     left:50%;
  46.     margin-left:150px;
  47.     margin-top:10%;
  48.     width:100%;
  49.     z-index:10; }
  50.  
  51. #second-layer{
  52.     height:auto;
  53.     position:relative;
  54.     margin-top:15%;
  55.     text-align:center;
  56.     width:100%;
  57.     z-index:15; }
  58.     
  59. #third-layer{
  60.     height:auto;
  61.     position:relative;
  62.     margin-left:-11%;   
  63.     margin-top:20%;
  64.     width:100%;
  65.     z-index:30; }
  66.  
  67. #four-layer{
  68.     height:auto;
  69.     position:relative;
  70.     margin-left:37%;    
  71.     margin-top:-30%;
  72.     width:100%;
  73.     z-index:35; }
  74.  
  75. #five-layer{
  76.     height:auto;
  77.     position:relative;
  78.     margin-left:-11%;   
  79.     margin-top:51%;
  80.     width:100%;
  81.     z-index:35; }
  82.  
  83. #six-layer{
  84.     height:auto;
  85.     position:relative;
  86.     margin-left:37%;    
  87.     margin-top:-28%;
  88.     width:100%;
  89.     z-index:35; }
  90.     
  91. #sevent-layer{
  92.     height:auto;
  93.     position:relative;
  94.     margin-left:37%;    
  95.     margin-top:-184%;
  96.     width:100%;
  97.     z-index:20; }
  98.  
  99. #eight-layer{
  100.     height:auto;
  101.     position:relative;
  102.     margin-left:25%;    
  103.     margin-top:-17%;
  104.     width:100%;
  105.     z-index:18; }
  106.  
  107. #button-layer-top{
  108.     height:auto;
  109.     position:relative;
  110.     margin-top:1%;
  111.     width:100%;
  112.     z-index:20; }
  113.  
  114. #button-layer-bottom{
  115.     height:auto;
  116.     position:relative;
  117.     margin-top:-2%;
  118.     width:100%;
  119.     z-index:25; }
  120.  
  121. #manguito-char {
  122.     position:absolute;
  123.     width:100%;
  124.     top:1545px;
  125.     text-align:center;
  126.     z-index: 5; }
  127.     
  128. /* Definimos los estilos de los botones [comment box's]*/   
  129.  
  130. #botones-gp1{
  131.     height:auto;
  132.     margin-left:25%;
  133.     width:auto; }
  134.  
  135. #botones-gp2{
  136.     height:auto;
  137.     margin-left:50%;
  138.     width:auto; }
  139.  
  140. #botones-gp3{
  141.     height:auto;
  142.     margin-left:77%;
  143.     width:auto; }
  144.  
  145. #botones-gp4{
  146.     height:auto;
  147.     margin-left:23%;
  148.     width:auto; }
  149.     
  150. /* Colocamos las cajas de diálogos */
  151.  
  152. #caja-dialogo-1{
  153.     position:relative;
  154.     margin-left:51%;
  155.     margin-top:-172%;   
  156.     width:100%;
  157.     z-index:40; }
  158.  
  159. #caja-dialogo-2{
  160.     position:relative;
  161.     margin-left:52%;
  162.     margin-top:28%; 
  163.     width:100%;
  164.     z-index:40; }
  165.  
  166. #caja-dialogo-3{
  167.     position:relative;
  168.     margin-left:52%;
  169.     margin-top:25%; 
  170.     width:100%;
  171.     z-index:40; }
  172.     
  173. #layer-contacto{
  174.     position:relative;
  175.     margin-top:198%;
  176.     text-align:center;
  177.     z-index:40;
  178. }
  179.  
  180. /* Hacemos adaptivas las diferentes imagenes que vamos a utilizar */
  181. .adaptive-img-background {
  182.     position:absolute;
  183.     width:100%;
  184.     z-index:1; }
  185. .adaptive-img-nave{ width:50%;}
  186. .adaptive-img-gral{ width:70%;}
  187. .adaptive-mainchar{ width:11%; }
  188. .adaptive-img-first{ width:25%; }
  189. .adaptive-img-second{ width:80%; }
  190. .adaptive-dialog{ width:35%; }
  191. .adaptive-contact{ width:16%; }
  192.  
  193.  
  194. /* Estilos para ventanas de fancybox */
  195.  
  196. .fancy-01 {
  197.     position:absolute;
  198.     width: 10%;
  199.     height: auto;
  200.     top:100%;
  201.     margin-top:-10%;
  202.     z-index: 100;
  203. }
  204.  
  205. #content-fancybox {
  206.     position:absolute;
  207.     width:100%;
  208.     height:100%;
  209. }
  210.  
  211. .content-info {
  212.     
  213.     font-family:Arial, Helvetica, sans-serif;
  214.     font-size-adjust:100%;
  215.     color:#FFF;
  216. }
  217.  
  218. #pp {
  219.     z-index:1000;
  220.     /*opacity:0.1;*/
  221. }
  222.  
  223. /* Sección contacto */
  224.  
  225. #contacto-sitio {
  226.     position:absolute;
  227.     top:6237px;
  228.     left:851px;
  229.     z-index:100;
  230. }
  231.  
  232. .caja-contacto {
  233.     margin-left:60px;
  234.     height:350px;
  235. }
  236.  
  237. #contacto-form, .etiquetas {
  238.     padding: 10px;
  239.     font-size: 1.5em;
  240.     color:#FFF;
  241. }
  242.  
  243. #nombre,  
  244. #email,  
  245. #telefono,
  246. #comentarios {  
  247.     font-size:15px;  
  248.     margin-bottom:-137px;  
  249. }  
  250.  
  251. #nombre,  
  252. #email,  
  253. #telefono {  
  254.     width:450px;  
  255.     border: 1px solid #CEE1E8;  
  256.     margin-bottom:20px;  
  257.     padding:4px;  
  258. }  
  259.  
  260. #comentarios {
  261.     width:450px;  
  262.     border: 1px solid #CEE1E8;  
  263.     margin-bottom:-140px;  
  264.     padding:4px;  
  265. }
  266.  
  267. #enviar {
  268.     margin-top: 134px;
  269.     margin-left: 431px;
  270.     font-size:38px;
  271. }
  272.  
  273. #contacto-form input:focus,  
  274. #contacto-form select:focus,  
  275. #contacto-form textarea:focus {  
  276.     border: 1px solid #AFCDD8;  
  277.     background-color: #EBF2F4;  
  278. }  
  279.  
  280. #contacto-form textarea {  
  281.     height:150px;  
  282.     resize: none;  
  283.     margin-top:13px;
  284. }  
  285.  
  286. #contacto-form label {  
  287.     display:block;  
  288. }  
  289.  
  290. #contacto-form .required {  
  291.     font-weight:bold;  
  292.     color:#F00;  
  293. }  
  294.  
  295. #contacto-form #submit-button {  
  296.     background-color:#333;  
  297.     color:#FFF;  
  298.     border:none;  
  299.     display:block;  
  300.     float:right;  
  301.     margin-bottom:0px;  
  302.     margin-right:6px;  
  303.     background-color:#8FB5C1;  
  304.     -moz-border-radius:8px;  
  305. }  
  306.  
  307. #contacto-form #submit-button:hover {  
  308.     background-color: #A6CFDD;  
  309. }  
  310.  
  311. #contacto-form #submit-button:active {  
  312.     position:relative;  
  313.     top:1px;  
  314. }
  315.  
  316. .nombre { margin-left: 45px; }
  317. .email { margin-left: 64px; }
  318. .telefono { margin-left:37px; }
  319.  
  320. input:required, textarea:required {  
  321.     -moz-box-shadow:none;  
  322.     -webkit-box-shadow:none;  
  323.     -o-box-shadow:none;  
  324.     box-shadow:none;  
  325. }  
  326. /* Normalize placeholder styles */  
  327. /* chrome, safari */  
  328. ::-webkit-input-placeholder {  
  329.     color:#CCC;  
  330.     font-style:italic;  
  331. }  
  332. /* mozilla */  
  333. input:-moz-placeholder, textarea:-moz-placeholder {  
  334.     color:#CCC;  
  335.     font-style:italic;  
  336. }  
  337. /* ie (faux placeholder) */  
  338. input.placeholder-text, textarea.placeholder-text  {  
  339.     color:#CCC;  
  340.     font-style:italic;  
  341. }  
  342.  
  343. /* Secciones */
  344.  
  345. .contenido-seccion {
  346.     width:100%;
  347. }
  348.  
  349. .encabezado-seccion {
  350.     font-family:Impact;
  351.     font-size:4em;
  352.     color:#FFF;
  353.     
  354.     margin:40px;
  355. }
  356.  
  357. .sub-head {
  358.     color:#FF0;
  359. }
  360.  
  361. .cuerpo-seccion {
  362.     font-size:3em;
  363.     color:#FFF;
  364.     margin: 0 0 0 40px;
  365.     width:37%;
  366.     float:left;
  367. }
  368.  
  369. .seccion-media {
  370.     float:left;
  371.     margin-top:-16px;
  372.     width:55%;  
  373. }
  374.  
  375. /* Clase Val*/
  376.  
  377. .val{
  378.     opacity:1.0;
  379. }
  380.  
  381. .subseccion-html5, .subseccion-diseño,
  382. .subseccion-progra, .subseccion-comercio{
  383.     cursor:pointer;
  384. }

De todas formas creo que todo lo pueden bajar de la página xD

Bueno, básicamente es eso, que esos objetos que menciono no se acomodan como los demás. Talvéz algo se me está pasando, pero no lo ubico.

De antemano, gracias por sus comentarios.

Etiquetas: ajuste, chrome, contenido, hover, html, imagenes, objetos, página, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:22.