28172 sujets

CSS et mise en forme, CSS3

Créer un style de tableau en div et css

Bonsoir,

Désolé pour cette question con mais ça fait 2 jours que je perd mon temps à chercher cette info et a tester toute sorte de chose et rien y fait...

J'aimerais mettre en page un formulaire de la même manière qu'un tableau, c'est a dire que tous les champs soit aligné comme l'image ci dessous...

http://mobinks.com/tableau.png

J'ai tester de créer une div de largeur fixe, puis de mettre des span à l'interieur mais ca ne marche pas car il n'est pas possible de definir de largeur au span, sauf si il s'affiche en block mais dans ce cas il y a un retour a la ligne

J'ai egalement essayé avec les Float, mais dans ce cas les balise span "sorte" de mon container DIV, si vous savez pourquoi d'ailleur, c'est une autre question qui me turlupine !?

Merci d'avance a ceux qui pourront m'aider.
Merci je vais regardé ça de prés, pas facile à prendre en main au début ce genre de mise en page...
c'est un peu lourd tout de même rien que pour faire un tableau, il n'existe rien de plus simple, car niveau allégement du code je pensé pouvoir enlever des lignes et non en rajouté Smiley ohwell
Re,

Tu trouves ça lourd toi ?
<form action="#">
     <p>
          <label for="nom">Nom:</label>
          <input type="text" id="nom"/>
     </p>
</form>

C'est encore plus léger qu'un tableau... Tu vas avoir du mal à faire plus light Smiley langue
Heu ce que je trouve lourd c'est surtout le CSS lié , qui lui représente plusieurs dizaine de ligne... ? on a peut etre pas besoins de tout dans ce cas ?

Car pour moi le code c'est ca 

<form action="#">
	<p class="double">
		<label for="f1-nom">Nom:</label>
		<input type="text" id="f1-nom" />
	</p>
</form>


Mais plus ca, sinon ca ne va pas ressembler a un jolie tableau structuré ?


form {
	width: 500px;
	padding: 10px 20px;
	background: lavender;
	color: midnightblue;
}
form p {
	margin: 1em 0;
}
form p.double {
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	/* Idem pour IE6 */
	width: 100%;
}
form p.double label {
	float: left;
	width: 150px;
	text-align: right;
	font-weight: bold;
	cursor: pointer;
}
form p.double label span.info {
	display: block;
	margin-top: .2em;
	font-size: .8em;
	font-weight: normal;
	cursor: default;
}
form p.double input,
form p.double textarea {
	width: 250px;
	margin-left: 12px;
	border: solid 1px midnightblue;
	padding: 2px 4px;
}
form p.double textarea {
	padding: 2px 0 0 4px;
	width: 320px;
	height: 6em;
}
form p.simple {
	margin-left: 160px;
}

Modifié par niconeo (24 Jul 2008 - 12:34)
Sur le lien que je t'ai donné, l'auteur ne se contente pas de mettre en page le formulaire, il fait également de la mise en forme...

Donc, tu peux faire très bien enlever les éléments de décoration : les background, les color, les font-weight, les border et éventuellement les cursor...

Mais bon, j'pense pas que tu souhaites présenter un formulaire sans aucun style Smiley langue
Je viens de trouver un code qui me semble plus simple a comprendre du moins dans un premier temps...

Je vais essayé de m'en sortir avec ça. Merci ! Cela me semble plus courts et mieux optimisé a mon gout, mais c'est qu'un avis personnel. Quoi que le br ce n'est pas top ?

Par contre je n'arrive pas a centrer le formulaire dans le fieldset une idée ? la propriete text-align ne marche pas...



<style>
form.css fieldset
  {
  padding: 1em;
  }
form.css label
  {
  display: inline;
  float: left;
  width: 70px;
  }
</style>

<form action="" class="css">
  <fieldset>
    <legend>Formulaire</legend>
    <label for="nom">Username:</label>
    <input type="text" name="nom" id="nom" />
    <br />
    <label for="prenom">Prénom:</label>
    <input type="text" name="prenom" id="prenom" />
  </fieldset>
</form>

Modifié par niconeo (24 Jul 2008 - 12:48)
Sujet clos
Aller à