Insertion d'une image en (x)html
compilateurc
Messages postés
24
Date d'inscription
Statut
Membre
Dernière intervention
-
olivierrobins Messages postés 225 Date d'inscription Statut Membre Dernière intervention -
olivierrobins Messages postés 225 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerai savoir comment on peut faire pour inserer son logo à la barre de titre (à gauche) et dans le titres(aussi à gauche).
Merci
J'aimerai savoir comment on peut faire pour inserer son logo à la barre de titre (à gauche) et dans le titres(aussi à gauche).
Merci
A voir également:
- Insertion d'une image en (x)html
- Site x - Guide
- Sites X : Pornhub, YouPorn et Redtube sont de nouveau accessibles en France - Guide
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Légender une image - Guide
1 réponse
Bonjour,
Le plus simple à mon avis est de faire en sorte d'avoir une div pour la barre de titre, et que les titres soient dans des balises h1 h2 h3 etc (! seulement une h1 par page! mais les h2 h3 etc peuvent être plus nombreux).
Ensuite, grâce aux styles CSS, définir une image d'arrière-plan pour la barre de titre, ainsi que pour les titres. Petit exemple, mais à modifier selon structure du site et le nom et chemin des images:
div#barre_titre{
background-image:url('images/logo_titre.gif');
background-repeat:no-repeat;
background-position:top center;
}
h2.titre_avec_logo{
background-image:url('images/logo_titre_petit.gif');
background-repeat:no-repeat;
background-position:top center;
}
Quelque chose de ce genre.
Le plus simple à mon avis est de faire en sorte d'avoir une div pour la barre de titre, et que les titres soient dans des balises h1 h2 h3 etc (! seulement une h1 par page! mais les h2 h3 etc peuvent être plus nombreux).
Ensuite, grâce aux styles CSS, définir une image d'arrière-plan pour la barre de titre, ainsi que pour les titres. Petit exemple, mais à modifier selon structure du site et le nom et chemin des images:
div#barre_titre{
background-image:url('images/logo_titre.gif');
background-repeat:no-repeat;
background-position:top center;
}
h2.titre_avec_logo{
background-image:url('images/logo_titre_petit.gif');
background-repeat:no-repeat;
background-position:top center;
}
Quelque chose de ce genre.
html:
<head>
<div id=barre_titre>
<h3>
<title>Bienvenue sur mon site !</title>
</h3>
</div>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
</head>
et css
barre_titre h3{
background-image:url('images/logo1.jpg');
background-repeat:no-repeat;
background-position:top left;
}
<div id="barre_titre"> par exemple
Ensuite, il faut écrire le css comme ça:
#barre_titre h3 (le dièse indique justement qu'on a affaire à un identifiant. si c'était une classe, on mettrait un point à la place du dièse).
Ensuite, dans la partie <head></head> devrait uniquement se trouver les meta, doctype, link rel etc. Tout le reste (structure du site) doit être dans la partie <body></body> qui se situe juste après le <head></head>.
La balise title est destinée à être dans la zone <head>. Et cela s'affichera dans la barre de navigation de la fenêtre d navigateur, pas dans le site en lui-même.
Dans la balise de titre h3, il faut mettre le titre directement.
<h3>Bienvenue sur mon site!</h3>
Essayez déjà en corrigeant tout ça, on verra ensuite s'il y a encore autre chose à modifier.