Supperposer deux images
Résolu/Fermé
bluenette
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
-
8 déc. 2010 à 14:23
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 10 déc. 2010 à 04:54
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 10 déc. 2010 à 04:54
A voir également:
- Supperposer deux images
- Deux ecran pc - Guide
- Des images - Guide
- Itinéraire google map entre deux adresses - Guide
- Deux comptes whatsapp - Guide
- Faire deux colonnes sur word - Guide
9 réponses
Lord Zero
Messages postés
459
Date d'inscription
lundi 18 octobre 2010
Statut
Membre
Dernière intervention
15 juin 2018
115
8 déc. 2010 à 14:52
8 déc. 2010 à 14:52
je te propose 2 solutions :
1- tu crée un tableau et tu ajoute ton image en tant que background du tableau.
de la tu pourra mettre tes boutons.
2- tu crée une div et la suite et pareil que le tableau
1- tu crée un tableau et tu ajoute ton image en tant que background du tableau.
de la tu pourra mettre tes boutons.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<table width="500" style="height:400px;background-image:url('http://www.echosdunet.net/bibliotheque/pere-noel.jpg')">
<tr>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
</tr>
</table>
</body>
</html>
2- tu crée une div et la suite et pareil que le tableau
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<div style="width:500px;height:400px;background-image:url('http://www.echosdunet.net/bibliotheque/pere-noel.jpg')">
<input name="Button1" type="button" value="button" /> <input name="Button1" type="button" value="button" /> <input name="Button1" type="button" value="button" />
</div>
</body>
</html>
bluenette
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
3
8 déc. 2010 à 15:09
8 déc. 2010 à 15:09
Tout d'abord merci merci merci!
Ensuite, Ouille ouille, c'est du charabia pour moi. Pardon je vais être pénible!
1) Pour commencer, pourquoi dans les codes que tu me donnes, ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
devient ça ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
faut-il que je le change?
2) Si je comprends bien, ensuite ça je le garde (a chaque page je le garderai dailleurs)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
3) Là, l'image background n'a pas d'url, elle est dans mon dossier, c'est jpg. Quel code donner?
<body>
<table width="500" style="height:400px;background-image:url('http://www.echosdunet.net/bibliotheque/pere-noel.jpg')">
4) Enfin, en admettant que je renomme mes boutons "Button1 , Button2,...) que je respecte donc : input name="Button1", type reste ce que tu as marqué? et Value également? Comment faire pour que chaque "Button" redirige vers une autre page?
<tr>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
</tr>
</table>
</body>
Pardon d'être aussi pénible! :( Réussir a créer un site est un challenge pour moi! Et j'ai jusqu'à Noël! On est pas arrivés!
Encore merci
Ensuite, Ouille ouille, c'est du charabia pour moi. Pardon je vais être pénible!
1) Pour commencer, pourquoi dans les codes que tu me donnes, ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
devient ça ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
faut-il que je le change?
2) Si je comprends bien, ensuite ça je le garde (a chaque page je le garderai dailleurs)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
3) Là, l'image background n'a pas d'url, elle est dans mon dossier, c'est jpg. Quel code donner?
<body>
<table width="500" style="height:400px;background-image:url('http://www.echosdunet.net/bibliotheque/pere-noel.jpg')">
4) Enfin, en admettant que je renomme mes boutons "Button1 , Button2,...) que je respecte donc : input name="Button1", type reste ce que tu as marqué? et Value également? Comment faire pour que chaque "Button" redirige vers une autre page?
<tr>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
</tr>
</table>
</body>
Pardon d'être aussi pénible! :( Réussir a créer un site est un challenge pour moi! Et j'ai jusqu'à Noël! On est pas arrivés!
Encore merci
Lord Zero
Messages postés
459
Date d'inscription
lundi 18 octobre 2010
Statut
Membre
Dernière intervention
15 juin 2018
115
8 déc. 2010 à 15:27
8 déc. 2010 à 15:27
1-le doctype n'est pas à changer
2-garde tes balise meta
3-pour changer l'image,il suffit juste de mettre l'adresse de ton image.
url n'indique en rien quel provient d'internet juste le lien pour aller la chercher
si l'image est dans le même répertoire que ta page html,le nom de l'image suffira.
2-garde tes balise meta
3-pour changer l'image,il suffit juste de mettre l'adresse de ton image.
url n'indique en rien quel provient d'internet juste le lien pour aller la chercher
<table width="500" style="height:400px;background-image:url('ton_image.jpg')">
si l'image est dans le même répertoire que ta page html,le nom de l'image suffira.
bluenette
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
3
8 déc. 2010 à 16:37
8 déc. 2010 à 16:37
www.perigordgite.fr
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<table width="1000" style="height:1000px;background-image:url('images/fond_ecran.jpg')">
<tr>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
</tr>
</table>
</body>
</html>
Il y a du mieux!
Merci beaucoup!!!
Encore quelques questions!
1) Pourquoi es-ce que mon fond se répette alors que en css j'ai :
body
{
background-attachment:fixed;
background-repeat:no-repeat;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
2 )Ensuite Comment ajuster automatiquement la taille du fond a 100% de l'écran?
3 )Et enfin comme dire aux boutons d'êtres situés plus haut dans l'image?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<table width="1000" style="height:1000px;background-image:url('images/fond_ecran.jpg')">
<tr>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
<td>
<input name="Button1" type="button" value="button" />
</td>
</tr>
</table>
</body>
</html>
Il y a du mieux!
Merci beaucoup!!!
Encore quelques questions!
1) Pourquoi es-ce que mon fond se répette alors que en css j'ai :
body
{
background-attachment:fixed;
background-repeat:no-repeat;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
2 )Ensuite Comment ajuster automatiquement la taille du fond a 100% de l'écran?
3 )Et enfin comme dire aux boutons d'êtres situés plus haut dans l'image?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Lord Zero
Messages postés
459
Date d'inscription
lundi 18 octobre 2010
Statut
Membre
Dernière intervention
15 juin 2018
115
Modifié par Lord Zero le 8/12/2010 à 16:46
Modifié par Lord Zero le 8/12/2010 à 16:46
dans ton cas je te conseille les div,comme expliqué précédemment.
tu crée une div de la taille qu'il te faut pour ton menu,tu insère ton fond,ce qui te donnera ça:
et ensuite tu place tes boutons dans des div séparé,et avec du css tu pourra les placé ou tu veux dans ton menu
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
tu crée une div de la taille qu'il te faut pour ton menu,tu insère ton fond,ce qui te donnera ça:
<body>
<div style="width:500px;height:400px;background-image:url('http://www.echosdunet.net/bibliotheque/pere-noel.jpg')">
</div>
et ensuite tu place tes boutons dans des div séparé,et avec du css tu pourra les placé ou tu veux dans ton menu
<body>
<div style="width:500px;height:400px;background-image:url('http://www.echosdunet.net/bibliotheque/pere-noel.jpg')">
<div class=class_du_bouton1><input name="Button1" type="button" value="button" /></div>
<div class=class_du_bouton2><input name="Button1" type="button" value="button" /></div>
etc...
</div>
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
8 déc. 2010 à 18:35
8 déc. 2010 à 18:35
Rappel:
Les tableaux ne sont pas fait pour faire du positionnement d'élément ni la structure d'un site mais pour faire... un tableau!
Les éléments sont donc à positionner en CSS.
Dans ton cas, tu peux positionner les boutons en absolute et les mettres ou tu veux dans ta page.
Je te conseil de prévoir ton positionnement par rapport au centre de la page.
Exemple:
Si tu as un écran en 1440x900px (comme le miens) et que tu veux placer un élément au centre, on suppose que cet élément fait 100px de large, on peut être tenté de la placer avec un left:670px;, ce qui centrera bien l'élément. Toutefois sur un écran de taille différente, l'élément ne le sera plus. A voir donc.
Les tableaux ne sont pas fait pour faire du positionnement d'élément ni la structure d'un site mais pour faire... un tableau!
Les éléments sont donc à positionner en CSS.
Dans ton cas, tu peux positionner les boutons en absolute et les mettres ou tu veux dans ta page.
Je te conseil de prévoir ton positionnement par rapport au centre de la page.
Exemple:
Si tu as un écran en 1440x900px (comme le miens) et que tu veux placer un élément au centre, on suppose que cet élément fait 100px de large, on peut être tenté de la placer avec un left:670px;, ce qui centrera bien l'élément. Toutefois sur un écran de taille différente, l'élément ne le sera plus. A voir donc.
bluenette
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
3
8 déc. 2010 à 19:01
8 déc. 2010 à 19:01
Bon bah ça y est je suis perdue!
Alors on va faire plus simple, je vous montres ce que je veux :
http://www.perigordgite.fr/
J'ai l'image de fond d'écran neutre. je veux insérer les menus "Le gîte", "Environnement",... et qu'ils soient cliclables.
Comment faire?
Alors on va faire plus simple, je vous montres ce que je veux :
http://www.perigordgite.fr/
J'ai l'image de fond d'écran neutre. je veux insérer les menus "Le gîte", "Environnement",... et qu'ils soient cliclables.
Comment faire?
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
8 déc. 2010 à 19:17
8 déc. 2010 à 19:17
C'est quoi qui a fait l'image?
Si tu veux mon avis, tu ne devrait pas mettre seulement un image en plein milieu.
Vu le visuel, il y a moyen de décomposer l'image en quatre morceaux.
- Un arrière plan avec les rayures,
- Un bandeau pour le menu,
- les deux images a gauche et droite.
Si tu fait le découpage, tu pourra:
- Placer les rayures sur le background du body,
- Placer le bandeau du menu dans un div,
- Positionner tes images à gauche et droite.
Tu n'aura ainsi plus de problème à avoir une image qui s'ajuste a l'écran (pouvant entrainé des différence de qualité d'affichage. Amuse toi a redimensionner la fenêtre de ton navigateur pour voir).
Tu pourra alors positionner tout les éléments séparément et là ou tu veux et conserver un style sur toute les pages.
Si tu veux mon avis, tu ne devrait pas mettre seulement un image en plein milieu.
Vu le visuel, il y a moyen de décomposer l'image en quatre morceaux.
- Un arrière plan avec les rayures,
- Un bandeau pour le menu,
- les deux images a gauche et droite.
Si tu fait le découpage, tu pourra:
- Placer les rayures sur le background du body,
- Placer le bandeau du menu dans un div,
- Positionner tes images à gauche et droite.
Tu n'aura ainsi plus de problème à avoir une image qui s'ajuste a l'écran (pouvant entrainé des différence de qualité d'affichage. Amuse toi a redimensionner la fenêtre de ton navigateur pour voir).
Tu pourra alors positionner tout les éléments séparément et là ou tu veux et conserver un style sur toute les pages.
bluenette
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
3
8 déc. 2010 à 21:25
8 déc. 2010 à 21:25
J'ai acheté l'image comme ça! Avec le bandeau, les deux dessins, et les rayures. je viens de décomposer l'image, avec les rayures d'un côté, le bandeau de l'autre et les images droite et gauche ailleurs, sauf que je ne sais sous quel format enregistrer ces deux deux images qui qu'elles gardent la transparence autour.
Pour garder la transparence utilise du png.
Si tu sait pas comment rajouter des boutons sur ta page recommences tes notions de html sont un peu faiblarde.
Je suit motivé ce soir voici:
Une page html(format de mise en page des pages web) se compose de plusieurs éléments: Des balises.
Les balises sont de 2 types: double(ouvrante et fermante) et simple(ou auto fermante). ça as l'air compliqué mais c'est trés simple, exemple:
<html></html>
La balise html indique que tu commences ta page, donc TOUTE la page se trouve entre ces 2 balises.
Il existe de nombreuses balises correspondant à des possibilités de mise en page et pour mettre des éléments divers(images, liens, etc..)
La structure d'une page internet est toujours identique:
<html>
<head>
La balise head(entete) contient toute les infos nécessaires à la page
</head>
<body>
La balise body(corps) est la page et son contenu.
</body>
</html>
Donc si on veut mettre un texte dans la page il faut utiliser une balise de texte dans la balise body:
<html>
<head>
La balise head(entete) contient toute les infos nécessaires à la page
</head>
<body>
<h1>
la balise h1 est une balise de titre
</h1>
<p>
La balise p est une balise de paragraphe, du texte courant
</p>
</body>
</html>
Les attributs de balise: Il est possible d'indiquer des informations pour les balises, certaines doivent en posséder(des attributs) obligatoirement).
La balise img (image) est auto fermante elle s'écrit comme ceci:
<img src="mon_image.jpg" />
L'attribut src(source) est obligatoire, il indique ou et quelle image doit être chargé. La balise de l'exemple charge l'image mon_image.jpg dans le même dossier que la page.
Un bouton de menu est un lien vers une autre page ou une autre zone de la page, c'est une balise double qui s'écrit a(anchor) comme ceci:
<a href="https://www.google.fr/?gws_rd=ssl">Cliquer ici pour aller sur google</a>
L'attribut href(hypertexte reference) indique sur quelle page nous nous rendons en cliquant dessus. Le texte entre la balise ouvrante et fermante est la partie visible du lien, si l'on modifie pas il est bleu et souligné.
Toutes les balises peuvent être imbriquées les une dans les autres:
<p>
<img src="mon_image" />
<a href="#" >mon lien</a>
</p>
ici une balise de texte contient une balise d'image et une balise de lien.
Si on veut une image pour un bouton à la place d'un texte il faut imbriquer l'image à ma place du texte sous-ligné du lien, comme ceci:
<a href="https://www.google.fr/?gws_rd=ssl">
<img src="logo_google.png" />
</a>
Donc en cliquant sur l'image on va sur la page google comme pour un lien texte. Il existe beaucoup de balises, pas besoin de les connaître par coeur, juste savoir qu'elles existent et regarder les attributs possibles et leur écriture, n'importe quelle moteur de recherche indiques des site où en trouver la liste en tapant: balise html, ou liste de balises, etc....
Donc pour mettre des boutons dans la page il suffit de mettre des liens contenant des images. Pour positionner les boutons il faut mettre utiliser un cadre ou container(une autre balise de texte ou d'autres qui ne servent que pour ça) et mettre les liens qui contiennent les images dans ces containers(une case en ligne droite dont la alrgeur est prévue pour la page par exemple et la hauteur fait exactement la même hauteur que celle de l'image).
Bon ceci n'est pas vraiment un cours de html, il en existe pléthore sur le web... chercher et trouver par soi même est une qualité indispensable à un webmaster.
edit: juste pour dire que le fond d'un élément(balise) peut être mis en attribut ou par le css...mais avant d'attaquer le css il vaut mieux être au point avec html(le css est complémentaire, le html est la base).
Si tu sait pas comment rajouter des boutons sur ta page recommences tes notions de html sont un peu faiblarde.
Je suit motivé ce soir voici:
Une page html(format de mise en page des pages web) se compose de plusieurs éléments: Des balises.
Les balises sont de 2 types: double(ouvrante et fermante) et simple(ou auto fermante). ça as l'air compliqué mais c'est trés simple, exemple:
<html></html>
La balise html indique que tu commences ta page, donc TOUTE la page se trouve entre ces 2 balises.
Il existe de nombreuses balises correspondant à des possibilités de mise en page et pour mettre des éléments divers(images, liens, etc..)
La structure d'une page internet est toujours identique:
<html>
<head>
La balise head(entete) contient toute les infos nécessaires à la page
</head>
<body>
La balise body(corps) est la page et son contenu.
</body>
</html>
Donc si on veut mettre un texte dans la page il faut utiliser une balise de texte dans la balise body:
<html>
<head>
La balise head(entete) contient toute les infos nécessaires à la page
</head>
<body>
<h1>
la balise h1 est une balise de titre
</h1>
<p>
La balise p est une balise de paragraphe, du texte courant
</p>
</body>
</html>
Les attributs de balise: Il est possible d'indiquer des informations pour les balises, certaines doivent en posséder(des attributs) obligatoirement).
La balise img (image) est auto fermante elle s'écrit comme ceci:
<img src="mon_image.jpg" />
L'attribut src(source) est obligatoire, il indique ou et quelle image doit être chargé. La balise de l'exemple charge l'image mon_image.jpg dans le même dossier que la page.
Un bouton de menu est un lien vers une autre page ou une autre zone de la page, c'est une balise double qui s'écrit a(anchor) comme ceci:
<a href="https://www.google.fr/?gws_rd=ssl">Cliquer ici pour aller sur google</a>
L'attribut href(hypertexte reference) indique sur quelle page nous nous rendons en cliquant dessus. Le texte entre la balise ouvrante et fermante est la partie visible du lien, si l'on modifie pas il est bleu et souligné.
Toutes les balises peuvent être imbriquées les une dans les autres:
<p>
<img src="mon_image" />
<a href="#" >mon lien</a>
</p>
ici une balise de texte contient une balise d'image et une balise de lien.
Si on veut une image pour un bouton à la place d'un texte il faut imbriquer l'image à ma place du texte sous-ligné du lien, comme ceci:
<a href="https://www.google.fr/?gws_rd=ssl">
<img src="logo_google.png" />
</a>
Donc en cliquant sur l'image on va sur la page google comme pour un lien texte. Il existe beaucoup de balises, pas besoin de les connaître par coeur, juste savoir qu'elles existent et regarder les attributs possibles et leur écriture, n'importe quelle moteur de recherche indiques des site où en trouver la liste en tapant: balise html, ou liste de balises, etc....
Donc pour mettre des boutons dans la page il suffit de mettre des liens contenant des images. Pour positionner les boutons il faut mettre utiliser un cadre ou container(une autre balise de texte ou d'autres qui ne servent que pour ça) et mettre les liens qui contiennent les images dans ces containers(une case en ligne droite dont la alrgeur est prévue pour la page par exemple et la hauteur fait exactement la même hauteur que celle de l'image).
Bon ceci n'est pas vraiment un cours de html, il en existe pléthore sur le web... chercher et trouver par soi même est une qualité indispensable à un webmaster.
edit: juste pour dire que le fond d'un élément(balise) peut être mis en attribut ou par le css...mais avant d'attaquer le css il vaut mieux être au point avec html(le css est complémentaire, le html est la base).
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
Modifié par arthezius le 9/12/2010 à 06:47
Modifié par arthezius le 9/12/2010 à 06:47
Autant bien commencer...
Pour être valide xhtml, les balises img doivent avoir un attribut alt=""
Tu peux tester tes pages sur cette page: http://validator.w3.org/
Edit: J'aurai bien vue quelques comme ça: http://tests.arthezius.fr/perigordgite/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> [...]
Pour être valide xhtml, les balises img doivent avoir un attribut alt=""
<img src="logo_google.png" alt="" />
Tu peux tester tes pages sur cette page: http://validator.w3.org/
Edit: J'aurai bien vue quelques comme ça: http://tests.arthezius.fr/perigordgite/
bluenette
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
3
9 déc. 2010 à 11:44
9 déc. 2010 à 11:44
Arthezius, c'est exactement ça, mis a part la police des menus que je voudrais en script italic!
Dis moi que ça tas pris des heures pour me rassurer!!!
Bon je reprends tous a zéro!
Merci beaucoup terrybogard, j'ai déjà appris tout ça, mais j'avais oublié deux trois petites notions en cours de route!
J'en suis la!
www.perigordgite.fr
XHTM :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<img src="images/fond_ecran.jpg" width="100%" height="100%" alt="" />
</body>
</table>
<p>Le gîte</p>
</body>
</html>
CSS :
body
{
background-attachment:fixed;
background-repeat:repeat-y;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
p
{
font-size:50px;
font-family:'Script Italic', Georgia, serif;
}
Mais la police Script Italic ne fonctinne pas, puisque même moi qui la possède, je ne la voit pas a l'écran
Dis moi que ça tas pris des heures pour me rassurer!!!
Bon je reprends tous a zéro!
Merci beaucoup terrybogard, j'ai déjà appris tout ça, mais j'avais oublié deux trois petites notions en cours de route!
J'en suis la!
www.perigordgite.fr
XHTM :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
<meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
<title>Le gîte de la famille Borie.</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
</head>
<body>
<img src="images/fond_ecran.jpg" width="100%" height="100%" alt="" />
</body>
</table>
<p>Le gîte</p>
</body>
</html>
CSS :
body
{
background-attachment:fixed;
background-repeat:repeat-y;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
p
{
font-size:50px;
font-family:'Script Italic', Georgia, serif;
}
Mais la police Script Italic ne fonctinne pas, puisque même moi qui la possède, je ne la voit pas a l'écran
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
10 déc. 2010 à 04:54
10 déc. 2010 à 04:54
Si tu veux, tu peux faire un enregistrer sous de ma page.
Tu pourra ainsi récupérer mes images et mon css.
J'en ai eu pour 15min grand maxi à faire ça :D
Le plus long a été de détourer les images de gauche et droite.
Pour la police, si vraiment tu veux utiliser ces polices, c'est de faire ça avec des images.
Dans le cas contraire, ça posera des problèmes a ceux qui n'ont pas la police.
Tu pourra ainsi récupérer mes images et mon css.
J'en ai eu pour 15min grand maxi à faire ça :D
Le plus long a été de détourer les images de gauche et droite.
Pour la police, si vraiment tu veux utiliser ces polices, c'est de faire ça avec des images.
Dans le cas contraire, ça posera des problèmes a ceux qui n'ont pas la police.
