[RESOLU] Alignement d'un champ input et d'une image servant de lien

Dev
1

Bon, voila, j’essaye d’aligner un champ et une image cliquable, qui servira plus tard de bouton pour envoyer un formulaire.
Sous FF, nickel, sous IE7, j’ai UN pixel de décallage, et ca m’ennerve un poil :slight_smile:
Si quelqu’un voit le truc évident qui m’échappe depuis que j’ai le nez dessus, je prends.
Je joins le fichier image, si besoin.
Merci d’avance :crying:

[html]

body { width:1000px; background:#FFFFFF; text-align:center; margin:0px auto; padding:0px; font-family:Tahoma; font-weight:bold; font-size:12px; color:#176bc1; text-decoration:none; }

a img {
border: none;
}

div.menu-navigation-password {
padding-left:10px;
float:left;
width:153px;
height:17px;
padding-bottom:3px;
}

input.menu-navigation-password {
color:#176bc1;
border:#176BC1 1px solid;
background-color:#FFFFFF;
width:153px;
height:17px;
font-weight:bold;
font-size:10px;
line-height:13px;
margin:0px;
padding:0px;
}

div.menu-navigation-bouton {
padding-right:10px;
float:left;
width:17px;
height:17px;
padding-bottom:3px;
}

a.menu-navigation-bouton-connexion {
border-width:0px;
}

[/html]
2

Même problème, avec le code simplifié à mort :
[html]

div.test1 { float:left; }

div.test2 {
float:left;
}

input.test1 {
border:#176BC1 1px solid;
height:17px;
}

[/html]
3

J’ai la même chose chez moi. Plutôt qu’une raison ou une solution universelle, je te propose un hotfix en attendant que les gourous du css se réveillent :

div.test2 { float:left; margin-top:0px !important; margin-top:1px; }

4

J’ai eut exactement le même problème que toi.

Les intégristes de la CSS vont me crucifier, mais j’ai résolu le problème en mettant une table. Maintenant si quelqu’un a une solution propre en CSS, ce sera pour moi l’occasion de savoir comment faire la prochaine fois.

5

essaie un vertical-align:middle; sur ton .

6

j’allais proposer un truc similaire à bishop

div, p, a, span {
margin:0px;
padding:0px;
}

ca resout souvent ce genre de soucis.

7

Tu peux utiliser un « reset » CSS afin d’éviter les divergences de comportements selon le navigateur. C’est une méthode discutable (les plus extrémistes tendent à dire que c’est une solution sale car tu réinitialise par la-même les comportements par défaut de certain éléments qui sont entrés dans les moeurs). Mais après tout le propre d’une CSS c’est d’afficher TA vision de ton site, libre à l’utilisateur d’utiliser la CSS ou pas.

http://blog.alsacreations.com/2007/07/02/3…avec-precaution

Ce lien te donnera plus d’infos et analyse les problèmes que cette solution amène. En gros, si tu utilises un CSS, faut soit savoir exactement ce que tu vas ou ne vas pas utiliser comme éléments et les styler, soit être ultra exhaustif au niveau de la feuille de style (c’est en résumé ce qu’ils disent). L’alternative c’est d’utiliser un reset partiel comme celui qui t’es donné ci-dessus. (y a d’autres exemples dans les liens proposés dans le lien ci-dessus) :slight_smile:

8

[quote=“bishop, post:3, topic: 47806”]J’ai la même chose chez moi. Plutôt qu’une raison ou une solution universelle, je te propose un hotfix en attendant que les gourous du css se réveillent :

div.test2 { float:left; margin-top:0px !important; margin-top:1px; }[/quote]
Je vois pas trop, en gros, un navigateurs flippe quand il y a le !important et ne le gère pas, tandis que l’autre l’accepte ?

[quote=“Donjohn, post:6, topic: 47806”]j’allais proposer un truc similaire à bishop

div, p, a, span {
margin:0px;
padding:0px;
}

ca resout souvent ce genre de soucis.[/quote]
Je teste ce soir, on verra

[quote=“Molokai, post:7, topic: 47806”]Tu peux utiliser un “reset” CSS afin d’éviter les divergences de comportements selon le navigateur. C’est une méthode discutable (les plus extrémistes tendent à dire que c’est une solution sale car tu réinitialise par la-même les comportements par défaut de certain éléments qui sont entrés dans les moeurs). Mais après tout le propre d’une CSS c’est d’afficher TA vision de ton site, libre à l’utilisateur d’utiliser la CSS ou pas.

http://blog.alsacreations.com/2007/07/02/3…avec-precaution

Ce lien te donnera plus d’infos et analyse les problèmes que cette solution amène. En gros, si tu utilises un CSS, faut soit savoir exactement ce que tu vas ou ne vas pas utiliser comme éléments et les styler, soit être ultra exhaustif au niveau de la feuille de style (c’est en résumé ce qu’ils disent). L’alternative c’est d’utiliser un reset partiel comme celui qui t’es donné ci-dessus. (y a d’autres exemples dans les liens proposés dans le lien ci-dessus) :)[/quote]
Punaise…
Moi qui me disait, OK, je prend le temps qu’il faut, mais je me fait un petit site sympa, full CSS, histoire de voir un peu comment marche le bousin. Je tombe sur des hacks a tout va, entre un navigateur standard de fait mais pas standard, et un autre plus standard mais pas universel (sans rentré dans la polémique svp).
Ca doit être cool comme taff, créateur de site web, avec un patron qui gueule, un client qui gueule, et des trucs standards qui marchent pas :crying:

