Comment faire en HTML5 la composition de cette image

S'inscrire | Se connecter

> Tous les forums > Forum des Webmasters

Comment faire en HTML5 la composition de cette image Sujet résolu

Ajouter un message à la discussion

Page : [1]

Page 1 sur 1

D3542

Posté le 21/10/2013 @ 10:18

Petit astucien

Bonjour à tous,

D'après cette image (tableau qui a du être fait avec Excel ou Word), comment mettre en forme en HTML5/CSS.

Après plusieurs essais, je suis "paumé" une fois de plus. Entre autres, avec les différentes longueurs des fonds colorés et l'alignement du texte sur la même ligne comme la 1ère par exemple.

Merci de vos idées qui seront en plus pour moi un bon exercice.

Modifié par D3542 le 03/11/2013 21:14

Dreamer

Posté le 21/10/2013 à 10:29

Maître astucien

Salut

Malheureusement, le HTML5 et le CSS3 sont assez récents, donc je ne saurais te conseiller de faire un tour sur ces pages pour apprendre ou te perfectionner en codage avec les nouvelles balises.

On apprend beaucoup de ses erreurs !!

D3542

Posté le 21/10/2013 à 15:43

Petit astucien

Merci Dreamer,

Laissons de côté le HTML5. Comment ferais-tu stp ? En tableau ou ? Si tu pouvais me donner une base de départ, je t'en remercie.

Les sites j'en ai parcourus, dont le Zite du zéro et Alsacréations sans compter un grand nombre de liens.

Dreamer

Posté le 21/10/2013 à 16:13

Maître astucien

Le tableau c'est l'image que tu as mis ??

D3542

Posté le 21/10/2013 à 17:15

Petit astucien

Cette capture d'image n'est pas de moi. Comme je l'ai écrit au début, je suppose que cela a été fait dans Excel puis ensuite pris en capture d'image.

Toute la composition de l'image, faut-il transposer le tout en balises htlm pour tableaux ou avec d'autres méthodes.

Je reprends après un arrêt des tests que j'ai effectués il y a quelques semaines et abandonné car ce n'était pas concluant et je savais plus où j'en étais Difficile de te dire tout ce que j'ai essayé.

Mais je m'avoue pas vaincu et je vais reprendre petit à petit faut que je fasse attention aux yeux).

Merci

Modifié par D3542 le 21/10/2013 17:18

Dreamer

Posté le 21/10/2013 à 17:23

Maître astucien

Pourquoi un tableau ?

Un ensemble de titres, de paragraphes et une image, le tout en html est suffisant !!

elle

Posté le 21/10/2013 à 17:27

Grande Maîtresse astucienne

Pour les titres avec fond jaune : balise de titre h et background-color avec largeur fixe si nécessaire et alignement "inline" ou float.

Pour le reste, mise en forme avec paragraphes, listes, etc.

Modifié par elle le 21/10/2013 17:28

kalinka

Posté le 21/10/2013 à 17:36

Astucienne

il y a plusieurs façons de faire en voila une ( volontairement simpliste) parmi d'autres, le principe est de créer des div qui s'aligneront horizontalement sur la même ligne grâce a float qui les "colle" d'un coté laissant ainsi la place pour y glisser la div hautdroite

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="hautgauche"> 01</div>
<div id="hautdroite">02 </div>
<div id="basgauche"> 03</div>
<div id="basdroite">04 </div>
<div id="ligne1">première ligne </div>
</body>

dans ton fichier css

#hautgauche{
width:30%;
margin:5px;
float:left;
background-color: #ff0000;
}
#hautdroite {
width:60%;
margin:5px;
float:right;}
#basgauche{
margin:5px;
width:30%;
float:left;
background-color: #ff0000;
}
#basdroite {
margin:5px;
width:60%;
margin-top:5px;float:right;}
#ligne1{
clear:both;
width:100%;
color:#fff;
background-color: #000;}

Dreamer

Posté le 21/10/2013 à 17:44

Maître astucien

