Ajouter deux colonnes dans une colonne
Le
unbewusst.sein
Je cherche comment faire pour ajouter deux colonnes dans une colonne
d'un design à trois colonnes s'inspirant de la page :
<http://matthewjamestaylor.com/blog/...le.htm>
dans mon utilisation, c'est la colonne de droite qui est la plus large
(50%) et c'est dans celle-ci que je souhaite ajouter deux colonnes
s'inspirant du design suivant :
<http://www.duoh.com/csstutorials/cs...x.html>
Vous l'avez compris, le but de la manip est d'entrer une "form" dans
cette colonne de droite de manière à éditer les entrées.
Si je fais ça brutalement, ça fiche le boxon dans l'ordonnancement de la
page, ie les trois colonnes de départ
Donc quelles précautions faut'il prendre pour "encastrer" un design dans
l'autre étant entendu que le design de la "form" à des trucs du genre :
div.row {
clear: both; ////////<<<<<<<<<<<<<<<
width: 335px;
}
et autres :
.col1 {
text-align: right;
width: 135px;
height: 31px;
margin: 0;
float: left; ////////<<<<<<<<<<<<<<<
margin-right: 2px;
}
mais bon, si je comment ces lignes dans le css, ça ne change pas grand
chose.
bien sûr je passerai aussi en design fluide et changerai les width de px
en %.
--
« Une idée que j'ai, il faut que je la nie :
c'est ma manière de l'essayer. »
(Émile Chartier)
d'un design à trois colonnes s'inspirant de la page :
<http://matthewjamestaylor.com/blog/...le.htm>
dans mon utilisation, c'est la colonne de droite qui est la plus large
(50%) et c'est dans celle-ci que je souhaite ajouter deux colonnes
s'inspirant du design suivant :
<http://www.duoh.com/csstutorials/cs...x.html>
Vous l'avez compris, le but de la manip est d'entrer une "form" dans
cette colonne de droite de manière à éditer les entrées.
Si je fais ça brutalement, ça fiche le boxon dans l'ordonnancement de la
page, ie les trois colonnes de départ
Donc quelles précautions faut'il prendre pour "encastrer" un design dans
l'autre étant entendu que le design de la "form" à des trucs du genre :
div.row {
clear: both; ////////<<<<<<<<<<<<<<<
width: 335px;
}
et autres :
.col1 {
text-align: right;
width: 135px;
height: 31px;
margin: 0;
float: left; ////////<<<<<<<<<<<<<<<
margin-right: 2px;
}
mais bon, si je comment ces lignes dans le css, ça ne change pas grand
chose.
bien sûr je passerai aussi en design fluide et changerai les width de px
en %.
--
« Une idée que j'ai, il faut que je la nie :
c'est ma manière de l'essayer. »
(Émile Chartier)
Poser une question
eh bien non ...
pas possible de fixer des largeurs dans un design "elastique"
il faut que tout reste élastique
à la rigueur on pourra indiquer une largeur minimum
div.row {
min-width: 125px;
width: 80%;
}
par exemple.
ben alors puisque tu assouplis la présentation
où est le blème ?
#contenu form
{
position: relative;
width: 90%;
margin: auto;
text-align: right;
background: #777;
color: white;
padding: 6px;
}
#contenu form input[type="text"],
#contenu form textarea
{
width: 69%;
background: #ddd;
color: maroon;
vertical-align: top;
}
et
<form blabla>
<p>nom, prénom : <input name="nom" type="text" /></p>
<p>sujet : <input name="objet" type="text" value=""/></p>
<p>message : <textarea name="info" rows="5" cols="30"></textarea></p>
.../...
à voir ici :
pour constater qu'il n'y a pas "2" colonnes,
une seule suffit
--
Stéphane Moriaux avec/with iMac-intel
oui; ,ais les 80 % là; j'imagine qu'il réfèrent qu contenant, la colonne
de droite, pas au body ???
je veux dire relatif au contenant...
le blême est que j'avions oublions un "</div>" --> detrimental effect
)))
ça fait quoi exactement "margin: auto;" ???
Ah oui bien vu ce "ertical-align: top;" !!!
OK, merci beaucoup, que crois que je ne suis pas loin de la "VÉRITÉ" )))
--
« L'homme est capable du meilleur comme du pire,
mais c'est vraiment dans le pire qu'il est le meilleur. »
(Grégoire Lacroix)
oui, si et *seulement si* ce contenant a une position
(absolute,relative,...)
ça centre la boite là dont il est question, ici le form
(les marges s'égalisent totomatiquement)
--
Stéphane Moriaux avec/with iMac-intel
pas clair, mais ça semble rouler même dans mon cas où tout est flottant
et en %, ou presque qq petits padding en px.
c'est plus zoli alors...
ah ouais, super, merci !
et l'alignement horizontal d'un texte dans un span, ça se règle comment,
si je touche au padding, ça me va pas car ça change la width, pas zoli.
je lis chez yoyo :
'text-align'
Valeur :
left | right | center | justify | <chaîne> | inherit
on ne peut pas mettre le texte à x% du bord gauche, par exemple, sans
toucher à la largeur ???
--
« L'humanité qui devrait avoir six mille ans d'expérience,
retombe en enfance à chaque génération. »
(Tristan Bernard)
c'est limpide :
on règle la largeur proportionnellement à une des boites contenantes
laquelle ?
le 1er ancêtre/parent dont la position est définie (stylée)
c'est valable pour les largeurs, hauteurs, marges, paddings, quand ils
sont stylés en %
ça fait là c'que tu d'mandes : un 'tit espace, à gauche, à droite
bien propre le même
un span est *in-réglable* pour ce qui est des dimensions ! !
span { width:2000px }
ne fera rien du tout
il faut alors le transformer en block
display: block;
et le + souvent ça met alors la zone
heu ... le padding d'un span ?
ça ne devrait pas changer la width de son contenant ... !
ben ... si tu ajoutes de l'espace dans le span, forcément ça l'élargit.
le texte à x de *quel* bord gauche ?
- celui du span ?
au choix :
span { margin-left: 10px; }
span { padding-left: 10px; }
span { padding-left: 2%; }
- celui de la ligne ?
span:before { content: " "; }
p { margin-left: 10px }
--
Stéphane Moriaux avec/with iMac-intel