En tout cas merci à tous pour le coup de main, je teste ca et je reviendrais si je rebloque !

9

Le secret des pros: on s’en fout de faire un truc standard, on fait des trucs qui marchent.

10

IE ignore completement !important, pas FF ni opera (ni safari me semble t’il de mémoire). !important permet de « bloquer » la valeur en cas de réecriture. C’est un hack couramment utilisé pour régler les problemes de marges d’IE.

T’a même pas idée ^^

Je confirme. D’ailleurs, je l’ai toujours dit et je le repete, si vraiment ca chie avec la css et que cela oblige a l’alourdir et réordonner le html,

reste une alternative rationelle (pas bonne, pas idéale, rationelle). Mais tant que tu peux l’éviter, évite :slight_smile:

11

Note que le !important donne la priorité sous certaines conditions. Il y a une hiérarchie dans les feuilles de style (feuille de style du site, du browser et de l’utilisateur) et ce !important est prioritaire sous condition. Doit y avoir de la doc sur alsacréations à ce propos, j’avais lu en diagonale, ce n’est pas un truc que j’utilise. Bref un truc pas vraiment utile finalement car aucune garantie que ce qu’il devrait faire est effectivement fait. :slight_smile:

Le reset CSS bien géré est à mon avis beaucoup plus pertinent.

En ce qui concerne les , là par contre j’aurais tendance à dire non. En effet ça peut régler un soucis rapidement, par contre le jour où on veut modifier la tronche du site on est bon pour remettre les mains dans le cambouis. Sans entrer dans le débat « standard / pas standard », l’objectif premier pour un webdesigner d’utiliser des CSS, c’est la réutilisabilité du code et la facilité de modification du design. Les tables viennent un peu bousiller ce concept.

12
13

Au contraire, quand t’es dans un concept petit site, blog ou autre, là t’as pas trop de soucis à utiliser un table par-ci par-là pour arranger rapidement le problème. Le jour où faut modifier un truc, c’est pas compliquer de retourner dans le code.

Par contre quand tu entre dans une logique de code plus complexe, t’as tout intérêt à déléguer au maximum la présentation à la feuille de style. Y a strictement rien d’insoluble en CSS que les tables pourraient gérer, ça demande un peu plus d’expérience et une logique un peu plus stricte, mais pas forcément une imbrication ridicule de blocs, suffit de bien gérer son héritage de style.

Tu connais sûrement, mais sait-on jamais : http://www.csszengarden.com

Tu as là un exemple de code très simple, pas de soupe de balises et pourtant des affichages extrêmement variés, plus ou moins complexes (parfois très très travaillés).

Enfin, les tables non plus ne te garantissent pas un affichage cohérent sur tous les navigateurs.

Pour répondre à ta question, je produis des site web depuis un plus de 10 ans maintenant, à titre personnel avant tout, parfois professionnel, du petit site au gros, de site vitrine à l’application de gestion. Je suis passé par l’étape comme tout le monde et je me suis forcé à utiliser les CSS dans le but de factoriser mon code (logique de développeur et non de webdesigner :P). Et oui, aujourd’hui je peux répondre très rapidement à une demande de changement de design grâce aux CSS, sans avoir besoin de toucher au code source. Ca a demandé un peu plus de travail en amont, mais ça simplifie grandement la vie par la suite. :slight_smile: Et je connais aucun client qui ne change jamais d’avis pendant le développement. :crying:

Après chacun fait ce qu’il veut, je témoignais juste de mon expérience à ce sujet : le tout CSS m’a grandement simplifié la vie même si cela m’a demandé beaucoup d’implications et de recherches au départ, ainsi que de la rigueur. Mais faut vraiment aller loin pour en faire une utilisation correctes et utile. Si tu reste à la phase simpliste qui veut qu’on rajoute un div chaque fois qu’un truc va pas plutôt que de trouver la bonne déclaration CSS qui règle le soucis, on reste dans une logique bout de scotch et comme tout outil, s’il est mal utilisé, ben il fait pas ce qu’il doit. :cry:

14

A noter que ce site est le meilleur exemple disponible sur le web de ce qu’il faut surtout ne jamais faire avec des css :slight_smile:

15

(Halalala c’est toujours ceux en connaissent le moins qui trollent le plus…)

Voilà pour ton problème : http://64k.be/temp/input/

En fait quand on peut, il faut éviter de compliquer avec des floats. Ici il suffit de garder le comportement inline par défaut des éléments input et img et définir l’alignement vertical. Ca marche dans IE6/IE7/Firefox/Safari/etc, sans hack. Et toujours définir un doctype xhtml à son document.