J'ai lu hier soir que quelqu'une demandait du BBcode ....

Kali remets-le en format texte !!

elle

Posté le 21/10/2013 à 17:48

Grande Maîtresse astucienne

En sélectionnant pour copier, y a pas de problème...

kalinka

Posté le 21/10/2013 à 18:05

Astucienne

Dreamer a écrit :

J'ai lu hier soir que quelqu'une demandait du BBcode ....

Kali remets-le en format texte !!

Comme dit Elle, un copier/coller et ca marche

par contre, si ils pouvaient modifier le line-height de la balise code ce serait pas du luxe

Modifié par kalinka le 21/10/2013 18:06

Dreamer

Posté le 21/10/2013 à 18:31

Maître astucien

kalinka a écrit :

Dreamer a écrit :

J'ai lu hier soir que quelqu'une demandait du BBcode ....

Kali remets-le en format texte !!

Comme dit Elle, un copier/coller et ca marche

par contre, si ils pouvaient modifier le line-height de la balise code ce serait pas du luxe

La couleur aussi : rouge sur jaune, c'est pas terrible !!

D3542

Posté le 21/10/2013 à 18:41

Petit astucien

Dreamer a écrit :

Pourquoi un tableau ?

Un ensemble de titres, de paragraphes et une image, le tout en html est suffisant !!

Tout cela a fait partie de mes tests mais j'ai bloqué. C'est pour cela que je fait appel aux spécialistes Les couleurs c'est pas le plus important.

Merci à ce tout ce que vous avez mis en code, je pourrai tester qu'à partir de mercredi. Je devrais y arriver

HSujet : j'ai remarqué que "Linda" était parfois citée. Je ne sais pas si c'est la même personne du Québec qui m'a fait connaître PCAstuces en avril 2001, qui sait... Ça rajeunit pas

Bonne soirée à vous.

Modifié par D3542 le 21/10/2013 18:44

D3542

Posté le 30/10/2013 à 09:53

Petit astucien

Bonjour,

Bah oui, tout bonnement paragraphes, titres, background-color, etc. Alors tout cela je l'avais fait mais c'est "float" qui n'a pas du me venir à l'esprit. Je me rappelle plus ce que j'ai fait, autrement je n'aurai pas posé la question.

Désolé du dérangement

Merci encore à vous.

Là je regarde pour "Afficher/Masquer" du texte. J'ai trouvé quelque chose sur Alsacreations et ailleurs. Je ferai un sujet.

Page : [1]

Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !

Recevoir PC Astuces par e-mail

Les bons plans du moment PC Astuces

Tous les Bons Plans

Mini PC LETSUNG Golite 11 (Celeron N4000, 8 Go RAM, SSD 128 Go, WiFi 5, BT 4.2, Windows 11)
99 € 130 € -24%
@Geekbuying

SSD Crucial P3 Plus 1 To (NVMe, PCIe, M.2, 5000 Mo/s)
56,66 € 75 € -24%
@Geekbuying

Lego 10353 Icons Williams Racing FW14B et Nigel Mansell
49,99 € 72,99 € -32%
@Cdiscount

Lot de 4 bidons de lessive Ariel (92 lavages)
18,94 € 25 € -24%
@Amazon

Batterie Bosch Professional 18V System 5Ah
62,01 € 72 € -14%
@Amazon Allemagne

SSD MSI Spatium M470 Pro 1 To (NVMe, PCIe 4.0, 6000 Mo/s)
66,88 € 80 € -16%
@Amazon Allemagne

Sujets relatifs

	Faire un lien sur une image
	afficher une image HTML5
	Envoi de formulaire sur Email: comment faire SVP?
	Presnetation photo comment faire
	Comment fait-on pour mettre une image ici ?
	Comment faire obtenir des visiteurs francophones !
	https comment faire
	Comment faire supprimer post d'un forum fermé?
	comment insérer une image d'une capture écran
	Comment faire cela ?
Plus de sujets relatifs à Comment faire en HTML5 la composition de cette image

> Tous les forums > Forum Forum des Webmasters