Problème avec le background d'une div

Par Alex, il y a 10 ans

Les bases HTML/CSS

Bonjour tout le monde, j'ai un certains problème enfaite, j'ai le background de cette div qui se prolonge sur la droite...
Voici les informations:

Et voici le code:

CSS:

.form { border-radius: 5px; padding: 5px; padding-top: 210px; max-height: 100px; padding-left: 340px; } form { background-color: rgba(0, 0, 0, 0.3); width: 900px; } form input[type=search]{ border: none; height: 100px; width: 60%; font-size: 25px; margin-right: 0; } form input[type=submit] { border: none; background:#1157DB; color: #fff; font-size: 50px; font-family: "Open-Sans", sans-serif; height: 83px; font-weight: 600; }

HTML:

<div class="form"> <form> <input id="search" type="search" placeholder="Tapez votre recherche ici"> <input type="submit" value="GO !" /> </form> </div>

Merci de votre prochaine aide !

9 réponses

santo17, il y a 10 ans

De quel Background parles-tu? Celui de l'input type submit?

Alex, il y a 10 ans

Le background rgb, celui qui est noir, qui se prolonge

santo17, il y a 10 ans

Ah ok, normal. T'as donné une largeur à ton form. Du coup le background prend toute la largeur du form

santo17, il y a 10 ans

Essaie plutôt de faire ceci:
CSS:

form { background: rgba(0, 0, 0, 0.3) no-repeat cover; width: 900px; }
Alex, il y a 10 ans

Justement j'ai essayé ça, mais dans ce cas lea zone de texte se diminue, et je le veux pas !

Niramar, il y a 10 ans

Evite de styliser une balise de formulaire je suis d'accord qu'en CSS on peu tout faire mais c'est pas l'idéal à mon avis et je ne comprend pas non plus le backgroud si au final il est caché si je suis dans le vrai et que tu veux faire un button addon réorganise ton HTML

<form action=""> <div class="form"> <div class="form-addon"> <input type="text"> <input type="submit"> </div> </div> </form>

Et revois ton css

/* cette boite servira au placement*/ .form { border-radius: 5px;/* pourquoi un border radius */ padding: 5px; padding-top: 210px;/* pourquoi une marge si c'est pour la position du block utilise margin */ max-height: 100px;/* a quoi sert le max-height ici */ padding-left: 340px;/* si c'est pour un alignement aléatoire un margin: 0 auto alignera ton block*/ } .form > .form-addon { background-color: rgba(0, 0, 0, 0.3); width: 900px;/* dans 900px on peu faire vivre une famille entière n'est ce pas un peu grand */ } .form input[type="search"]{ border: none; height: 100px; width: 60%;/* raison pour la quelle ton background depasse on a 60% ici mais personne pour habiter dans les 40% restant :p hormis un bouton tout petit*/ font-size: 25px; margin-right: 0; } .form input[type=submit] { /* ajouter un width pour les 40% restant */ border: none; background:#1157DB; color: #fff; font-size: 50px; font-family: "Open-Sans", sans-serif; height: 83px; font-weight: 600; }

Bref plein d'incompréhenssion je t'envoie dans mon prochain message mon idée si je ne me trompe pas

Niramar, il y a 10 ans

Voila qui est fait
le HTML

<form action=""> <div class="mon-form-search"> <input type="search" placeholder="Taper pas trop fort ici..."> <input type="submit" value="go!"> </div> </form>

et le css

.mon-form-search { display: flex;/* flexible pour que le input prenne toute la place */ margin: 0 auto;/* centrer */ width: 600px; background: rgba(0, 0, 0, 0.3); } .mon-form-search input[type="search"] { border: none; line-height: 100px; flex:1;/* prend la place restante */ margin: 0; font-size: 25px; } .mon-form-search input[type="submit"] { border: none; line-height: 100px;/* hauteur de 100px si tu veux garder 83px ajoute height: 83px;line-height: 83px;*/ background: #1157DB; color: #ffffff; font-weight: 600; font-size: 50px; font-family: "Open-Sans", sans-serif; text-transform: uppercase; }

Je suis passé par un flex box le display block + float left fonctionnerait aussi de la même façon mais je suis dans ma saison flex partout alors autant vivre avec son temps :p

Alex, il y a 10 ans

Merci de ta réponse Niramar, ça m'a beaucoup aidé, et à vrai dire je suis un peu bête, puisque j'ai pas réglé la Width, et oublié d'utiliser less 40% ^^. En tous cas merci!
Et le border-radius était enfaite pour faire un border autour de tout le block, qui est fait désormais j'avais juste pas ajouté le Border.

Niramar, il y a 10 ans

Ouki super hesite pas si besoin d'autre chose à me mp sur niramar@ourway.fr