La question CSS du jour!
J’ai la structure suivante (qu’on peut modifier c’est juste pour la démonstration):
[codebox]
champ 1
champ 2
<input type="text />
<button>Envoyer</button>
</fieldset>
[/codebox]
<p>De cette structure les éléments sont actuellement en float: left. Ca m’aligne le tout à gauche sur une ligne comme cela:</p>
<p>[codebox]<br>
|Champ 1|[ Input ]|Champ 2|[ Input ]|[ Button ]|Espace blanc… |<br>
[/codebox]</p>
<p>C’est bien. Mais ce n’est pas ce que je veux. En effet, toute la place en largeur n’est pas prise, et j’aimerai maximiser l’espace disponible en agrandissant les input pour qu’ils prennent l’espace maximum disponible:</p>
<p>[codebox]<br>
|Champ 1|[ Input ]|Champ 2|[ Input ]|[ Button ]|<br>
[/codebox]</p>
<p>Problématique: dans cette série d’éléments, les seules dimensions connues sont la taille totale du fieldset (obtenue avec un width auto) et la taille du bouton de soumission (fixée en dur à 90px). Je ne connais pas la dimension des labels Champ 1 & 2 vu que celle ci est variable suivant la langue du site.</p>
<p>Je m’en sors pas. J’arrive à caler le bouton à droite, en le positionnant en absolute, avec un right: 0, et en rajoutant une marge droite de 90px sur le fieldset, mais après je suis coincé. Je vois qu’il faut deux div en 50% (pour les deux couples label + input) mais je n’arrive pas a faire de telle sorte que l’input prenne 100% de la place moins la largeur du label.</p>
<p>So, need help.</p>
bon alors, en php ya une fonction qui recup la longueur d’une chaine de texte en fonction de la police
en javascript tu peux recup les distances apres construction (offsetHeight par ex)
en combinant les 2 tu peux faire une fonction à lancer sur l’event onload qui va “replacer” les elements (en gros tu ecris dynamiquement (car t’as besoin des valeurs que te renvois le php) une fonction javascript qui sera lancé ensuite)
j’ai deja fait pour des backgrounds qui s’agrandissaient en fonction de la longueur dynamique des textes.
C’est un peu overkill pour un truc juste en CSS non? Il n’y a vraiment pas de soluce CSS only?
Tin en fait cela serait tellement simple à faire avec un tableau… les input dans des cellules a width: 50% et le tour serait joué. Mais ca dégomme le fluid design si la taille totale < largeur labels + largeur button
[quote="[PERE]Cil, post:3, topic: 49387"]
C’est un peu overkill pour un truc juste en CSS non? Il n’y a vraiment pas de soluce CSS only?[/quote]
bah le CSS ne sait pas analyser un document donc il peut pas se placer de lui meme… Donc à part des valeurs “relatives” (genre pourcentage) ou des valeurs fixes tu peux rien faire (ou alors je connais pas).
par contre, tu peux aussi definir les valeurs en javascript directement.
[code]
div{
position: absolute;
top:expression(fixed_bottom(this,0));
left:expression(fixed_left(this,0));
}
et en javascript tu aurais ces fonctions :
[/code]
c’est un exemple que j’utilise pour placer une barre en bas du navigateur, quelque soit le la resolution du browser (utilisation de documentElement.clientHeight). Tu peux faire ca en allant chercher les longueurs de tes champs (document.getElementbyId(IDdeTonElement).style.offsetWidth de tête, à verifer)
euh on a trouvé beaucoup plus simple, pour placer une barre en bas du navigateur… genre:
position: absolute;
bottom: 0px;
(et si ca marche aussi sous IE6; faut juste pas le combiner avec top, parce que sinon IE6 perd les pédales et ignore le bottom). Et si tu veux que ton footer n’empiète pas sur le contenu principal, tu rajoutes une margin-bottom au contenu principal. Et si tu le veux en position: fixed, tu peux aussi mais dans ce cas faut jouer avec la barre de scroll sur le contenu principal, virer les overflow sur le body (c’est donc le contenu principal qui s’occupe du scrolling) tout en ayant le footer en bas de page.
Si tu veux plus d’infos, PM, je te ferai un joli exemple CSS only de ton truc.
Sinon j’ai peut être une solution a base de display: table-cell faut juste que je voies ce que ca donne.
Edit: Nope ca passe pas. De toute facon les display: table-cell ne sont pas disponibles sous IE6, alors bon.
je peux t’assurer que le bottom:0px je marche pas dans tous les cas, ma solution si :crying:
sinon j’ai pris 3 sec de plus et je t’ai pondu ca :
[code]<?php
function CalculLongueurChamp($Texte) {
return imagettfbbox ($TailleFont, $Angle, $NomFont, $Texte);
}
?>
.champ_input{
width:<?=$LongeurTotal - CalculLongueurChamp('Toto') - CalculLongueurChamp('Titi')?>px;
}
TotoTiti[/code]
ecrire en php ton css en calculant la longeur de tes champs à l’avance, c’est mieux dans ton cas 
Bon déviage de thread mais vu que c’est moi qui l’ai commencé: Par curiosité, dans quels cas le bottom 0px ne fonctionne pas? t’as un exemple précis?
[quote="[PERE]Cil, post:7, topic: 49387"]
Bon déviage de thread mais vu que c’est moi qui l’ai commencé: Par curiosité, dans quels cas le bottom 0px ne fonctionne pas? t’as un exemple précis?[/quote]
non de tete je me souviens plus mais je sais que j’avais passé 2jours à trouver une solution et que seule le css dynamique grace au javascript me permettait de faire fonctionner le bousin. C’est un truc que je reutilise depuis 2 ans pratiquement et que j’ai pas retouché depuis (copie colle mon amour ^^)
en css uniquement, ce n’est pas possible, en javascript oui
Sincerment, utiliser jquery pour faire :
onload : le $(document).ready c’est juste ca
parcourir les input (TOUS les input) et leur appliquer une fonction JS qui fait en gros ce qui est recuperable en offsetwidth…
ouais c’est plus simple à ecrire, stou.
j’avais decrit le mecanisme plus haut, soit en php, soit en js mais utiliser un librairy pour ca…alalalal ces fergnasses de devs, tsss old school style for ever.
Nan j’avoue la jquery est top mais pour des trucs plus complexes, les incompatiblités avec scriptaculous ou entre meme certaines versions (j’ai un module de DatePicker en jQuery non compatible avec la derniere version de leur librairy) et c’est souvent à cause de la main mise sur les event des le chargement de la page.
PS : d’ailleurs c’est à tester avec Safari 2, ces histoires de offset, c’etait tres drole son comportement ^^
Bah d’un autre coté juste mettre Jquery pour ca ca serait overkill. Par chance, on abuse de JQuery chez nous :).
non mais c’était juste pour dire que c’est facile à faire en javascript, mais j’avais pas trop le temps d’écrire les 50 lignes de code sans jquery
Et donc j’ai préféré une solution full CSS. Tant pis pour l’optimisation à 100% de l’espace, j’ai opté au final pour laisser une place de 100px pour le texte du champ.
[quote="[PERE]Cil, post:13, topic: 49387"]
Et donc j’ai préféré une solution full CSS. Tant pis pour l’optimisation à 100% de l’espace, j’ai opté au final pour laisser une place de 100px pour le texte du champ.[/quote]
slacker du lundi