PHPfrance

la communauté d'entraide francophone dédiée au PHP

Mettre un logo en bordure d'écran

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Mettre un logo en bordure d'écran

Re: Mettre un logo en bordure d'écran

par diomos » 05 mars 2023, 07:37

J'ai trouvé ! Ouf !
Avec l'aide de "Flomir" de https://www.sitedudev.com/

Le tout combiné avec ce vous m'avez appris, je parviens à mes fins !

#logo {
position: fixed;
top: 2px;
left: 2px;
z-index: 999;
width: 120px;
background-color: transparent;
}

A mettre dans toutes les pages parce que si l'image est déclarée dans la CSS, ça ne va pas !
<div id="logo"><img src="http://nom _du_site.free.fr/images/logo/logo3.gif" style="width:120px;"></div>

Re: Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 17:47

Tu avais mis ça 
background-image: ./images/banniere/logo/logo.gif;
Tu vois vraiment pas de différence avec ça ? 
background-image: url("paper.gif");
Manque pas le url() ?

J'ai fait ça mais c'est limité à la page et non pas à l'écran.
Tu l'as pas mis juste sous le body alors, ou bien le body est pas en width 100%.
Sinon tu l'as mis dans un bloc position relative qui ne fait pas toute la largeur de la page...

https://jsfiddle.net/r12vfbLd/
Oui, j'avais vu ça et ça a été corrigé, aussi, je ne comprenais pas trop parce que c'était bon dans mon CSS.

J'ai mis juste sous le BODY mais c'est pas bon, parce que le logo s'affichera dans la page en non pas dans l'écran.
J'avais essayé mais rien ne s'affichait.
Certainement que ça a dû faire quelque chose parce que la mise en page a changé !

Et merci pour le lien, c'est bien visible, mais c'est "sur" la page.
D'après le code, y a rien de précis, donc, ça concerne uniquement la page active.

Re: Mettre un logo en bordure d'écran

par Saian » 03 mars 2023, 14:38

Tu avais mis ça 
background-image: ./images/banniere/logo/logo.gif;
Tu vois vraiment pas de différence avec ça ? 
background-image: url("paper.gif");
Manque pas le url() ?

J'ai fait ça mais c'est limité à la page et non pas à l'écran.
Tu l'as pas mis juste sous le body alors, ou bien le body est pas en width 100%.
Sinon tu l'as mis dans un bloc position relative qui ne fait pas toute la largeur de la page...

https://jsfiddle.net/r12vfbLd/

Re: Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 14:11

Tu peux mettre un <div id="logo"></div> dès le début du body.
J'ai fait ça mais c'est limité à la page et non pas à l'écran.
Je pense qu'il y a moyen de le faire parce qu'il me semble l'avoir déjà vu, mais je sais plus où !

Re: Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 14:03

Pourtant, j'ai pris exemple sur W3 
body {
 background-image: url("paper.gif");
 background-color: #cccccc;
}
Franchement, je ne vois pas où ça coince !

Re: Mettre un logo en bordure d'écran

par Saian » 03 mars 2023, 13:14

Tu peux mettre un <div id="logo"></div> dès le début du body.

#logo dans la css correspond à tout bloc avec attribut id="logo" dans le html. Normalement un id est sensé être unique dans la page.

PS : attention au background-image qui n'est pas bon en fait. 
background-image: url("/images/banniere/logo/logo.gif");

Re: Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 13:13

Même si le id="logo" est correct, je ne sais pas où le placer ?

Re: Mettre un logo en bordure d'écran

par Saian » 03 mars 2023, 13:00

Le #logo me parait correct. T'as bien mis un id="logo" sur la balise qui est sensée afficher l'image ?

PS : "tu encapsules les lignes dans un img#logo {}"
Ca veut juste dire "met les styles dans" comme tu as fait avec #logo {}.

Re: Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 12:58

"tu encapsules les lignes dans un img#logo {} "
Je ne connais pas du tout ça !
/* 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 {
	font-family:verdana,arial;
/*	border-style: double;*/ /* pour voir où en est la page */
	background:cyan;
/*	position: absolute;*/
	margin-left: 20%;
	margin-right: 20%;
	padding-top: 0; /* distance du bord haut */
	padding-bottom: 0;
	/* largeur */
	width:1080px;
	/* hauteur */
	height:auto;
}
#logo {
display: absolute; 
top: 0; 
left: 0;
background-image: ./images/banniere/logo/logo.gif; width:181px; height:161px;
}
Le problème est que je n'arrive pas à faire afficher le logo dur le fond d'écran en haut à gauche.
Pourtant en CSS, c'est assez simple... à priori, mais dans la CSS "html" ça va pas, et dans "body", c'est sur la page !

Re: Mettre un logo en bordure d'écran

par Saian » 03 mars 2023, 12:40

C'est de la CSS, donc à priori tu la mets dans la feuille de style et tu encapsules les lignes dans un img#logo {} par exemple si tu as mis un id="logo" sur la balise img.

Re: Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 12:08

Merci Saian, mais détaille un peu plus STP, je dois mettre ton code où ?

Re: Mettre un logo en bordure d'écran

par Saian » 03 mars 2023, 11:57

Salut diomos, avec juste l'image du logo en png fond transparent, et en mettant la balise img directement dans le body, tu peux positionner l'image en 
display: absolute; 
top: 0; 
left: 0;
Par contre elle risque de passer derrière ou devant le bloc principal (celui avec le menu et le contenu) si la fenêtre n'est pas assez large.

Mettre un logo en bordure d'écran

par diomos » 03 mars 2023, 11:44

Bonjour à tous,

Est-il possible de mettre le chemin complet d'un logo dans une variables, $logo par exemple ? 
$logo = "./images/banniere/logo2.jpg";
A moins qu'on peut le mettre dans un CSS, mais ayant déjà essayé, mais où placer ça ? HTML, ça va pas, BODY, c'est toujours en bordure de page et je voudrais que ça soit en bordure d'écran : 
/* 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 {
	font-family:verdana,arial;
/*	border-style: double;*/ /* pour voir où en est la page */
	background:cyan;
/*	position: absolute;*/
	margin-left: 20%;
	margin-right: 20%;
	padding-top: 0; /* distance du bord haut */
	padding-bottom: 0;
	/* largeur */
	width:1080px;
	/* hauteur */
	height:auto;
}
Je demande ça car je voudrais le placer en bordure d'écran et non de la page :
http://qi98.free.fr/temp/logo-php.jpg

Je l'avais mis directement dans le fond d'écran; mais en en plein écran, on le voyait aussi sur la droite, donc, c'est pas la bonne solution.

Merci de m'aider.

Diomos