0

Disculpen, ultimamente he estado trabajando con PHP, y me he dado cuenta de algo.

Cada vez que cambio de a me cambia el estilo de ese boton. Hasta ahi lo entiendo, porque el estilo dice "button{...}", pero luego, aunque le ponga el "input[type=button]{...}", sigue sin tomar el estilo.

También, me sucede que derrepente algunas cosas pierden su lugar(dejaré una imagen para que vean). Espero que me puedan explicar el por qué suceden éste tipo de cosas.

Código de HTML en la barra de Navegacion:

<body>
  <div class="Navegacion">
    <aside class="nav">
      <nav>
        <ul>
          <li><img src = "img/logo.png"</li>
          <li> <a href="nomina1 lobby.html">Inicio</a> </li>
          <li> <a href="nomina2 busqueda.html">Registros</a> </li>
          <footer id="f"> <a href="../Inicio.php">Cerrar Sesión</a> </footer>
        </ul>
      </nav>
    </aside>
  </div>

Codigo CSS de barra de Navegación:

.Navegacion{
  color:#000;
  font-family: Verdana, "Geneva", sans-serif;
  font-variant: small-caps;
  width: 15%;
  height: 97.5%;
  font-size: 90%;
  background-color: rgba(200,200,200, 0.5);
  position: absolute;
  margin:0;
  border-radius: 5px;
}

Código HTML del boton.

<div class="Confirmaciones">
    <label id="Confirmacion">Confirmaciones</label><br><br>
    <label>Entrada:</label>
    <label><?php echo $row['firmaEntrada']; ?></label><br><br>
    <label>Salida:</label>
    <label><?php echo $row['firmaSalida']; ?></label><br><br>
    <label>Receso:</label>
    <label><?php echo $row['firmaReceso']; ?></label>
  </div>
  <br>
  <?php  } ?>
      <div class="Botones">
        <button type="button" name="Enviar"> <a href="promotor registro general.php">Volver</a></button>
      </div>

Código CSS del boton:

button[type="button"]{
  border-radius: 4px;
  border:none;
  outline: none;
  height: 30px;
  width: 33%;
  left:30%;
  background-color: rgba(10,20,70,1);
  color:white;
  font-family:'Droid Sans', sans-serif;
  left: 27%;
  position: absolute;
}
button[type="button"]:hover{
  background-color: rgba(15,30,80,1);
  cursor: pointer;
}
.Confirmaciones{
  font-size: 75%;
  left:40%;
  top: 60%;
  position: absolute;
}

Aquí se pone el botón sobre un label que dice "Salida:

Aquí se pone un color mas claro del gris fuera del div, son como 15px extras que se marcan.

introducir la descripción de la imagen aquí

Así deberia ser.

introducir la descripción de la imagen aquí

9
  • Intenta poner "!important" (sin comillas) al final de cada propiedad de tu clase css.
    – configbug
    Commented el 9 ago. 2018 a las 23:07
  • No funciona, de hecho, lo cambio a html el archivo y si funcionan los estilos correctos(tampoco me deja editar, pero funcionan los estilos) Commented el 9 ago. 2018 a las 23:13
  • Sería ideal que copies tu codigo HTML y CSS para poder ayudarte.
    – configbug
    Commented el 9 ago. 2018 a las 23:25
  • Habría que ver el código para saber que ocurre exactamente. Respecto a lo del botón hablas de los selectores button e input[type=button] que hacen referencia a dos elementos html distintos: <button> y <input type="button>
    – user7176
    Commented el 10 ago. 2018 a las 6:41
  • 1
    Estatas dandole un atributo type a una etiqueta button, el atributo type solo funciona en input Commented el 31 ago. 2018 a las 18:24

1 respuesta 1

2

Estas usando un a dentro de un button y posiblemente se estan pisando los estilos. Da igual que cambies el estilo del button si dentro hay un <a> con sus propios estilos.

Ademas creo que te estas liando:

  • Has metido un button con "enviar" (pero sin asociar a un form ni direccion), y dentro del boton un link a "volver", eso no tiene sentido.
  • Dentro de los href de <a> hay espacios, eso no te va a funcionar tampoco.
  • La etiqueta <img> está sin cerrar.
  • Los <label> estan sin asociar y sospecho que le estas aplicando la etiqueta a campos.
  • Has metido un <footer> dentro de un <ul>

Deberias pegarle un repaso en profundidad a todo...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.