[html]

 <title>untitled</title>
 <style type="text/css">
 
     input.menu-navigation-password {
         height: 15px;
         padding: 0;
         margin: 0;
         font-size:12px;
         border: 1px solid #176BC1;
         vertical-align: middle;
     }
     a.menu-navigation-bouton-connexion img {
         vertical-align: middle;
         border: 0;
     }
 </style>

 <input type="password" class="menu-navigation-password" /><a href="#" class="menu-navigation-bouton-connexion"><img src="btn_connexion_off.gif" alt="" /></a>
[/html]
16

Nous sommes dans la même optique et par ailleurs je te rejoins complétement sur l’utilisation d’une CSS. Là où nos avis divergent c’est sur la pratique. Mon expérience et mes constatations me font dire que tendre vers cette solution idéale est chronophage. Mais comme je disais dans ma première réponse sur le thread, je ne me considère pas comme une référence sur le sujet.

Je ne sais pas à qui tu t’adresse mais je ne crois pas avoir vu quelqu’un troller. Deux questions sur ta solutions : pourquoi et pas ? Pourquoi une height de 15 alors que l’image fait 17 ?

17

Une habitude. Sinon c’est la même chose, même sans tag autour ça fonctionne aussi.

Parce que 15 + 1 + 1 = 17 (la hauteur du champ + le bord d’un pixel)

18

Développe ? Parce que bon, doit y avoir un bon millier de feuilles de style en stock sur ce site, avec du bon, du moins bon, etc. Le but du site c’est surtout de montrer que pour un même code HTML on peut obtenir une multitude de design différents et très variés (pas simplement des variations de couleurs). Après il date un peu, il a été créé au tout début de la prise de conscience des standards et de l’utilité des CSS.

Euh ouais. Un peu la sensation d’être sur un canal IRC bidon pour le coup avec ces deux remarques complètement gratuites.

Bishop : ouaip là-dessus je te rejoins complètement, c’est énormément consommateur de temps au début (et ça peut vite devenir frustrant / énervant). Mais je le vois comme un investissement, à terme c’est tout de même censé t’en économiser. :crying:

19

Simple: les css, c’est composé de deux morceaux: les attributs et les sélecteurs.

Les selecteurs sont aussi, sinon plus, importants que les attributs. Car c’est eux qui vont faire qu’une même feuille de style puisse être utilisée pour toutes les pages d’un même site, ce qui est le but premier de la feuille de style.

les gens qui ont fait des css pour ce site maitrisent souvent bien les attributs, mais ceux qui l’ont créé chient sur les sélecteurs.

le code html de csszengarden (avant même qu’on vienne y greffer du css dessus) est entièrement composé d’abominations de ce genre (j’ai volontairement enlevé le texte parce que ça nous intéresse pas et que ça prend de la place):

<div id="benefits"> <h3><span>Benefits</span></h3> <p class="p1"><span>.....</span> </div>

On va passer rapidement sur les qui n’ont strictement rien à faire là, et on va voir qu’on a donc un bloc avec un id (identique au titre) permettant à un intégrateur fainéant de pas avoir à se casser les couilles avec les sélecteurs, puisqu’il a simplement à faire #benefits h3 pour définir un style pour le titre.
Bref, on va créer tout un chapitre dans la feuille de style pour afficher un bloc de texte sur une page. Parlez moi de réutilisabilité du code.

je dirai même pas mon avis sur ces quelques lignes, sinon je risquerais d’être vulgaire et il y a des enfants qui regardent:

[code]

[/code]

Bref, csszengarden c’est du bling-bling, c’est joli et c’est impressionnant quand on y connait rien, mais dès qu’on connait un peu le sujet et qu’on gratte la surface on se rend compte que surtout de la poudre aux yeux, et que les méthodes utilisées pour que cette page puisse être totalement re-designée en css ne sont absolument pas utilisables sur un vrai site, dynamique et avec du contenu ajouté par des contributeurs qui entravent que dalle au html et encore moins aux css.

(pour information, j’avais déjà le même avis la première fois qu’on m’a linké ce site il y a bien 4 ou 5 ans, même si je maitrisais bien moins le sujet)

(au passage, j’avais proposé la « vertical-align: middle; » plusieurs posts au-dessus, personne ne l’a vu ou bien?)

20

Ouais enfin t’es complètement à côté du débat pour le coup. On a bien précisé qu’on entrait pas dans le débat “code stricte blablabla”, mais simplement utilisation de CSS ou de table… Ton argumentation tient à une seule chose : le code de zengarden n’est pas “pure” bien que stricte. Rien n’interdit de mettre un dans un , le span est une balise en ligne, p une balise en bloc… Rien n’interdit d’encadrer un bloc par un autre bloc. Strictement il est correct donc, après il est redondant, mais faut pas oublier que ça se veut un exercice de style, bien entendu que n’importe quel site ne s’adaptera pas aussi facilement, CSS ou pas, mais justement autant ne pas se brider en plus avec des

.