Titre: [CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: franculo_caoulene le le 04-11-2003 a 22:53:37
Salut,
Je viens de voir le message précédent mais moi je suis plein de bonne volonté ;D, j'essaye tant bien que mal d'utiliser les CSS.
Donc j'essaye d'utiliser le float mais je n'y arrive pas.
CSS:
.posform {
position: absolute;
left: 10%;
top: 10%;
width: 400px;
float: left;
}
.posform2 {
position: absolute;
left: 50%;
top: 10%;
width: 400px;
float: left;
margin-left: 20px;
}
.contenu {
border: 3px solid #FFFFFF;
background:#A1C6FF;
margin-top: 10px;
text-align: center;
}
page HTML:
<div class="posform">
<div class="contenu">
1ere partie du fomulaire
</div>
<div class="contenu">
2e partie du formulaire que je mets en dessous
</div>
</div>
<div class="posform2">
<div class="contenu">
3e partie du formulaire que je souhaite voir a droite à droite et au même niveau vertical que la 1ere partie
</div>
</div>
Merci d'avance car là.... j'ai du mal!!! |
Titre: Re:[CSS] blocs cote à cote?
Posté par: DJolhan le le 05-11-2003 a 12:19:19
<div class="posform">
C'est apparement le conteneur de ton formulaire.
Si tu veux que tes deux colonne soit cote a cote, il va falloir que tu regle ton probleme de largeur .
.posform fait 400px
Et
.postform2 aussi
Si tu veux que ton contenue se retrouve a droite de ton postform2 il va falloir que tu lui laisse la place de s'y mettre ;)
Hors ton postform et postform2 font exactement la meme largeur.
Donc postform2 rempli totalement la conteneur et ne laisse la place au PF3 que pour se mettre en dessous.
Déclar contenu a 200 px et postform2 a 200 aussi en largeur.
et ensuite, tu auras juste besoin de meytre :
<div class='postform'>
<div class='contenu'>bla blabla</div>
<div class='postform2'>form</div>
</div>
Tu verras qu'ils s'aligneront parfaitement.
Enfin, j'ai du mal a comprendre vraiment ce que tu veux faire, mais bon, peux etre que ca t'aidera ^^ |
Titre: Re:[CSS] blocs cote à cote?
Posté par: SIBELIUS le le 05-11-2003 a 12:39:40
Les positions absolutes sont tout à fait inutiles.
Essaye ça :
Partie HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
Et la CSS correspondante :
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
Tiré de cette page : http://www.alsacreations.com/articles/div/ |
Titre: Re:[CSS] blocs cote à cote?
Posté par: DJolhan le le 05-11-2003 a 12:45:25
Titre: Re:[CSS] blocs cote à cote?
Posté par: franculo_caoulene le le 05-11-2003 a 14:25:53
Je réuni mes deux posts.
Donc, le code donné:
.posform {
left: 10%;
top: 10%;
width: 400px;
float: left;
}
.posform2 {
left: 50%;
top: 10%;
width: 400px;
float: left;
margin-left: 20px;
}
me donne ce résultat :
Je souhaite maintenant centrer mes cadres et puis aligner mes champs.
Merci encore pour votre aide. |
Titre: Re:[CSS] blocs cote à cote?
Posté par: SIBELIUS le le 05-11-2003 a 17:16:33
Je souhaite maintenant centrer mes cadres et puis aligner mes champs.
Merci encore pour votre aide.
|
|
Pour centrer les cadres, il va falloir bidouiller : mettre tes cadres dans un conteneur centré, puis mettre le cadre gauche en float left et celui de droite en float right
Pour aligner les champs, ce sera simple : pour l'instant ils sont centrés, il suffit de le mettre en float right dans le cadre |
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: franculo_caoulene le le 08-11-2003 a 10:23:58
Salut et merci pour ta réponse.
Mais la je commence à douter de l'intérêt du CSS. Car si je commence à faire des div imbriqué les uns dans les autres quelle est la différence avec les tableaux imbriqués?
Comment puis-je changer totalement l'apparence de mon site en changeant simplement de feuille de style?
A la base je suis un pro de l'imbrication de tableaux et je me mets doucement au CSS c'est pour ça que je demande ;)
|
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: SIBELIUS le le 08-11-2003 a 10:31:49
Mais la je commence à douter de l'intérêt du CSS. Car si je commence à faire des div imbriqué les uns dans les autres quelle est la différence avec les tableaux imbriqués?
Comment puis-je changer totalement l'apparence de mon site en changeant simplement de feuille de style?
|
|
1- il ne faut pas imbriquer de multiples div : ce n'est pas du tout fait pour ça. Les div ne servent qu'à faire le canevas global de ta page, ensuite il faut utiliser chaque balise correctement (p, h1,...)
2- Toute la mise en page du site doit être faite grâce à la feuille de style. Il suffit donc de charger une autre feuille CSS pour que tout l'affichage soit modifié.
Tu peux tester avec Alsacréations : lorsque tu changes de design, il ne fait que changer de feuille css et le contenu reste identique. |
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: franculo_caoulene le le 08-11-2003 a 11:19:23
ok ok!
La solution de faire un coneteur centré est bonne ;D
Maintenant, c'est le contenu de mon cadre que je souhaite mettre en forme. Le fait de les aligner à droite n'est pas terrible. En fait ce que je souhaiterais c'est d'aligner mes intitulés à gauche (ça pas de pb) et mes champs les aligner sur une ligne verticale imaginaire se trouvant au centre de mon cadre. Vous voyez ce que je veux dire?
Ca c'est super simple avec les tableaux. Avec les styles je ne vois pas.
J'ai pas encore le coups de main apparemment :-\
|
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: SIBELIUS le le 08-11-2003 a 11:35:01
et mes champs les aligner sur une ligne verticale imaginaire se trouvant au centre de mon cadre.
|
|
Si la hauteur de ton cadre est définie, c'est assez simple : il suffit de donner une margin-top.
Sinon, l'alignement vertical en CSS n'est pas possible :( |
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: franculo_caoulene le le 08-11-2003 a 11:42:24
Ah ben voilà ??? donc un div en plus a positionner apparemment! Ou alors si tu as des exemples de beaux formulaires gérés en CSS je suis preneur. Car le fait de ne justifier que d'un coté ne me convient pas :-\ cela veut dire que de l'autre coté c'est pas propre.
M'enfin, je me fais la main, on va direça comme ça ;)
Merci. |
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: SIBELIUS le le 08-11-2003 a 11:44:20
Ah ben voilà ??? donc un div en plus a positionner apparemment!
|
|
Non, tu peux très bien donner un margin à tes balises input ou p |
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: franculo_caoulene le le 08-11-2003 a 11:47:27
humm... nan! mes inputs s'alignent par rapport au texte!
<div class="conteneur"> <!-- sert à centrer le contenu de la page -->
<div class="posform"> <!-- positionne le formulaire dans le conteneur-->
<div class="contenu"> <!-- met en forme le contenu ce calque est réutilisé -->
<p>Gestion des pratiquants</p>
<form name="pratiquant" method="post" action="pratiquant_enr.php">
<p>Nom <input class="marge" type"text" name="nom" value=""></p> <!-- class marge avec une marge de 200px décale le champs de 200px après le texte-->
<p>Prénom <input class="marge" type"text" name="prenom" value=""></p>
.conteneur {
position:absolute;
left: 50%;
top: 50%;
width: 900px;
height: 600px;
margin-left: -450px;
margin-top: -300px;
border: 1px solid #000;
}
.contenu {
border: 3px solid #FFFFFF;
background:#A1C6FF;
margin-top: 10px;
}
.posform {
width: 400px;
float: left;
}
.marge {
margin-left: 100px;
}
une idée?
|
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: SIBELIUS le le 08-11-2003 a 12:20:59
Tu t'emmêles les pinceaux.
Pour commencer, il y'a trop de divs imbriquées inutiles
1- <div class="posform"> est inutile : tu mettras la classe postform dans la balise form
2- <div class="contenu"> est inutile aussi : tu rajouteras les propriétés dans la classe postform
3- <p>Prénom <input class="marge" type"text" name="prenom" value=""></p>
--> si tes input sont insérés dans les paragraphes, c'est normal que tout se déplace. D'ailleurs, je ne vois pas l'utilité des paragraphes... encore une balise inutile.
Un conseil : essaye de faire le plus simple possible, sinon autant utiliser des tableaux imbriqués en effet ! |
Titre: Re:[CSS] blocs cote à cote? / [CSS] aligner un formulaire?
Posté par: franculo_caoulene le le 08-11-2003 a 12:33:00
1- <div class="posform"> est inutile : tu mettras la classe postform dans la balise form
|
|
impossible (je crois) car je divise le formulaire en trois pour différencier les infos entrées cf l'image apparaissant plus haut.
2- <div class="contenu"> est inutile aussi : tu rajouteras les propriétés dans la classe postform
|
|
pourquoi pas mais l'intérêt était de donner une mise en forme à un certain type de donnée d'où l'intéret de ce div et de l'utilser ailleurs
3- <p>Prénom <input class="marge" type"text" name="prenom" value=""></p>
--> si tes input sont insérés dans les paragraphes, c'est normal que tout se déplace. D'ailleurs, je ne vois pas l'utilité des paragraphes... encore une balise inutile.
|
|
ok mais comment mettre à la ligne ???
merci quand même de t'intéresser à mon cas ;D
Un conseil : essaye de faire le plus simple possible, sinon autant utiliser des tableaux imbriqués en effet !
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|