Bon ben c'est vérifié, je suis une quiche (mais d'une force) en html+css...

Hier soir j'ai voulu faire un truc aussi simple qu'une fiche client (en gros, nom du client en gras, gros, souligné, + logo du client flottant à droite + des infos en dessous), et... j'y arrive pas. J'ai vraiment du mal à entrer dans la philosophie...

Comment vous faites ? Est-ce que vous mettez votre contenu avec un div autour de chaque unité "logique", et puis seulement vous faites le css? (donc en gros vous avez d'abord une page où le contenu est simplement l'un en dessous de l'autre ?). C'est ce que je vais essayer de faire ce soir, pcq ce que j'ai fait jusqu'à maintenant c'est essayer de mettre en forme au fur et à mesure, et je me perds...

Non, mais il faut que tu mettes ce qui va flotter avant ce qui va aller autour.

Ensuite ça va tout seul…

Désolé, je suis pas trop là en ce moment. Tu fais d'abord ta séparation logique, tu colle ton intelligence appli, avec des séparations logiques, genre si tu veux afficher une fiche, tu englobe tous ses attributs dans un div par exemple.

Puis ces blocs logiques tu les positionne (le DOM Inspector (je suis un vieux, j'utilise encore un terme d'il y a 10 ans mais cet outil a juste révolutionné le métier à l'époque avant même firebug) les outils de développement de tout bon navigateur (et même des mauvais, y'en a même sur IE de nos jours, c'est dire !) est ton ami) ... le conseil de Krapou (je crois, j'ai lu en transversale, désolé si je me plante) de mettre des backrgound color tant que tu positionne est bon. Perso, j'utilise toujours des couleurs horribles et criardes, genre background: pink, maroon, yellow, blue, red, etc (ces couleurs là datent des débuts du web, où tu devais designer pour des gens en 256 couleurs, autant dire que c'est pas du pastel et que ça te colle un décollement de rétine.

Enfin, quand tu as vaguement positionné tout, tu t'occupe de l'intérieur de chaque bloc.

Apparemment, le flexbox est la solution au soucis ridicule du centrage vertical (horizontal c'est déjà plus simple). Mais là je t'avoue ne pas maitriser, y'a un dessin extrèmement vrai qui m'a beaucoup fait rire tellement il était vrai (modulo les cheveux encore bruns ! :)

Tchoule conseil de Krapou (je crois, j'ai lu en transversale, désolé si je me plante) de mettre des backrgound color tant que tu positionne est bon.

Je ne te le pardonnerai jamais, Tchou

Je le fais, mais c'était pas de moi.

Je prends que des couleurs genre teal, red ou pink pour ma part, parce que des que tu dépasses 4 caractères, c'est inutile et le code hexa va plus vite à taper

Merci pour tous les conseils !

Ça commence à venir tout doucement (enfin... on verra bien le résultat lol).

Bon j'ai toujours un petit souci. Dans le fiddle que voici: jsfiddle.net/2behqzzk/

J'aurais aimé que le logo (le placeholder d'image) remonte jusqu'en haut (je lui mettrai un margin par la suite).
Je ne comprends pas pourquoi il se met comme ça à la hauteur du div jaune (".telephone").

Une idée ?

Parce qu'il y a un h1 qui est un bloc avec marge juste avant dans le code html. Mets une marge négative à ton logo, ou une position absolue ou encore déplace le dans le code et ça devrait être bon je pense

Comme le dit Guybrush, ton h1 posséde des marges au dessus et au dessous.

Le background-color vert te permet de voir le conteneur, mais les marges sont autour donc pas dans le vert.

Tu vas me dire «Mais j'ai jamais demandé de marges moi !»



Mais en fait les navigateurs implémentent des styles de base, ce qui fait par exemple que ton h1 est plus grand que le h2 lui même plus grand que le h3, etc…

Ces styles sont appelés en tout premier et tes règles surchargent donc ces styles, qui, tu vas rire #ff0, ajoutent notamment des marges au dessus et en dessous de tes Hx et de tes P.

Si tu préfères partir sans aucun style d'aucune sorte pour ne pas être perturbé par les styles par défaut du navigateur ou améliorer la compatibilité de ta page entre les différents navigateurs et leurs différentes versions, tu peux regarder du côté des feuilles de style de reset.

meyerweb.com/eric/tools/…

Edit parce que j'ai lu Guy au lieu de répondre à ton problème :

En ce qui concerne ton div jaune qui semble contenir l'image c'est car ton image est en float: right et qu'elle sort donc de ta logique de bloc. Tu ne lui demande pas d'être alignée à droite mais bien de flotter à droite, ce qu'elle fait.

Soit tu la laisses comme ça et tu dis à ton bloc suivant (donc le div à fond jaune de ne pas se ranger à côté des flottants avec un clear: both; mais bon, c'est pas la bonne solution, soit tu retires le float: right; de ton image et tu l'alignes avec un text-align: right sur son parent.

Ce qui soulève un problème, ton image n'a pas de parent pour être bien positionné ! Elle se retrouve au milieu de div alors que ce n'est pas un bloc : tu as donc un élément qui n'est pas un bloc au milieu de tes blocs, d'où la difficulté pour placer l'image correctement.

Il faut donc que tu mettes ton image dans un div, et c'est lui que tu pourras bien placer, qui plus est facilement, au milieu de toutes tes autres données. C'est ce qu'on appelle un wrapper, car il va entourer ton élément (Tu faisais la réflexion que tu ne savais pas ce que c'était qu'un wrapper).

(…)
        </h1>
        <div class="logo">
            <img class="clientLogo" src="http://fakeimg.pl/350x200/?text=Client Logo">                
        </div>
        <div class="telephone">
(…)

et pour les css :

 .logo {
    text-align:right; 
}

remplace

.clientLogo {
    float:right; 
}

Wouhou !

J'ai inventé la balise fantôme !

J'en connais un autre qui va devoir bosser ses CSS du coup !

Triple post !

Une petite ressources en anglais bien drôle : J'ai lu toutes les specs du W3C.

krapoutu vas rire #ff0

krapouJ'ai inventé la balise fantôme !

Bah t'as mis du [code] dans du [spoiler], j'y peux rien moins
Pourquoi tu as voulu faire ça ? :)

[Edit : sympa, les slides !]