> Tous les forums > Forum des Webmasters
 Comment faire en HTML5 la composition de cette imageSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
D3542
  Posté le 21/10/2013 @ 10:18 
Aller en bas de la page 
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
Publicité
Dreamer
 Posté le 21/10/2013 à 10:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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

D3542
 Posté le 21/10/2013 à 17:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

kalinka
 Posté le 21/10/2013 à 18:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Routeur TP-Link Archer BE550 WiFi 7 (9300 Mbps et 4 bps, 2.5G bit/s) à 202,84 €
202,84 € 299 € -32%
Graveuse laser MECPOW X5 PRO 33W (60x60 cm) + nid d'abeille offert à 579 €
579 € 800 € -28%
@Geekbuying
Chargeur rapide ARZOPA 35W GaN 1xUSB C, 1xUSB A à 12,99 €
12,99 € 25,99 € -50%
@Amazon
Ecran portable 16 pouces AOSIMAN 160QC (WQHD+ 2560x1600, 120 Hz, IPS, USB-C, HDMI) à 135 €
135 € 200 € -32%
@Geekbuying
Tablette 11 pouces Samsung Galaxy Tab A9+ (8 coeurs, 8 Go RAM, 128 Go stockage, WXGA+, Android 13) à 179,99 €
179,99 € 219 € -18%
@Cdiscount
Portable 15.6 pouces Lenovo IdeaPad 1 15ALC7 (FullHD, Ryzen 7 5700U, 16 Go, SSD 512 Go, sans OS) à 549 €
549 € 599 € -8%
@Cdiscount

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