Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

no hay cambios al colocar la clase = checkbox a la etiqueta label, para poder añadir el margen necesario

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Tipos de campos diferentes y actividad CSS para inputs más complejos

por José Antonio Callejas Huayta
| 27.6k xp | 5 posts
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Contacto-Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

    </head>

    <body>
        <header>
            <div class="caja">
                <h1><img src="imagenes/logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="Contacto.html">Contacto</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <form>
                <label for="nombreapellido">Nombre y Apellido</label>
                <input type="text" id="nombreapellido" class="input-padron">

                <label for="correoelectronico">Correo Electronico</label>
                <input type="text" id="correoelectronico" class="input-padron">

                <label for="numerotelefonico">Número Telefonico</label>
                <input type="text" id="numerotelefonico" class="input-padron">

                <label for="mensaje">Mensaje</label>
                <textarea cols="70" rows="10" id="mensaje" class="input-padron"></textarea>

                <div>
                <p>Cómo le gustaria que lo contactemos?</p>

                    <label for="radio-email"><input type="radio" name="contacto" value="email" id="radio-email">Email</label>

                    <label for="radio-telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Telefono</label>

                    <label for="radio-whatsapp"><input type="radio" name="contacto" value="whatsapp" id="radio-whatsapp">Whatsapp</label>

                </div>

                <label class="checkbox"><input type="checkbox">Le gustaría recibir novedades de la Barbería Alura?</label>

                <input type="submit" value="Enviar Formulario">



            </form>
        </main>
        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="copyright">&copy Copyright Barberia Alura - 2023</p>
        </footer>
    </body>
</html>
header{
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}
nav li{
    display: inline;
    margin: 0 0 0 25px;

}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}

nav a:active{
    color: red;
    font-size: 25px;
}

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}
.productos li:hover{
    border-color: #c78c19;
}
.productos li:active{
    border-color: #088c19;
}

.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 33px;
}

.producto-descripción{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}
.copyright{
    color: #ffffff;
    font-size: 13px;
    margin: 20px;
}

main{
    width: 940px;
    margin: 0 auto;
}

form{
    margin: 40px 0;
}

form label, form p{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padron{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox{
    margin:20px 0;
}
4 respuestas
por Virginia Salcedo Guiñazú
| 75.1k xp | 18 posts
Diseñadora

Hola, me sucede algo similar. Después de colocar class="input-padron" no se alinea el Type- radio, pero sí el Checkbox He revisado el HTML y el CSS y queda así...

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por Virginia Salcedo Guiñazú
| 75.1k xp | 18 posts
Diseñadora

Compañero, ya encontré la solución. Me suele pasar que después de formular la pregunta, encuentro inmediatamente la respuesta jajaja El tema de ajuste es en el HTML. Lo deduje de ver mi página donde está alineado el CHECKBOX, y no así los otros type-radio. Y es que el INPUT está colocado dentro del LABEL. Quedaría una etiqueta dentro de la otra. Entonces de esa manera aparece primero el circulito y luego el label. Ahí te paso el código...

por Virginia Salcedo Guiñazú
| 75.1k xp | 18 posts
Diseñadora 
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <form>
            <label for="nombreapellido">Nombre y Apellido</label>
            <input type="text" id="nombreapellido" class="input-padron">

            <label for="correoelectronico">Correo Electrónico</label>
            <input type="text" id="correoelectronico" class="input-padron">

            <label for="telefono">Teléfono</label >
            <input type="text" id="telefono" class="input-padron">

            <label for="mensaje">Mensaje</label>
            <textarea cols="70" rows="10" id="mensaje" class="input-padron"></textarea>

            <div>
                <p>Cómo le gustaría que lo contactemos?</p>

                <label for="email"><input type="radio" name="contacto"  value="email" id="radio-email">Email</label>

                <label for="telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Teléfono</label>                    

                <label for="whatsapp"><input type="radio" name="contacto" value="whatsapp" id="radio-wathsapp">WhatsApp</label>                    

            </div>

            <label  class="checkbox"> <input type="checkbox">Le gustaría recibir novedades de la Barbería Alura? </label>

            <input type="submit" value="Enviar formulario">

        </form>

    </main>

    <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyright">&copy; Copyright Barbería Alura - 2020</p>
    </footer>
</body>
por Virginia Salcedo Guiñazú
| 75.1k xp | 18 posts
Diseñadora

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad