1

Tengo dos botones a diferente altura, ¿a qué se debe? Los botones se llaman: atras y pagar.

Os muestro el código HTML y CSS.

<?php

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Confirmación reserva</title>
        <link rel="stylesheet" href="css/estilos_confirmacion.css">
    </head>

    <body>
        <?php
        echo"<br/>";
            //Si existe y hemos pulsado el botón "Reservar"...
            if(isset($_POST["reservar"])){
                echo "<form action='pagar.php' name='mireserva' id='mireserva' method='POST' style='text-align:center'>";
                echo "<div id='detalles_reserva'>";
                    echo 
                    "<img src='imagenes/cabaña.png' height='22px' width='22px' alt='Cabaña'>&nbsp;&nbsp;Cabaña: ".$idcabana."
                    <br/><br/>".
                    "<img src='imagenes/email.png' height='22px' width='22px' alt='Cabaña'>&nbsp;&nbsp;Email: ".$idemail."
                    <br/><br/>".
                    "<img src='imagenes/calendario.jpg' height='22px' width='22px' alt='Check_in'>&nbsp;&nbsp;Check_in: ".$check_in."
                    <br/><br/>".
                    "<img src='imagenes/calendario.jpg' height='22px' width='22px' alt='Check_out'>&nbsp;&nbsp;Check_out: ".$check_out."<br/><br/>";
                echo "</div>";
                echo "<br/>";

                echo "<div id='mostrar_imagenes'>";
                    //Cargamos las imágenes en un array $imagenes.
                    $imagenes = BD::obtenerImagenesCabana($idcabana);
                    foreach($imagenes as $imagen){
                        echo "<img src='imagenes/".$imagen."' width='220' height='200' onclick='cambiarImagen(this)'/> &nbsp;&nbsp;&nbsp;&nbsp;";
                    }
                    echo "<br/>";
                echo "</div>";

                echo "<br/><br/><br/><br/>";
                    echo "<center><a href='imagenes/".$imagenes[0]."' class='zoom'> <img id='grande' src='imagenes/".$imagenes[0]."' width='460' height='400'/> </a></center>";
                echo "<br/><br/><br/><br/><br/><br/><br/>";
                echo "<input type='image' src='imagenes/pagar.png' height='20px' width='26px' name='pagar' id='pagar' />";
                echo "<input type='image' src='imagenes/atras.png' height='20px' width='26px' name='atras' id='atras' onclick='javascript:history.back();'/>";
                echo "</form>";
            }else{
                //Si recargamos la página perdemos los datos, así que volvamos al inicio: "reservar.php".
                unset($_SESSION["cliente"]);
                header("Refresh:0; url=iniciar_sesion_cliente.php");
            }
        ?>
    </body> 
</html>



#detalles_reserva{
    margin: auto;
    width: 50%;
    max-width: 500px;
    max-height: 900px;
    background: #F3F3F3;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.2);
}

#mostrar_imagenes{
    margin: auto;
    width: 80%;
    max-width: 940px; 
    max-height: 200px;
    background: #F3F3F3;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.2);
}


#atras,
#pagar {
    position: absolute;
    background: skyblue;
    color: black;
    padding: 10px;
    border-radius: 5px;
    bottom: 10px;
    text-decoration: none;
}

#atras:hover,
#pagar:hover {
    background: rgba(135, 206, 235, 0.8);
    color: blue;
    cursor: pointer;
}

#pagar {
    position: relative;
    left: 180px;
    top: -6em;
}

#atras {
    position: relative;
    left: -200px;
    top: 1em;
}

#grande{
   width: 460px;
}

Deben estar a la misma altura.

introducir la descripción de la imagen aquí

2
  • ¿Podrías poner el código HTML generado en lugar del PHP que genera el HTML? Así sería más fácil de reproducir el problema y ayudarte. Te recomiendo que leas cómo crear un ejemplo mínimo verificable.
    – Alvaro Montoro
    el 1 ene. 2018 a las 18:51
  • Si, cierto. Pondré solo el código HTML. Edito pregunta.
    – omaza1990
    el 1 ene. 2018 a las 18:52

2 respuestas 2

2

Buenas, el problema lo tienes en la propiedad top de las ids pagar y atras, esta propiedad es la distancia entre el border superior que lo contiene y el mismo elemento.

Tendría que quedar algo así

#pagar {
    position: relative;
    left: 180px;
    top: 1em;
}

#atras {
    position: relative;
    left: -200px;
    top: 1em;
}

2

Hola ¿Como estas? Feliz año! Tu código aún muestra código php y no el html generado, deberías usar la opción de fragmento html/css/js para que la ayudas que obtengas de nosotros sea la más ideal para tu caso. Pero bueno, la respuesta de @IsmaelCarvajal sería la optima, aunque lo cierto es que revisando el html dinámico que generas, usas mal muchas etiquetas y presumo que no tienes muy claro muchas bases de css, tratare de resumir de colocarte una solución que funcionara para muchos casos y señalaré más abajo algunos errores en tu código que te sugiero modifiques.

Igualar en altura ambos botones

Usas position relative, pero no estableces sobre que ancestro html o etiqueta esta tomando referencia cada botón para su posición relativa, por lo que te sugiero que coloques posición relativa también al formulario o agrupes ambos botones en un div y a este le coloques esta propiedad, porque sino tomará como referencia la propia ventana o la posición inicial de estos elementos y en muchos casos se deformara. De resto lo que te sugiere Ismael, de igualar sus posiciones top ayudará, aunque en tu caso creo que colocarías mejor un top: -6em en ambos.

Dicho lo anterior y que seguramente funcionará en tu caso, lo cierto es que no es lo mejor que te podemos recomendar, ya que la maquetación que usas contiene mucho código de sobra, etiquetas obsoletas o estilos en linea, por lo que te recomiendo más bien hacer lo siguiente:

  • Es buena práctica colocarle a todo elemento una clase o multiclases y no usar muchos ids o al menos no de forma innecesaria. Los divs permite su reutilización que si hablamos de código de eficiente y no repetitivo es lo mejor, en cambio los ID es cuando un elemento necesariamente solo se usa una sola vez en todo el documento.
  • No uses la etiqueta center, esta es obsoleta desde hace mucho tiempo y aunque la mayoría de navegadores actuales la reconoce, quien sabrá hasta cuando. Substituyela con una clase llamada "centertext", "centerblock" o "centerboth" y a menos que uses flexbox, grids o floats te servirán para lo mismo en cualquier contexto, solo debes colocarla en un css así:

    • Para centrar elementos inline-block o inline como: img, span, buttons, inputs, etc

    .centertext { text-align: center; }

    • Para centrar elementos block, como form, p, section, p, article, etc

    .centerblock { margin: 0 auto; }

    • Para centrar elementos block, inline-block o inline sin distinción

    .centerboth {text-align: center; margin: 0 auto;}

  • Evita usar de sobremanera /br para separar etiquetas, en la mayoría de casos lo mejor es hacerlo mediante css, usando la propiedad margin-top o padding-top, un truco es hacerlo usando la medida em.

    • Cuando quieras 2 saltos de línea usa: margin-top: 2em;
    • Si quieres 6 saltos de línea: padding-top: 6em

    • Y así. Lo cierto es que la mayoria de devs usa margin, pero padding es una buena alternativa, aunque eso depende del maquetador y el objetivo.

  • Existe una mejor forma de alinear los botones, hoy en día se esta poniendo muy de moda flexbox y las grids, pero te voy a recomendar usar una más clasica usando floats, por que veo que aún no tienes muchas bases. Esta propiedad css permite alinear los elementos anidados dependiendo de un tamaño que le des al contenedor padre, puedes hacer flotar los elementos a la izquierda (float:right) o a la derecha (float: left).

Un ejemplo de maquetación práctica según mis recomendaciones para tu caso, sería así:

.form-tag{
  margin-top: 1em; /*separa un espacio de arriba*/
  margin-bottom: 5em; /*separa un espacio de abajo*/
}

.center{
  text-align: center;
}

.btn {
  position: absolute;
  background: skyblue;
  color: black;
  padding: 10px;
  border-radius: 5px;
  bottom: 10px;
  text-decoration: none;
  width: 26px;
  height: 20px;
}

.btn:hover {
  background: rgba(135, 206, 235, 0.8);
  color: blue;
  cursor: pointer;
}

.form_group{
  margin: auto;
  border: none;
  position: relative;
}

.form_group.imgs{
  margin-top: 4em;
}

.form_group.btns{
  width: 80% ;
  max-width: 400px;
  margin-top: 7em;  
}

#pagar {
  right: 0;
}

#atras {
  left: 0;
  float: left;
}

#grande{
  width: 460px;
  height: 400px;
}
<form class="form-tag center" action='pagar.php' name='mireserva' id='mireserva' method='POST'>
    <fieldset class="form_group imgs">
      <a href='imagenes/".$imagenes[0]."' class='zoom'>
        <img id='grande' src='imagenes/".$imagenes[0]."'/> 
      </a>        
    </fieldset>
    <fieldset class="form_group btns">
      <input type='image' src='imagenes/pagar.png' class="btn" name='pagar' id='pagar' />
      <input type='image' src='imagenes/atras.png' class="btn" name='atras' id='atras' onclick='javascript:history.back();'/>
    </fieldset>
  </form>

(Dale al boton ejecutar)

Espero te sirva y muchos éxitos!

2
  • Entonces @EdgarGutiérrez, si tengo un div llamado "a" y un div llamado "b" y quiero meter saltos de línea entre uno y otro, en lugar de "<br/>", ¿qué debo poner?
    – omaza1990
    el 2 ene. 2018 a las 17:42
  • Si quieres que siempre debajo de a hayan 4 saltos de línea, puedes declarar: a{padding-bottom:4em}, sí quieres que entre los dos elementos hayan 4 espacios de separación siempre, puedes darle 2 saltos de linea a cada elemento así: a, b {padding: 2em 0;}. Recuerda que em, se toma en base al tamaño de fuente del elemento o del ancestro que la tenga declarada, si no la tienen tomarán la del body y si quieres que siempre coja la del body, usas: rem. Si mi respuesta te sirvió, regalame un voto :) el 2 ene. 2018 a las 18:56

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.