> 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 !!

Publicité
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
204,99 €NAS QNAP TS-328-2G (3 baies) à 204,99 €
Valable jusqu'au 22 Septembre

RueDuCommerce fait une promotion sur le NAS QNAP TS-328-2G (3 baies) qui passe à 204,99 € au lieu de 294 €. Le QNAP TS-328 est le premier serveur NAS 3 baies compatible avec la matrice RAID 5 pour plus d'espace de stockage et de sécurité qu'un NAS 2 baies. Réelle solution abordable de stockage, partage et protection de données, il offre différentes fonctionnalités comme la sauvegarde en snapshots ou la synchronisation. Il dispose aussi de fonctionnalités multimédias pour centraliser et organiser simplement vos photos, musiques ou vidéos. Son design discret d'adaptera facilement à votre environnement.


> Voir l'offre
- 10 €10 € de réduction à partir de 20 € d'achats chez Rakuten pour les nouveaux clients
Valable jusqu'au 08 Octobre

Rakuten propose pour les nouveaux clients une offre de parrainage vous permettant de bénéficier de 10 € de réduction immédiate à partir de 20 € d'achats. Rakuten est une plateforme qui vous permettra d'acheter aussi bien des produits informatiques et Hi-Tech que des livres, des disques ou des jeux vidéos d'occasion.


> Voir l'offre
42,66 €Ensemble clavier/souris sans fil Microsoft Wireless Desktop 3050 à 42,66 €
Valable jusqu'au 26 Septembre

Amazon fait une promotion sur l'ensemble clavier/souris sans fil Microsoft Wireless Desktop 3050 qui passe à 42,66 € livré gratuitement alors qu'on le trouve ailleurs à partir de 54 €.  

Grâce à ses touches silencieuses et à son repose-poignets, ce clavier élégant vous permet de rester productif toute la journée. Profitez également des touches de raccourci multimédia pour contrôler vos musiques et vos vidéos. Ce clavier est aussi doté du chiffrement sécurisé AES qui permet de protéger les informations que vous saisissez.

La Technologie Bluetrack de la souris vous offre un contrôle précis sur quasiment toutes les surfaces, tandis que le pourtour en caoutchouc et le corps légèrement plus long de la souris vous fournit un confort total.

De plus, vous pouvez vous déplacer jusqu’à 10 mètres de votre ordinateur et conserver une connexion sans fil fiable.


> Voir l'offre

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