Desbordamiento de un elemento
Resuelto
charline159
Mensajes publicados
216
Estado
Miembro
-
dachiasse Mensajes publicados 1932 Estado Miembro -
dachiasse Mensajes publicados 1932 Estado Miembro -
Bonjour,
en regardant votre problème, il est possible que la superposition soit due à l'utilisation de propriétés CSS telles que `position`, `z-index`, ou des marges/paddings qui pourraient causer un débordement. Voici quelques pistes à explorer :
1. **Vérifiez les positions** : Si vous avez utilisé `position: absolute` ou `position: fixed` sur l'un de vos éléments, cela pourrait affecter la superposition des autres.
2. **Utilisez le z-index** : Si certains éléments sont positionnés, essayez d'utiliser `z-index` pour contrôler l'ordre d'empilement.
3. **Débordement du conteneur** : Assurez-vous que le conteneur parent du formulaire a des dimensions définies et que `overflow` est géré (par exemple, `overflow: auto;`).
4. **Vérifiez les marges** : Des marges négatives peuvent également provoquer des débordements inattendus.
En examinant le code sur jsFiddle, vous pourrez peut-être identifier exactement ce qui cause la superposition.
N'hésitez pas à ajuster ces éléments et à faire des tests pour voir si cela résout votre problème.
en regardant votre problème, il est possible que la superposition soit due à l'utilisation de propriétés CSS telles que `position`, `z-index`, ou des marges/paddings qui pourraient causer un débordement. Voici quelques pistes à explorer :
1. **Vérifiez les positions** : Si vous avez utilisé `position: absolute` ou `position: fixed` sur l'un de vos éléments, cela pourrait affecter la superposition des autres.
2. **Utilisez le z-index** : Si certains éléments sont positionnés, essayez d'utiliser `z-index` pour contrôler l'ordre d'empilement.
3. **Débordement du conteneur** : Assurez-vous que le conteneur parent du formulaire a des dimensions définies et que `overflow` est géré (par exemple, `overflow: auto;`).
4. **Vérifiez les marges** : Des marges négatives peuvent également provoquer des débordements inattendus.
En examinant le code sur jsFiddle, vous pourrez peut-être identifier exactement ce qui cause la superposition.
N'hésitez pas à ajuster ces éléments et à faire des tests pour voir si cela résout votre problème.
Enlaces relacionados:
- Paquete retenido por los servicios postales colissimo
- ¿Cómo eliminar la lista de reproducción? No puedo encontrar el ícono.
- Cómo corregir - Necesitarás una nueva aplicación
- eliminación de un elemento de la matriz (Lenguaje C)
- disco duro externo reconocido como elementos 25A2
- Error de archivo xml, XmlExeption: falta el elemento raíz
3 respuestas
-
Hola,
Me ha llevado tiempo. Bueno, tampoco soy desarrollador web, pero el problema era interesante.
He recuperado tu HTML y CSS para hacer pruebas. He descomentado la línea:border: 4px solid #8dcba5;
del CSS de body. La parte inferior del marco no está al mismo nivel que la parte inferior del formulario porque:height: 650px;
del CSS de form, así que comenté esta línea y el footer ahora está bien debajo del formulario.
Prueba, verás. -
Hola, y gracias por tu ayuda.
He hecho lo que propones (descomentar el atributo border en body, luego comentar height en form). Efectivamente, el párrafo que indica el error se coloca entonces debajo del formulario.
Sin embargo, para el footer, sigo teniendo el mismo problema, se superpone debajo del formulario, y no veo por qué.
Además, me gustaría hacer el formulario más pequeño, pero no puedo: el tamaño del formulario está como "fijo", no puedo modificarlo.-
"Por otro lado, para el pie de página, siempre tengo el mismo problema, se superpone debajo del formulario, y no veo por qué."
Es tumargin-top: -150px;
del CSS de tu footer lo que causa el problema. Coméntalo, tendrás el copyright debajo del formulario.
Sin embargo, esto es un parche. Vas a mover el problema. Te aconsejo que sigas este artículo y su GitHub también: https://github.com/EmmanuelBeziat/guidelines/blob/main/css/bonnes-pratiques.md
"el tamaño del formulario está como "fijo", no puedo modificarlo."
Una prueba sencilla que puedes intentar, duplica el tamaño de la fuente, los márgenes, los rellenos y los bordes. Lógicamente, tu formulario debería tener una altura 2 veces mayor. Pienso que el navegador web se adapta a esas dimensiones.
Si tienes una fuente de 1 cm de altura, y tienes 10 líneas. Tendrás una altura mínima de 10 cm.
Puede ser otra cosa, pero es lo primero que se me ocurre.- ¡Ah sí, efectivamente, todo ha vuelto a la normalidad (¡bueno, casi!)! Gracias :) y también gracias por el enlace, por cierto!
Sin embargo, me queda una cosa que me inquieta: no puedo centrar "contacto" y "enviar" en su casilla (están posicionados bastante abajo en su casilla). He intentado con un padding-bottom: 50%, padding: 1em, padding: auto, incluso intenté añadir un div en el que poner mis parámetros, pero nada funciona...
¿Debería empezar todo de nuevo? Tengo la impresión de pasar más tiempo buscando errores que realmente avanzando...
https://jsfiddle.net/3Lncv96p/ - Primero, si puedes detener jsfiddle en CCM. En mi casa, tarda mucho en cargar. Sabemos que podemos ejecutar un código HTML con nuestros navegadores web ;) por eso hice el mensaje 3.
Para el centrado, no te ayudaré por incompetencia de mi parte.
Y sí, creo que lo mejor es retomar correctamente la página web que quieres crear. Por cierto, ¿cómo la has preparado de antemano? El sitio de Mozilla tiene muy buenos tutoriales de HTML y CSS. - He mirado en casi todos los sitios que pude para intentar implementar exactamente lo que quería. El sitio de Mozilla está bien, pero a veces prefiero ir a otro lado porque tengo la impresión de que quizás falta algunas explicaciones.
De acuerdo, veré qué hago entonces. ¡Gracias por tu ayuda de todos modos! :) - Hola,
El sitio de Mozilla no está completo, también lo creo. Tienes razón al seguir múltiples fuentes, esperando que no te disperses demasiado. Lo principal es que el resultado sea correcto desde el principio sin florituras. La parte estética vendrá después.
Esa es mi opinión, haré un formulario HTML clásico perfectamente funcional, con gestión de errores. Luego el CSS basándome en un solo sistema de implementación (grid, flexbox, u otro)
Si te interesa, es largo, en inglés, pero habla sobre el minimalismo de los sitios web. Para mí, los ejemplos son un verdadero placer: https://benhoyt.com/writings/the-small-web-is-beautiful/ Muchos enlaces redirigen a estos sitios web.
-
-
Salut,
Como he tenido problemas de carga en la página de Fiddle, me permito poner aquí tu HTML y CSS iniciales. Será más simple.
Tu HTML :
<!DOCTYPE html> <html lang="es"> <head> <title>Formulario</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link rel="stylesheet" href="formulariostyle.css" /> <!-- TMP --> </head> <body> <!------------------------- HEADER -------------------------> <header> <div id="navbackground"> <nav> <a href="" class="active">Inicio</a> <a href="">Noticias</a> <a href="">Contacto</a> <a href="">Acerca</a> <a href="" id="search"> <input type="image" alt="buscador" src="cloudsearch2.svg" id="searchcloud"/> </a> </nav> </div> </header> <section> <!------------------------- FORMULARIO -------------------------> <form action="" method="POST" id="formulario"> <!-- action="<?php echo $_SERVER['REQUEST_URL'] ?>" --> <!-- TITLE --> <div id="formtitle"> Contacto</div> <!-- 1 NOMBRE --> <div id="formname"> <label for="name">Nombre</label> <input type="text" id="name" name="name" placeholder=" nombre" /> <!--required--> </div> <!-- 2 EDAD --> <div id="formage"> <label for="age"> Edad</label> <select id="age" name="age"> <?php for($i=1;$i<100;$i++){ echo "<option value=\"$i\">$i</option>"; } ?> </select> </div> <!-- 3 SEXO --> <div id="formsexe"> <label for="sexe">Sexo</label> <optgroup id="sexe"> <option> <input type="radio" id="sexeH" name="sexeH" value="H" /> <label for="sexeH" class="formsexelabel">H</label> </option> <option> <input type="radio" id="sexeF" name="sexeF" value="F"/> <label for="sexeF" class="formsexelabel">F</label> </option> </optgroup> </div> <!-- + EMAIL --> <div id="formemail"> <input type="email" id="email" name="email" placeholder=" correo electrónico" /> </div> <!-- + TELÉFONO --> <div id="formtel"> <input type="tel" id="phoneNumber" name="phoneNumber" placeholder = "teléfono"/> </div> <!-- 4 IDIOMA --> <div id="formlangues"> <label for="languesTab[]">Idioma</label> <optgroup id="langues"> <option id="optfr"> <input type="checkbox" id="fr" name="languefr" value="Francés" checked> <label for="languefr">Fr</label> </option> <option> <input type="checkbox" id="en" name="langueen" value="Inglés"> <label for="langueen">En</label> </option> <option> <input type="checkbox" id="jp" name="languejp" value="Japonés"> <label for="languejp">JP</label> </option> </optgroup> </div> <!-- 5 OCUPACIONES --> <div id="formloisirs"> <label id="labelloisirs">Ocupaciones</label> <select id="loisirs" name="loisirs" multiple> <option value="programación" id="programmationloisir">Programación</option> <option value= "música">Música</option> <option value="cine">Cine</option> <option value="nubes">Nubes</option> </select> </div> <!-- 6 COMENTARIO --> <div id="formcommentaire"> <label for="commentaire"></label> <textarea id="commentaire" name="commentaire" placeholder="comentario"></textarea> </div> <!-- BOTÓN --> <div id="formenvoyer"> <input type="submit" name="submit" value="Enviar"/> </div> </form> <p id="alert"> <?php echo $alert;?> </p> </section> <!------------------------- FOOTER -------------------------> <footer> <p> Copyright 1789-2021 by the Sky. All Clouds Reserved. <img alt="nube pequeña" src="littlecloud.svg" id="littlecloud" height="20px" width="20px"/> </p> </footer> </body> <!--<script src="formulaire.js"></script>--> </html>
---
Tu CSS :
/* TEMPORARY */ /*header, footer{*/ /* display: none;*/ /*}*/ /* ################### BODY ################### */ body{ /*border: 4px solid #8dcba5;*/ margin: 0px; background-color: white; color: rgba(70,147,188,1); font-family: sans-serif; /*background-image: url("nubes.svg"); background-repeat: repeat;*/ } /* ################### HEADER ################### */ header{ width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0; /* ??? */ } #navbackground{ background-color: rgba(70,147,188,1); border-bottom: 5px solid white; border-top: 5px solid white; } nav{ /* border: 4px solid red; */ display: flex; justify-content: center; height: 75px; background-color: rgba(70,147,188,1); min-width: 600px; max-width: 980px; margin: 0 auto; } nav a{ font-size: 1.3em; color: white; width: 25%; text-align: center; text-transform: uppercase; padding-top: 25px; transition: 1s; text-decoration: none; } nav a:hover, nav input[type=img]:hover{ padding-bottom: 15px; background-color: #23719a; transition: 1s; } /* botón de búsqueda */ nav input{ display: inline; border: white; border-radius: 3px; height: 1.5em; width: 50px; } /*#searchcloud{ position: relative; display: block; margin-left: auto; margin-right: auto; bottom: 2px; left: 10px; height: 30px; width: 35px; }*/ #imgbackground{ background-color: #8bcdf0; } #island{ /* svg -> mettre un display block d'abord */ display: block; margin: 0 auto; width: 70%; } /* ################### SECTION ################### */ section{ /*border: 4px solid pink;*/ font-size: 1.3em; display: block; padding-top: 20px; padding-bottom: 10px; min-width: 600px; max-width: 980px; margin: auto; text-align: justify; } section p::first-letter{ font-size: 2em; color: #337fa0; } #phpdate{ color: deeppink; text-align: center; } /* ################### FORMULARIO ################### */ form{ max-width: 750px; min-width: 650px; height: 650px; margin: auto; border-radius: 3px; display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: repeat(1, 6fr); color: white; text-transform: uppercase; text-align: center; } form label{ letter-spacing: 0.5em; } form div{ padding: 30px; border: 3px solid white; } /* titre */ #formtitle{ color: rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 0.8em; font-size: 2em; text-align: center; background-color: #cfe7f0; grid-column: 1 / 5; grid-row: 1 / 2; border-bottom: 3px solid white; } /* nombre */ #formname{ background-color: #e85524; grid-column: 1 / 3; grid-row: 2 / 3; transition: 1s; } #formname:hover{ background-color: #b6370d; transition: 1s; } #formname label{ display: none; } form input[type=text] { display:block; border-radius: 1px; border: none; /*border-color: #aadaf3;*/ width: 97%; height: 60px; margin-top: 20px; margin-left: auto; margin-right: auto; background-color: transparent; text-align: center; color: white; font-size: 2em; outline: none; box-shadow:none !important; border:none; } input[type=text]::placeholder{ color: white; font-size: 0.9em; text-align: center; letter-spacing: 0.5em; text-transform: uppercase; } /* edad */ #formage{ grid-column: 3 / 4; grid-row: 2 / 3; background-color: #1888cd; transition: 1s; } #formage:hover{ /*background-color: red;*/ grid-column: 3 / 4; grid-row: 2 / 3; background-color: #3ea6e5; transition: 1s; } #age{ display: block; margin: auto; margin-top: 15px; } select { /* no mostrar el estilo por defecto del navegador */ -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 3rem; padding: 1rem; padding-right: 0.5rem; color: white; font-size: 1em; } /* sexo */ #formsexe { background-color: #186e40; grid-column: 4 / 5; grid-row: 2 / 3; transition: 1s; } #formsexe:hover{ background-color: #278a55; transition: 1s; } #formsexe optgroup{ /* H y F reunidos*/ margin-top: 10px; margin-left: -20px; } .formsexelabel{ color: #bddcef; } input[type=radio]{ /* no mostrar el estilo por defecto del navegador */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 12px; height: 12px; border-radius: 12px; background-color: white; vertical-align: baseline; /* radio alineado con letra */ } input[type="radio"]:checked { background: #94c63d; border: 3px solid white; } /* email y teléfono */ form input[type=email], form input[type=tel]{ display:block; border-radius: 1px; border: none; /*border-color: #aadaf3;*/ width: 97%; height: 60px; margin-left: auto; margin-right: auto; background-color: transparent; text-align: center; color: white; font-size: 1em; /* eliminar la bordura */ outline: none; box-shadow:none !important; border:none; } input[type=email]::placeholder, input[type=tel]{ color: white; font-size: 0.9em; text-align: center; letter-spacing: 0.4em; text-transform: uppercase; } /* email */ #formemail{ grid-column: 1/3; grid-row: 3/4; background-color: #94c63d; /* ! */ transition: 1s; } #formemail:hover{ grid-column: 1/3; grid-row: 3/4; background-color: #75b705; } /* teléfono */ #formtel{ grid-column: 3/5; grid-row: 3/4; background-color: #c61c56; transition: 1s; } #formtel:hover{ grid-column: 3/5; grid-row: 3/4; background-color: #E5427A; } /* idiomas */ #formlangues { background-color: #174f70; grid-column: 1 / 3; grid-row: 4 / 5; transition: 1s; } #formlangues:hover { background-color: #23648a; transition: 1s; } #langues{ /* optgroup */ margin-top: 30px; margin-bottom: 30px; } #langues option{ display: inline; letter-spacing: 0em; } /* checkbox y sus etiquetas respectivas */ input[type=checkbox] + label { display:inline-block; color: #94c63d; font-weight: lighter; text-transform: uppercase; letter-spacing: 0em; } input[type=checkbox]{ /* no mostrar el estilo por defecto del navegador */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 20px; height: 20px; background-color: white; vertical-align: middle; } input[type="checkbox"]:checked { background: orange; border: 3px solid white; } #optfr input[type=checkbox]{ } #optfr input[type="checkbox"]:checked { /*background-image: url("banderafr2.png"); &:before { color: grey; }*/ } /* ocupaciones */ #formloisirs { background-color: #FFC300 ; /*!*/ grid-column: 1 / 3; grid-row: 5 / 6; height: 130px; transition: 1s; } #formloisirs:hover { background-color: #ffae00; transition: 1s; } #formloisirs select{ display: block; margin: auto; margin-top: 20px; padding: 2px; height: 80px; border: 1px solid white; font-size: 0.8em; } #programmationloisir{ } /* comentario */ #formcommentaire { background-color: #5ed5ff; grid-column: 3 / 5; grid-row: 4 / 6; transition: 1s; padding: 10px; } #formcommentaire:hover{ background-color: #3ba7cd; transition: 1s; } section textarea{ display:inline-block; color: white; border-style: none; border-radius: 4px; width: 100%; height: 100%; background-color: transparent; padding: 0; margin: 0; font-family: sans-serif; font-size: 1.2em; resize: none; } section textarea:focus{ /* elimina la bordura del textarea*/ outline: none; box-shadow:none !important; border:none; } textarea::placeholder{ color: white; font-size: 0.6em; text-align: center; text-transform: uppercase; letter-spacing: 0.5em; font-size: 0.8em; } /* botón */ #formenvoyer { background-color: #cfe7f0; grid-column: 1 / 5; grid-row: 6 / 7; transition: 1s; } #formenvoyer:hover { background-color: #f6d0ee; transition: 1s; } input[type=submit]{ background-color: transparent; color: white; margin: 0; border: none; border-radius: 3px; transition: 1s; text-transform: uppercase; letter-spacing: 1em; font-size: 1.1em; width: 100%; height: 100%; } #formenvoyer{ padding: 0; height: 100px; } form input[value="Enviar"]{ } /*input[type=submit]:hover{ background-color: #fae1f4; color: #750d5a; transition: 1s; }*/ /*#cloudCrossing{ vertical-align: middle; width: 20%; height: 20%; border: 3px solid orange; margin: 0 0 0 0; padding: 0 0 0 0; }*/ #alert{ text-align: center; margin: auto; color: red; border: 3px solid orange; } /* ################### FOOTER ################### */ footer{ color: white; text-align: center; background-color: #8bcdf0; height: 60px; border-bottom: 5px solid white; margin-top: -150px; } #littlecloud{ position: relative; top: 4px; } /* ################### MEDIA QUERIES ################### */ /* para pantallas de tamaño mediano tipo tableta */ /* márgenes eliminados */ @media screen and (max-width: 980px) { * { color: green; } } /* para pantallas de pequeño tamaño tipo teléfono */ /* menú vertical */ /* formulario vertical */ @media screen and (max-width: 779px){ *{ color: orange; } nav{ flex-direction: column; } form{ display: flex; width: 100%; flex-direction: column; } form div{ max-width: 779px; } }
