Foros del Web » Creando para Internet » CSS »

Ancho fijo en botones

Estas en el tema de Ancho fijo en botones en el foro de CSS en Foros del Web. Hola normalmente hago mas PHP que otra cosa pero en este caso me ha tocado retocar un entorno gráfico y tengo una duda. Esta es ...
  #1 (permalink)  
Antiguo 17/09/2009, 16:23
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 21 años, 11 meses
Puntos: 2
Ancho fijo en botones

Hola normalmente hago mas PHP que otra cosa pero en este caso me ha tocado retocar un entorno gráfico y tengo una duda.
Esta es la web para poder visualizarla.
http://desarrollo-app.webcindario.com/css2/page.html
Lo que quiero y no he conseguido tras mucho tiempo con dreamweaver es que los botones de arriba a la izquierda (BOTON 1, BOTON DOS Y BOTON NUMBER TRES) mantengan la misma anchura independientemente del texto que se les ponga.
Gracias de antemano.
Un saludo.

Este es el CSS
Código HTML:
.Button .btn
{
  position: relative;
  overflow: hidden;
  display: block;
  width: auto;
  z-index: 0;
  height: 20px;
  color: #ECEEEF;
  white-space: nowrap;
  float: left;
}

.Button .t
{
  height:20px;
  white-space: normal;
  padding: 0 50px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  line-height: 20px;
  text-decoration: none !important;
}

input, select
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
}

.Button .active
{
  color: #E9EFF2;
}

.Button .hover,  a.Button:hover
{
  color: #F1F6F8;
  text-decoration: none !important;
}

.Button .active .r
{
  top: -40px;
}

.Button .hover .r
{
  top: -20px;
}

.Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 2px;
  height: 60px;
}


.Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:405px;
  height: 60px;
}


.Button .active .l
{
  top: -40px;
}

.Button .hover .l
{
  top: -20px;
}

.Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 2px;
  height: 60px;
}


.Button .l, .Button .r span
{
  background-image: url('images/Button.png');
}

/* end Button */
Y este es el HTML
Código HTML:
  
    <div><form method="get" id="newsletterform" action="javascript:void(0)">
    <input type="text" value="" name="email" id="s" style="width: 95%;" />
    <button class="Button" type="submit" name="search">
            <span class="btn">
                <span class="t">Boton 1</span>
                <span class="r"><span></span></span>
                <span class="l"></span>
            </span>
    </button>
   <button class="Button" type="submit" name="search">
            <span class="btn">
                <span class="t">Boton dos</span>
                <span class="r"><span></span></span>
                <span class="l"></span>
            </span>
    </button>
	<button class="Button" type="submit" name="search">
            <span class="btn">
                <span class="t">Y boton number 3</span>
                <span class="r"><span></span></span>
                <span class="l"></span>
            </span>
    </button>
    
    
    </form></div>
</div> 
  #2 (permalink)  
Antiguo 17/09/2009, 18:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Ancho fijo en botones

Cita:
button.Button, a.Button {width: 100%}
.Button .btn {width: 100%}
.Button .t {padding:0 5px;}
Creo que con eso es suficiente, aunque tienes (creo) alguna propiedad definida reiteradamente y alguna otra innecesaria.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 18/09/2009, 11:46
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 21 años, 11 meses
Puntos: 2
Respuesta: Ancho fijo en botones

Funciona perfectamente.
Qracias y un saludo.
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 09:14.