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

Publicité
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
50,03 €Casque HyperX Cloud Alpha (PC, Xbox One, Xbox Serie X/S, PS4, PS5, Switch) à 50,03 € livré
80 € -37%

Amazon Allemagne fait une promotion sur l'excellent casque gaming HyperX Cloud Alpha qui passe à 44,36 € (avec la TVA ajustée). Comptez 5,67 € pour la livraison en France soit un total de 50,03 € livré alors qu'on le trouve ailleurs à partir de 80 €. Très confortable avec sa mousse à mémoire de forme, il intègre un cadre en aluminium, des transducteurs double chambre de 50 mm offrant de nouvelle génération et un microphone unidirectionnel à suppression de bruit.


Voir l'offre
29,99 €Assistant vocal Amazon Echo Auto avec Alexa à 29,99 €
59,99 € -50%

Amazon fait une promotion sur l'assistant vocal Echo Auto qui passe à 29,99 € (au lieu de 59,99 €). Ajoutez Alexa à votre voiture : Echo Auto se connecte à l'application Alexa sur votre téléphone et utilise les haut-parleurs de votre voiture via l'entrée AUX ou la connexion Bluetooth de votre smartphone. Bien plus que l'autoradio de votre voiture : contrôlez Echo Auto par simple commande vocale via l'application Alexa pour écouter du contenu en streaming sur Audible, Amazon Music, Apple Music, Spotify, Deezer ou des stations de radio du monde entier avec TuneIn. Support pour grille de ventilation inclus.


Voir l'offre
79 €Assistant vocal Amazon Echo Show 8 avec Alexa + Ampoule connectée Philips Hue à 79 €
130 € -39%

Amazon fait une promotion sur l'assistant vocal Amazon Echo Show 8 accompagnée d'une ampoule connectée Philips Hue qui passe à 79 € (au lieu de 130 €). L'appareil piloté par la voix et vos doigts fonctionne avec Alexa, l’intelligence artificielle développée par Amazon. Vous pourrez avec elle écouter de la musique, interagir avec vos appareils domotiques (dont l'ampoule fournie), écouter les infos, des livres audio la radio, connaître la météo et d’accéder à des milliers d’autres possibilités grâce aux Skills : recettes de cuisine, petits jeux, etc. Grâce à son écran HD de 8 pouces, vous pourrez également regarder des séries, des films, des photos, afficher des recettes de cuisine, appeler vos amis en visio, contrôler vos caméras de sécurité, etc...

Notez qu'un pack avec une prise connectée Meross Smart Plug est également disponible à 84,99 €.


Voir l'offre
5,99 €Adaptateur Bluetooth USB TP-Link UB400 à 5,99 €
10 € -40%

Amazon fait une promotion sur l'adaptateur Bluetooth USB TP-Link UB400 qui passe à 5,99 €. Cet adaptateur à brancher sur un port USB va vous permettre d'ajouter le bluetooth 4.0 à votre ordinateur et d'utiliser ensuite sans fil vos périphériques bluetooth : souris, clavier, casque, manette, téléphone, ...


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