Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Posicionar 3 capas centralmente al lado de otra

Estas en el tema de Posicionar 3 capas centralmente al lado de otra en el foro de CSS en Foros del Web. Tengo una web donde uso un Formlario de Loggin, en dicho formulario busco situar 2 capas al lado para ponerle una imagen de un borde ...
  #1 (permalink)  
Antiguo 18/03/2014, 09:53
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 12 años, 2 meses
Puntos: 19
Posicionar 3 capas centralmente al lado de otra

Tengo una web donde uso un Formlario de Loggin, en dicho formulario busco situar 2 capas al lado para ponerle una imagen de un borde degradado como se muestra en la imagen:


mi codigo html es:

Código HTML:
Ver original
  1. <div class="logueo_back">
  2.     <div class="logueo">
  3.      <div class="logueo" id="img_ajax">
  4.                 <img src="images/ajax-loader.gif" border="0" alt="Cargando" title="Cargando" style="margin-top:95px;" />
  5.             </div>
  6.         <div class="body_left" id="body_left"></div>
  7.         <div class="body_center" id="body_center">
  8.             <div id="log_error">
  9.                 Usuario o Contrase&ntilde;a inv&aacute;lidos
  10.             </div>
  11.            
  12.             <div class="loginbox">
  13.                 <span>Iniciar sesi&oacute;n</span>
  14.                 <form name="login" id="login">
  15.                     <input name="username" id="username" class="status" value="Usuario" type="text"/>
  16.                     <input name="pass_txt" id="pass_txt" class="status" value="Contrase&ntilde;a" type="text"/>
  17.                     <input name="pass" id="pass" class="status" value="" type="password" style="display:none;" />
  18.                     <input value="Entrar" type="submit" class="btnlogin"/>
  19.                 </form>
  20.             </div>
  21.         </div>
  22.         <div class="body_right" id="body_right"></div>
  23.     </div>
  24. </div>

css:
Código CSS:
Ver original
  1. /*Esta capa contiene los 2 bordes y el Form de Inicio*/
  2. .logueo {
  3.     /*top: 135px;*/
  4.     /*top: 34px;*/
  5.     text-align:center;
  6.     position:absolute;
  7.     margin:auto;
  8.     padding:0;
  9.     float: left;
  10.     width: 100%;
  11.     height: 100%;
  12.     border: 1px solid #F00;
  13. }
  14. #body_left{
  15.     float: left;
  16.     padding: 0;
  17.     width: 87px;
  18.     /*width: 25%;*/
  19.     height: 100%;
  20.     margin-left: 25%;
  21.     background-size: 87px 100%;
  22.     background-image: url(../images/body_left.png);
  23.     background-repeat: no-repeat;
  24. }
  25. #body_center{
  26.     float: left;
  27.     margin: 50px 50px;
  28.     /*width: 50%;*/
  29.     padding: 0;
  30. }
  31. #body_right{
  32.     float:right;
  33.     padding: 0;
  34.     /*width: 25%;*/
  35.     margin-right: 25%;
  36.     width: 87px;
  37.     height: 100%;
  38.     background-size: 87px 100%;
  39.     background-image: url(../images/body_right.png);
  40.     background-repeat: no-repeat;
  41. }
  42. /*Centra el IMG_Ajax*/
  43. .logueo_back {
  44.     position:absolute;
  45.     top: 103px;
  46.     z-index: 2;
  47.     height: 100%;
  48.     width: 100%;
  49.     float:left;
  50. }
  51. .loginbox {
  52.     width: 350px;
  53.     margin: auto;
  54.     padding-top: 8px;
  55.     padding-right: 0;
  56.     padding-bottom: 8px;
  57.     padding-left: 0;
  58.     height: 180px;
  59. }
  60. .loginbox span {
  61.     font-size: 14px;
  62.     font-weight: bold;
  63.     color: #333333;
  64.     background-color: #c1d72e;
  65.     float: left;
  66.     width: 338px;
  67.     height: 23px;
  68.     padding-top: 7px;
  69.     padding-right: 6px;
  70.     padding-bottom: 0;
  71.     padding-left: 6px;
  72.     margin-bottom: 20px;
  73.     display: block;
  74. }
  75. .btnlogin {
  76.     font-family: Verdana, Arial, Helvetica, sans-serif;
  77.     font-size: 16px;
  78.     font-weight: bold;
  79.     color: #FFFFFF;
  80.     background-color: #c1d72e;
  81.     height: 30px;
  82.     border: 4px solid #c1d72e;
  83.     margin-top: 10px;
  84.     margin-left: 124px;
  85.     float: left;
  86.     width: 101px;
  87. }

Pueden ayduarme?
  #2 (permalink)  
Antiguo 18/03/2014, 13:57
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 12 años, 2 meses
Puntos: 19
Respuesta: Posicionar 3 capas centralmente al lado de otra

Solucion en el tema:http://www.forosdelweb.com/f53/div-c...4/#post4580428

Etiquetas: background, capas, color, html, imagenes, lado
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




La zona horaria es GMT -6. Ahora son las 20:47.