Forum : Probleme CSS

Réponse acceptée

Il va donc falloir personnaliser pour chaque input la taille de ton header1 ou header2 et de faire les modification adéquate sur tes input. J'ai mis à jour mon codepen pour te montrer. Il faudra aussi que tu mettes un min-width sur la div qui entoureras les div content pour donner une valeur min en fonction de la taille de tes input.

Enfin bref, je ne vois pas la logique d'avoir les input qui n'ont pas la même taille. Je trouve ça assez moche. :p

Pewel-OutOfNutella

Ton input prends bien la taille de ta div parente, c'est le padding de 5px qui fait qu'il est légèrement décallé

Et après, il faut ajouter ça :

input{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

box-sizing permet d'inclure les propriétés externes de padding et de margin

Cf : http://css-tricks.com/examples/BoxSizing/

Axis

Auteur

Oui je connaissais cette propriété, mais ce que je veux ce n'est pas que mon input prenne la taille de ma DIV parent mais bien de celle dans laquelle il est c'est a dire .input.

Je veux en faite que ma div prenne la taille verte sur la droite du texte

Maenhyr

Oui je connaissais cette propriété, mais ce que je veux ce n'est pas que mon input prenne la taille de ma DIV parent mais bien de celle dans laquelle il est c'est a dire .input.

Ici la div parent est la div .input. En mettant ce que Pewel t'a donné, ça devrait fonctionner.

Axis

Auteur

Résultat avec les indications de Pewel :

Maenhyr

N'est ce pas ce que tu souhaites ? Si tu veux que ton input prenne toute la largeur verte, tu dois enlever ceci :

.content .input {
    padding: 5px;
}

pour ceci par exemple :

.content .input {
    padding: 5px 0 ;
}

Axis

Auteur

Ne marche toujours pas :

Avec ce CSS :

.content{
  display: block;
  float: left;
  background: red;
  width: 25%;
  margin: 5px;
  padding: 5px;
  overflow: hidden;
}
  .content .header {
    display: block;
    float: left;
    background: blue;
  }
  .content .input {
    background: green;
  }
input{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

Je pense que le problème vienne du faite que ma div.header est un div "flottante", donc la div qui suit prends toute la largeur de la div.content non ?
Mais je ne vois pas comment faire autrement pour cette mise en forme...

coloo

Sachant que tu utilises un pourcentage dans la taille de ton content... Il est tout à fait normal qu'au bout d'un moment la taille de ton input se décale vers le bas par manque de place. ton header à une taille en pixel qui est calculé en fonction de ce que tu tapes comme titre.

En supprimant la taille de ton content, quelque soit la taille du titre, le input restera sur la ligne car il se réservera une place =). A toi ensuite d'utiliser les media query pour changer les dimension de la typo ou de l'input pour réduire la taille de ton formulaire.

Mais c'est dans le projet de faire quoi au juste ?

http://codepen.io/ColoO/pen/mftzg

Axis

Auteur

Le projet est de réaliser un formulaire "horizontal" avec 4 div.content de chacune 25% de la div parent.

Voici le résultat final escompté (photoshop) :

Avec ta solution coloo, les div.content n'ont pas une largeur bien définie ce qui m'embete un peu...

Axis

Auteur

Merci pour ta réponse coloo je vais faire avec des position CSS ça marche nickel meme si ce n'est pas super 'propre'.

Pour ce qui est du visuel c'est une question d’esthétique sur le formulaire en entier.

Merci encore.

coloo

Oki,

Tu peux épurer ton css en enlevant les redites de content et de créer une classe de l'input et header afin d'avoir juste le width dans les id header et la position left dans les id input. (j'ai fait la maj du codepen)

Bonne continuation

Probleme CSS

11 réponses