Logo en coin d'écran
Bonjour à tous,
Je voudrais mettre un logo dans le coin gauche de l'écran sur le "background" déjà en place.
Cyrano m'avait dit qu'il était possible de mettre l'image dans une variable !
Je pourrais essayer cette solution, parce que j'ai essayé en CSS, mais c'est toujours en bordure de page que ça s'affiche et je ne voudrais pas l'avoir dans la ou les pages.
Comment pourrai-je faire ?
Merci d'avance.
http://qi98.free.fr/temp/logo-php.jpg
Réponses apportées à cette discussion
Bonsoir Jlb,
le PHP n'a rien a voir dans le positionnement d'un quelconque élément dans une page.
On fait ça d'abord avec le HTML, puis avec les styles CSS.
Là, j'ai vu une image, mais c'est le code HTML et le CSS qu'il faudrait montrer pour qu'on sache ce qui cloche. Et incidemment, expliquer exactement où on doit placer ce logo serait mieux : « dans le coin gauche », ok, en haut ou en bas ? Fixe ou défilant avec la page ?
N'oubliez pas : une question bien posée, c'est au moins la moitié de la réponse.
Bonjour Cyrano,
Ce que vous avez vu en arrière-plan, c'est de background-image auquel j'ai ajouté le logo. En fait, il fait parti de l'image !
Ce qui ne va pas, c'est que je voudrais que le logo soit affiché en haut, à droite et de manière fixe.
En me documentant sur certains forums et même W3, je n'ai pas eu d'astuces vraiment efficace.
/* global */
html{
font-family:verdana,arial;
font-size: 0.885em;
background: rgb(177,173,255) url(http://qi98.free.fr/images/deco/nuages_logo.jpg) repeat;
background-attachment:fixed;
}
body {
/* border-style: double;*/ /* pour voir où en est la page */
background:cyan;
/* Ca décale le haut et on voit le background */
/* position: absolute;*/
/* largeur */
width: 1080px;
/* hauteur */
height:auto;
margin-left: 20%;
margin-right: 20%;
padding-top: 0; /* distance du bord haut */
padding-bottom: 0;
}
#logo {
display: absolute;
top: 0;
left: 0;
background-image: url(http://qi98.free.fr/images/banniere/logo/logo.gif);
background-repeat: no-repeat;
}
entete_inc.php
<?php
/* entete_inc.php */
?>
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="identifier-url" content="http://qi98.free.fr/" />
<meta name="title" content="QI98 - Analyse de la mémoire" />
<meta name="description" content="QI98 analyse efficacement les facultés intellectuelles d'un individu." />
<meta name="abstract" content="QI98 analyse efficacement les facultés intellectuelles d'un individu." />
<meta name="keywords" content="exemples,exemples qi,exemple qi,exemples de qi,exemple de qi,test en ligne,tests en ligne,test de qi,tests de qi,test qi,tests qi,download,qi98,screenshot,screenshot qi,test du qi,teste,qi,mon test de qi,test qi,mon qi,tests qi,qi quizz,test de qi gratuit" />
<meta name="author" content="Teams QI98" />
<meta name="revisit-after" content="5" />
<meta name="language" content="FR" />
<meta name="copyright" content="© 1998 Teams QI98" />
<meta name="robots" content="All" />
<title><?= $title ?></title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/entete_inc.css">
<link rel="stylesheet" href="style/pied_inc.css">
<link rel="stylesheet" href="style/menu_inc.css">
<script src="scripts/faq.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/jquery.min.js"></script>
<link rel="icon" type="image/png" sizes="20x20" href="images/banniere/logo/logo.gif">
<!-- Script pour ouyvrir et center un popup (SCREENSHOT)-->
<script language="Javascript" type="text/javascript" charset="iso-8859-1">
//<![CDATA[
function ouvrirPopup (pFichier, pLargeur, pHauteur){var posX = (screen.width / 1) - (pLargeur / 1);var posY = (screen.height / 1) - (pHauteur / 1);window.open(pFichier,"popup","width = " + pLargeur + ", height = " + pHauteur + ", left = " + posX + ", top = " + posY + ", resizable = 0");}
//]]>
</script>
<!-- pour fermer les popups ou les pages par BTN -->
<script type="text/javascript">
function myClose()
{close();}
</script>
<!-- pour la FAQ ! -->
<script>
function ouvrirFermerSpoiler(div)
{
var spoilers = document.getElementsByClassName("contenuSpoiler");
var spoiler_clic = div.querySelector(".contenuSpoiler");
for (var i = 0, nombres = spoilers.length; i < nombres; i++)
{
if ((spoilers[i].classList.contains("afficher") == true) && (spoilers[i] != spoiler_clic))
{
spoilers[i].classList.remove ('afficher');
spoilers[i].classList.toggle ('cacher');
}
}
var divContenu = div.getElementsByTagName('div')[1];
if (divContenu.classList.contains("cacher") == true)
{
divContenu.classList.remove ('cacher');
divContenu.classList.toggle ('afficher');
}
else if (divContenu.classList.contains("afficher") == true)
{
divContenu.classList.remove ('afficher');
divContenu.classList.toggle ('cacher');
}
}
</script>
<!-- pour cacher/afficher des images -->
<script type="text/javascript">
function switchInfoPerso()
{
divInfo = document.getElementById('divacacher');
if (divInfo.style.display == 'none')
divInfo.style.display = 'block';
else
divInfo.style.display = 'none';
}
</script>
</head>
<body>
<div id="logo"></div>
<!-- **** s'affiche dans la page mais pas à gauche de l'écran ******* -->
<!--
<div id="fixed";><img src="images/banniere/logo/logo_134x119.gif";></div>
-->
(...)
Ca y est, j'ai trouvé !
C'est tout bête mais il fallait y penser.
#logo {
position: fixed;
top: 2px;
left: 2px;
z-index: 999;
background-color: transparent;
}
Et à mettre dans toutes les pages :
<div id="logo">
<img src="http://nom_du_site.free.fr/images/logo/logo.gif" alt="Logo de votre site"></a>
</div>
C'est du HTML et du CSS, mais si c'est mieux avec du PHP, pourquoi pas !
En tout cas, ça fonctionne.
J'avais essayé en déclarant l'image dans le "#logo", mais il n'y avait pas d'affichage.
Ben voilà, c'est très bien alors.
