Foros del Web » Creando para Internet » CSS »

Crear un botón con un contenedor diseñado en CSS

Estas en el tema de Crear un botón con un contenedor diseñado en CSS en el foro de CSS en Foros del Web. Buenas, Primero explico que tengo, y luego el resultado que me gustaria tener: Tengo un cuadro, que dentro, tiene dos cuadros mas, o sea, un ...
  #1 (permalink)  
Antiguo 10/08/2010, 14:07
 
Fecha de Ingreso: octubre-2008
Ubicación: España
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 1
Crear un botón con un contenedor diseñado en CSS

Buenas,

Primero explico que tengo, y luego el resultado que me gustaria tener:

Tengo un cuadro, que dentro, tiene dos cuadros mas, o sea, un contenedor con dos sub-contenedores dentro (madre y 2 hijas), todo en CSS.

Madre: CUADRO
Hijas: CUADRO_HIJA_1 y CUADRO HIJA_2

Código CSS:

Código PHP:
.cuadro {
    
height50px;
    
width80px;
    
borderdouble;
}

.
cuadro_hija_1 {
    
height50px;
    
width50px;
    
positionrelative;
    
background-color#9CA3D5;
    
colorblack;
    
text-alignleft;
    
font8pt Verdana;
    
floatleft;
}
.
cuadro_hija_2 {
    
height50px;
    
width30px;
    
positionrelative;
    
background-color#7077A4;
    
colorblack;
    
text-alignright;
    
font15pt Verdana bold;
    
floatright;


Código PHP:

Código PHP:
    <div class='cuadro'>
            <
div class='cuadro_hija_1'>
                        
M:<br>
                        
T:<br>
                        
N:<br>
            </
div>
            <
div class='cuadro_hija_2'>12</div>
    </
div
Con eso, obtengo este dibujo:




Ha quedado bien, el contenedor madre, que es el recuadro de doble línea, mientras que las dos hijas, están dentro de la madre, con colores diferentes, una a la izquierda y la otra a la derecha.
La duda que me surje es que TODO debe ser un BOTÓN, o sea, el contenedor MADRE, es un botón (con toda la información dinámida en el interior, que se puede variar tanto la hija de la izquierda como los numeros de la derecha, controlado en PHP)
No sé donde poner el FORM ni el INPUT.

Con el siguiente código, se me ha quedado tal como se muestra en la gráfica:

Código PHP:
        <div class='cuadro'>
                <
form action='insertar-php' method='post'>
                <
input type='submit'>
                <
div class='cuadro_hija_1'>
                        
M:<br>
                        
T:<br>
                        
N:<br>
                </
div>
                <
div class='cuadro_hija_2'>12</div>
                </
form>
        </
div



No se si me he explicado bien, podeis preguntar y os aclaro....

¡Gracias!
  #2 (permalink)  
Antiguo 11/08/2010, 11:20
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.047
Antigüedad: 8 años, 11 meses
Puntos: 46
Respuesta: Crear un botón con un contenedor diseñado en CSS

Hola.

Si te entendi bien, creo que necesitas algo como esto:

Código CSS:
Ver original
  1. .cuadro {
  2.     width: 115px;
  3.     border: double;
  4. }
  5.  
  6. .cuadro_hija_1 {
  7.     height: 50px;
  8.     width: 85px;
  9.     position: relative;
  10.     background-color: #9CA3D5;
  11.     color: black;
  12.     text-align: left;
  13.     font: 8pt Verdana;
  14.     float: left;
  15. }
  16. .cuadro_hija_2 {
  17.     height: 50px;
  18.     width: 30px;
  19.     position: relative;
  20.     background-color: #7077A4;
  21.     color: black;
  22.     text-align: right;
  23.     font: 15pt Verdana bold;
  24.     float: right;
  25. }  
  26. .clear {clear:both;font-size:0}
  27. input{
  28.     background:none repeat scroll 0 0 transparent;
  29.     color:#000000;
  30.     height:66px;
  31.     position:absolute;
  32.     width:116px;
  33.     z-index:2;
  34. }

Código HTML:
Ver original
  1. <div class="cuadro">
  2.                 <form method="post" action="insertar-php">
  3.                 <input value="" type="submit">
  4.                 </form>
  5.                 <div class="cuadro_hija_1">
  6.                         M:<br>
  7.                         T:<br>
  8.                         N:<br>
  9.                 </div>
  10.                 <div class="cuadro_hija_2">12</div>
  11.                 <div class="clear"></div>
  12. </div>

Suerte.
  #3 (permalink)  
Antiguo 11/08/2010, 18:39
 
Fecha de Ingreso: octubre-2008
Ubicación: España
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Crear un botón con un contenedor diseñado en CSS

Si, justamente necesito eso, un botón invisible, tal como me has escrito, pero en este caso, se me ha desaparecido todos los INPUTS (tanto botones como inputs de texto) de la web!!!

¿Se puede personalizarlo para cada INPUT por separado?
  #4 (permalink)  
Antiguo 12/08/2010, 00:36
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.047
Antigüedad: 8 años, 11 meses
Puntos: 46
Respuesta: Crear un botón con un contenedor diseñado en CSS

si, eso se que se me paso.

en lugar de poner las propiedasdes en la etiqueta input

Código CSS:
Ver original
  1. input{
  2.     background:none repeat scroll 0 0 transparent;
  3.     color:#000000;
  4.     height:66px;
  5.     position:absolute;
  6.     width:116px;
  7.     z-index:2;
  8. }

ponlas en una clase
Código CSS:
Ver original
  1. .boton{
  2.     background:none repeat scroll 0 0 transparent;
  3.     color:#000000;
  4.     height:66px;
  5.     position:absolute;
  6.     width:116px;
  7.     z-index:2;
  8. }

y a los input (botones) que vallan a tener estas catacteristicas los pones como:
<input value="" type="submit" class='boton'>

NOTA: la clase puede tener cualquier otro nombre

suerte

Etiquetas: contenedor
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 16:51.