Forum d'entraide PHPFrance

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

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.

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

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.

"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 !

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

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

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");

Pourtant, j'ai pris exemple sur W3

body {
 background-image: url("paper.gif");
 background-color: #cccccc;
}

Franchement, je ne vois pas où ça coince !

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ù !

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/

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.

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>