<figure>

<img src="https://lorempixel.com/400/300/" alt="The Pulpit Rock" width="304"

height="228">
<figcaption>Fig.1 - Image fournit par LoremPixel.</figcaption>
</figure>

Version en ligne

Tutoriel : Créer un menu

circulaire
Table des matières
Créer un menu circulaire
La partie xHTML / CSS
L'animation en Javascript
Améliorations sympas

Créer un menu circulaire

Dans ce tutoriel, je vais vous expliquer comment créer un menu circulaire sympa.
J'utilise ce menu sur mon site et je voulais partager son style qui peut rendre votre site plus
original qu'un autre.
Ce menu est développé en Javascript avec un peu de CSS et de xHTML.
Je vous conseille de relire le tutoriel de M@teo si vous ne vous rappelez pas vraiment du CSS et
du xHTML.
Il peut aussi être pratique de connaître le cercle trigonométrique ; pour plus d'informations, lisez
le tutoriel de Kayl, annexe sur la trigonométrie.
Voici un aperçu du résultat que vous obtiendrez après ce tutoriel :

C'est le menu de mon ancien site, il est bien sûr animé.

Le style est évidemment paramétrable à votre guise, c'est simplement du CSS.
Voici un exemple de menu créé à partir des codes donnés dans ce tutoriel (Il n'y a pas de CSS
additionnel) : Exemple de menu circulaire animé

La partie xHTML / CSS

Pour faire un site, vous savez sûrement qu'il faut connaître le xHTML et aussi le CSS. Enfin, le
CSS n'est pas obligatoire mais fortement conseillé.
Ici, nous allons faire la partie concernant le CSS et le xHTML du menu, l'armature si vous voulez.
Un menu est souvent, voire même tout le temps, une liste.
Nous allons donc créer la liste.
Voici le code :

<div id="menu">

<h2>Menu</h2>
 <div id="centre">

Centre

</div>

<ul>

<li id="item1">Menu 1</li>

<li id="item2">Menu 2</li>

<li id="item3">Menu 3</li>

<li id="item4">Menu 4</li>

<li id="item5">Menu 5</li>

</ul>

</div>

Le div appelé centre, c'est le centre du menu.

Nous nous servirons de ses positions et de sa taille pour faire tourner le menu.
Je vous propose de faire un lien vers la page d'accueil au centre du menu.
Mettez bien le tout dans un div dont l'id est "menu", ça servira pour l'animation du menu, dans la
prochaine partie du tutoriel. Il servira aussi pour le style, pour avoir un style différent du reste du
site, pour le h2 par exemple.
Vous remarquerez sûrement les id, vous pouvez avoir autant de boutons que vous voulez dans
le menu mais il faut mettre absolument "item" suivi du numéro du bouton comme id, c'est
vraiment important pour l'animation.
Évitez cependant d'avoir trop de boutons, il faudrait alors agrandir le div "menu" pour éviter que
les boutons ne se chevauchent.
Passons maintenant au CSS.
Il est utile d'avoir un menu accessible pour les gens qui désactivent le Javascript et croyez-moi,
ils sont nombreux.
Le menu ne doit pas être animé en CSS mais il doit tout de même être utilisable, d'où l'utilisation
de la liste.

#menu

width: 170px;

background-color: #FFFF99;

border: 1px solid #000000;

#menu h2

{
 color: #0000EE;

text-align: center;

font-size: 15px;

#menu li

list-style-type: none;

list-style-position: inside;

#centre

height: 50px;

width: 50px;

margin: auto;

border: 1px solid #BBBBBB;

Voilà ; maintenant, quelques précisions : j'ai mis les border pour permettre de différencier les div.
Le style peut évidemment être modifié à votre guise, les seuls éléments à laisser, ce sont les
tailles de centre et le margin auto, ils permettent de faire un cercle autour du centre précisément.
Pour le moment, rien de bien exceptionnel, un simple menu.
Nous allons maintenant adapter le CSS pour l'animation.
Pour que l'animation Javascript fonctionne, il faut ajouter ceci à votre fichier CSS, cela permet de
donner une position absolue au bouton.

.item

position: absolute;

N'ajoutez pas class="item" à vos boutons ; si vous faites cela, les utilisateurs n'ayant pas activé
Javascript verront tous les boutons les uns sur les autres. Le script s'en chargera seul.

L'animation en Javascript
Maintenant que le CSS est fait, nous allons passer au Javascript, le plus compliqué intéressant.
Commençons par créer un fichier Javascript.
Faites simplement un fichier nommé "menu.js".
N'oubliez pas d'inclure le fichier javascript au xHTML.
Ajoutez simplement ceci entre les balises <head> et </head> :

<script type="text/javascript" src="menu.js"></script>

Changez bien sûr le nom du fichier pour le nom du vôtre.

Normalement, vous ne verrez pas de modification de votre menu étant donné que le fichier est
vide.
Bon, maintenant, passons au contenu du fichier.
Nous allons commencer par créer les variables principales.

var decalage = 0;

var nbBout;

var timer;

J'expliquerai ces variables quand nous les utiliserons.

Maintenant, la fonction principale : elle permet de créer le menu au chargement de la page.

function menu(nb)

var angle = 360 / nb;

nbBout = nb;

var posX;

var posY;

var rayon = 60;

var centreX = document.getElementById("centre").offsetLeft;

var centreY = document.getElementById("centre").offsetTop;

var lItem = 20;

var i = 1;

var item;

var b;

for(b = 0; b < 360; b += angle)

posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);

posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);

 item = document.getElementById("item" + i);

item.className = "item";

item.style.top = (posY - lItem / 2) + "px";

item.style.left = (posX - lItem / 2) + "px";

i++;

Je vais maintenant expliquer ce code, qui peut sembler compliqué à première vue.
Commençons par le paramètre : c'est en fait le nombre de boutons de votre menu, cela sert à
diviser 360, l'angle d'un cercle, par le nombre de boutons.
La variable angle est donc l'angle entre deux boutons.
nbBout prend alors le nombre de boutons du menu, cela permet de rendre le nombre de
boutons "public", je veux dire par là que toutes les fonctions pourront l'utiliser.
Les variables posX et posY sont utilisées pour déclarer la position du bouton.
Vous comprendrez par la suite.
La variable rayon, c'est la distance en pixels entre le centre du cercle et le bouton ; j'ai mis 60,
mais vous pouvez mettre plus si vous avez plus de boutons.
centreX et centreY sont égales aux positions du div centre.
La valeur de lItem est la largeur et la hauteur des boutons.
Pour le moment, ça fonctionne comme ça mais nous verrons une autre solution plus tard.
La variable i sert pour les boucles, c'est un peu ma variable passe-partout, nous l'utilisons pour le
numéro du bouton.
Passons à la boucle maintenant.
Nous faisons tourner la boucle jusqu'au moment où l'angle total est de 360°.
Les deux lignes suivantes sont les plus compliquées, non pas au niveau programmation mais
plutôt au niveau mathématique :

posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);

posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);

Eh oui, c'est de la trigonométrie.

La variable posX est égale à la position du centre plus 25, la largeur du div central divisé par
deux.
En Javascript, pour utiliser des fonctions mathématiques, nous utilisons un objet, il est nommé
Math ; cet objet regroupe des variables telles que la valeur de pi, les fonctions telles que cosinus,
sinus, ...
Toutes les fonctions utiles pour les mathématiques, quoi.
Nous utilisons ici cosinus, abréviation cos ; si vous connaissez un peu le cercle trigonométrique,
vous savez que la position du point sur X est égale à cos ("l'angle").
Cependant, la fonction cos de Javascript prend l'angle en radians et non en degrés, c'est
pourquoi nous utilisons Math.PI, qui fourni la valeur de Pi, qui peut aussi être remplacée par 3,14,
le tout divisé par 180.
Nous faisons la même chose pour la deuxième ligne sauf que la fonction est sin, pour sinus.
Pour les matheux, voici la formule mathématique de ces lignes :
posX = centreX+25+rayon*\cos(b*3.14/180)posY = centreY+25+rayon*\sin(b*3.14/180)
Enfin bon, si vous trouvez que ces lignes sont compliquées, ne vous en préoccupez pas, elles
sont les plus importantes certes, mais vous ne devez pas spécialement savoir comment ça
fonctionne pour que ça fonctionne.
Au pire, si vous êtes têtus, comme moi, vous pouvez me demander des explications par
message privé.
La variable item est égale à l'item qui va être placé aux positions posX et posY.
La ligne suivante permet de mettre class="item" au bouton.
Voilà, pour que vos boutons soient placés autour du centre, vous devez modifier la balise body
comme suit :

<body onload="menu(5);">

Cela permet d'exécuter la fonction menu au chargement de la page.

Si vous essayez, vos boutons seront immobiles mais disposés autour du centre.

L'animation maintenant...
Nous allons maintenant passer à l'animation qui changera tout.
La fonction suivante est très ressemblante à la fonction menu(), je ne vais donc pas l'expliquer en
profondeur.

function anim()

decalage++;

var angle = 360 / nbBout;

var posX;

var posY;

var rayon = 70;

var centreX = document.getElementById("centre").offsetLeft;

var centreY = document.getElementById("centre").offsetTop;

var lCentre = 50;

var lItem = 20;

var i = 1;

var item

var b;

for(b = 0; b < 360; b = b + angle)

posX = centreX + 25 + rayon * Math.cos((b + decalage) * Math.PI / 180);

posY = centreY + 25 + rayon * Math.sin((b + decalage) * Math.PI / 180);

item = document.getElementById("item" + i);

 item.style.top = (posY - lItem / 2) + "px";

item.style.left = (posX - lItem / 2) + "px";

i++;

Le seul changement, c'est l'utilisation de la variable c. Cette variable sert en fait à décaler les
boutons par rapport à la valeur de c.
La variable decalage prend 1 en plus à chaque passage de la fonction.
Vous verrez pourquoi par la suite.
Si vous essayez maintenant, vous n'aurez pas de changements par rapport à la dernière fois.
Vous devez en fait ajouter cette ligne à la fin de votre fichier :

timer = setInterval("anim()",50);

Cette ligne permet de démarrer la fonction anim() toutes les 50 millisecondes.

Ça paraît rapide, je sais, mais un degré, c'est tout petit.
Pour modifier la vitesse de rotation du menu, vous devez modifier la valeur du deuxième
paramètre.
Plus le nombre est grand, plus le menu tournera lentement.
Voilà : votre menu tourne maintenant, admettez que ça ajoute du dynamisme au site, non ?
Bon, c'est vrai qu'il tourne mais il n'est pas simple de cliquer sur un bouton en mouvement.
Dans la partie "Améliorations sympas", j'explique comment arrêter les boutons au passage de la
souris.

Améliorations sympas
La première amélioration que je vous propose est l'arrêt des boutons au passage de la souris : ce
n'est en fait pas très compliqué mais c'est quand même très pratique pour les utilisateurs.
Vous devez aussi avoir deux fonctions, l'une permettant d'arrêter l'animation et l'autre de
redémarrer l'animation après le passage de la souris.
Ces deux fonctions sont courtes.
Voici la première fonction, elle permet d'arrêter l'animation.

function stopanim()

clearInterval(timer);

Cette simple fonction permet d'arrêter l'intervalle de la fonction setInterval().

C'est donc une fonction qui prend en paramètre le timer, d'où la variable timer en paramètre.
La fonction permettant de redémarrer l'animation, je pense que vous vous en doutez, est la
suivante :

function replayanim()
{

timer = setInterval("anim()",50);

C'est simplement la remise à 50 de l'intervalle.

C'est la même chose que la première fois que vous avez utilisé la fonction : le temps détermine la
vitesse d'animation.
Pour permettre l'arrêt de l'animation, il faut encore mettre les événements xHTML.
Voici comment faire.
Remplacez la ligne suivante :

<div id="menu">

par la ligne suivante :

<div id="menu" onmouseover="stopanim();" onmouseout="replayanim();">

Voilà, votre menu est maintenant animé et les boutons s'arrêtent si vous passez la souris sur les
boutons.
Si votre menu est un menu à icônes, il peut être bien de faire disparaître le texte lorsque la souris
n'est pas au-dessus du menu, en conservant juste les icônes, mais en gardant le texte caché.
C'est simple à faire et plutôt joli.
Voilà, vous avez maintenant un beau petit menu animé.
Si vous avez éprouvé des difficultés, veuillez le signaler par message privé, je ferai mon possible
pour vous aider et pour adapter mon tutoriel.
Les idées d'améliorations sont aussi les bienvenues, je n'hésiterai pas à les y ajouter.
 Aller au menu

 Aller au contenu

 Aller à la recherche

  actualités
  tutoriels
  forum
  emploi

 S'inscrire
 Connexion

 Tutoriels et astuces
 Outils
 Livres
 Quiz

Rechercher
OK

Un arrière-plan extensible intelligent

ASTUCEdesign

Publié par Simon-K le 30 Juin 2011, mis à jour le 04 Décembre 2014 (756502 lectures)

 design background adaptable étirable

Certains sites affichent une (grande) image de fond qui s'adapte à toutes les
dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La
réalisation de ce genre de prouesse n'est pas si évidente techniquement,
contrairement à ce que l'on pourrait croire de prime abord.

Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont
possibles : une entièrement en CSS , une autre basée sur jQuery.

Exemples

Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce
principe :

Simon & Comet

Flavors me

Piz'za-za

Le point commun de tous ces sites est la mise en avant de leur background : il est fixe
et c'est la pièce maîtresse de leur design. Le choix de celui-ci est donc
particulièrement réfléchi et soigné.

Le principe

Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui
s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé
et lorsque la fenêtre est vraiment étroite le fond est recadré.

On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de
son conteneur.

Préparation de l'image de fond

L'image de fond doit respecter quelques règles basiques :

 Format rectangulaire pour la plupart des écrans : 2000px * 1300px (par exemple)
 Le poids de l'image doit être optimisé pour ne pas ralentir considérablement le
chargement
Sous Photoshop, après avoir créé votre image de fond (photo, création graphique…)
rendez-vous dans "Fichier" -> "Enregistrer pour le web…".

Dans la fenêtre qui vient d'apparaître, vous trouverez un curseur qui permet de faire
varier la qualité de l'image et donc son poids final. A vous de trouver le bon
compromis qualité/poids.

Après enregistrement, l'image est prête à l'emploi !

La méthode CSS3
Le code HTML

Rien de plus épuré : c'est une page html totalement vierge reliée à une feuille de style
CSS.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>
<body>
...
</body>
</html>

Le code CSS

Nous allons simplement appliquer une image de fond sur la balise <html> (ou
<body> au choix), retirer les marges, et utiliser la propriété CSS3 background-size et sa
valeur cover. C'est tout !

html {
margin:0;
padding:0;
background: url(image/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}

Voir le résultat

Avantages  :

 Full CSS : séparation du fond de la forme complète

 Extrêmement simple à mettre en place

Inconvénient :

 Ne fonctionne pas sur Internet Explorer <= 8 et les très anciennes versions des
navigateurs tels que Firefox 3.0.

La méthode jQuery
Le code HTML

Nous allons partir du même document que la méthode précédente, en y ajoutant ces
élements :

1. Un élément <img> contenant l'image de fond

2. Une feuille de style différente
3. deux éléments <script></script> pour intégrer jQuery et le script de gestion du
background

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Fond extensible - version JQUERY</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>

<body>
<img src="image/bg.jpg" class="superbg" />
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
</body>
</html>

Le code CSS

Nous "fixons" et plaçons l'image pour qu'elle ne soit pas perturbée par le scroll
(défilement).
img.superbg {
position:fixed;
top:0;
left:0;
z-index:-1;
}

Le code jQuery

Tout est en place pour que jQuery puisse s'amuser avec cette image. Dans le principe,
nous allons créer une fonction qui va calculer le ratio de la fenêtre du navigateur pour
redimensionner l'image. Cette fonction sera appelée dès le chargement de la page et
à chaque redimensionnement de la fenêtre.

function redimensionnement(){

var $image = $('img.superbg');

var image_width = $image.width();
var image_height = $image.height();

var over = image_width / image_height;

var under = image_height / image_width;

var body_width = $(window).width();

var body_height = $(window).height();

if (body_width / body_height >= over) {

$image.css({
'width': body_width + 'px',
'height': Math.ceil(under * body_width) + 'px',
'left': '0px',
'top': Math.abs((under * body_width) - body_height) / -2 + 'px'
});
}

else {
$image.css({
'width': Math.ceil(over * body_height) + 'px',
'height': body_height + 'px',
'top': '0px',
'left': Math.abs((over * body_height) - body_width) / -2 + 'px'
 });
}
}

$(document).ready(function(){

// Au chargement initial
redimensionnement();

// En cas de redimensionnement de la fenêtre

$(window).resize(function(){
redimensionnement();
});

});

Voir le résultat

Avantage

 Fonctionne partout, pour peu que JavaScript soit activé.

Inconvénients

 Alourdit encore plus le poids de la page (chargement de la librairie jQuery)

Conclusion

Cette méthode peut apporter une touche plutôt sympa dans votre design. N'hésitez
pas à faire un tour sur cet article qui propose des méthodes supplémentaires.

Commentaires
Barbarossa

30 Juin 2011 à 17h53

Merci pour le tuto. Très clair, comme d'habitude.

Un petit complément d'information : en javascript, on peut aussi faire sans jQuery,

avec ce script plus léger :
http://webbricks.org/bricks/bgMax/

nxcom

30 Juin 2011 à 18h01

Petite question au passage...
quelle astuce pour différencier ceux qui connaissent background-size et les autres
pour proposer le JS uniquement à IE<9 et FF3/Safari3 etc...
;-) --> http://ie7nomore.com/fun/background/

MatTheCat

30 Juin 2011 à 18h06

Une solution full-css n'est pas possible en utilisant les pourcentages ??

À noter qu'une image placée directement dans body est invalide en XHTML 1.0 Strict.

doc mcfly

30 Juin 2011 à 19h33

Merci pour ce tuto remarquable ! Je cherchais justement comment faire !

lemotjuste

01 Juillet 2011 à 01h45

Justement je farfouillais le web j'ai trouvé récemment cette solution

jquery : http://buildinternet.com/project/supersized/

avec des effets possibles.

yagraph

01 Juillet 2011 à 09h33

Sinon, en CSS 2 avec une simple balise image :

#image-de-fond {
left: 0;
min-height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: -999;
}

devzonefr

01 Juillet 2011 à 11h05

Merci du tuto !
Je rajouterai qu'avec la librairie Modernizr, il doit être possible d'appliquer ce code
javascript en cas de non support de background-size.

J'ai pas tester mais avec un truc du style :

if(!Modernizr.backgroundsize){
// ...
}

jonnefoy

01 Juillet 2011 à 14h32

Bravo pour ce petit trick, par contre sur Chrome 12 Windows, quand on actualise la
page l'effet n'est plus présent tant que l'on a pas redimensionné la fenêtre... =/

Voici un autre petit plugin jQuery dans le même style : http://vegas.jaysalvat.com/

rigamarole

02 Juillet 2011 à 11h10

Merci pour l'article !

Je glisse juste un lien vers un article du blog d'Ethan Marcotte (auteur d'articles de
références sur le «Responsive Web Design»), qui échange des solutions techniques à
propos des images de fonds.
http://unstoppablerobotninja.com/entry/fluid-...
C'est en anglais, mais je pense que ça en vaut le coup.

Mafrayss

02 Juillet 2011 à 14h19

Je souhaiterai améliorer ce code pour faire en sorte que si l'utilisateur visite mon site
sur iphone, le fond d'écran ne soit pas chargé (cela risquerait de consommer le forfait
de l'utilisateur en 3g...) Voici mon code css, qui lui utilise body (je ne sais pas
pourquoi celui-ci utilise html...

body {
margin:0;
padding:0;
background: url(fond.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}

@media screen and (max-device-width: 480px) {

body {
background: none;
}
}

La vraie question est de savoir si le fond d'écran est chargé ou juste non affiché sur
l'iphone...
Help !
Merci

misskitty

02 Juillet 2011 à 14h27

Mon préféré en jqurey:

http://www.buildinternet.com/project/supersiz...
Avec même la possibilité d'un slideshow...

Raphael

02 Juillet 2011 à 21h43

@Mafrayss : l'image est forcément chargée d'abord puisque tu ne lui dis pas le
contraire.
Pour éviter de charge l'image, il faudrait indiquer une requête de type @media screen
and (min-device-width: 480px)...

Skoua

04 Juillet 2011 à 04h56

Rien à voir, mais sympa le site de Pizza. :p

rigamarole

04 Juillet 2011 à 09h55

Oups, désolé, je me suis planté dans mon lien.

Ethan Marcotte aborde le sujet du background image ici :
http://www.alistapart.com/articles/fluid-imag...
En faisant référence au plugin jQuery Backstretch de Scott Robbin.
http://srobbin.com/blog/jquery-plugins/jquery...
Le lien dans mon précédent commentaire concernait plutôt les images fluides dans le
contenu.

bleuindigo

04 Juillet 2011 à 17h28

apparement, après test sur chrome 9 sur mac, ca ne fonctionne pas...

Patidou

04 Juillet 2011 à 23h12

@bleuindigo : On est déjà à la version 12 ;-)

bleuindigo

05 Juillet 2011 à 11h38

oups.. désolé pour un commentaire sans fondement... ca marche sur chrome..

pixel-carre

06 Juillet 2011 à 15h14

Super petit tuto très efficace. Par contre, petite question (très bête certainement) : j'ai
mis en place la version Jquery sur mon site, mais ça redimensionne toutes les
images... mêmes des petites vignettes.
Comment faire pour éviter cela svp ?

pixel-carre

06 Juillet 2011 à 16h18

Je retire la question, en cherchant un peu, j'ai trouvé ;o)

karlwax

13 Juillet 2011 à 15h52

Désolé mais cela ne fonctionne pas sur opéra mobile

Dayom

28 Juillet 2011 à 10h04

Même sur Opera Desktop on voit apparaître des bandes blanches légères sur les
bords non ?

En revanche sur FF c'est parfait.

 Iron

01 Août 2011 à 18h27

Bonjour, j'ai essayé en local avec easyphp avec css3 ça ne fonctionne pas et ça
destructure ma présentation et la méthode Jquery laisse juste apparaître l'image mais
mon corps de site se trouve repousser par le bas comme si le script js n'avait pas
prise sur l'image. Si quelqu'un à une idée pour le Jquery en ce qui me concerne je
serai prenant. Merci pour votre aide.

gaelle65

03 Août 2011 à 18h37

Bonjour,
ma question est sûrement stupide mais je suis débutante dans la programmation de
site web. J'aimerais beaucoup utiliser votre script mais malheureusement je ne sais
pas où insérer le Jquery.

Entre les premières balises <script></script> ou sur une autre page?

Merci pour votre aide.

jmlapam

06 Août 2011 à 23h37

EXCELLENT. Merci, longtemps cherché sur le net sans trouver.

Alkekange

13 Novembre 2018 à 03h50

Merci pour ce tutoriel. Je n'arrivais qu'à placer une image de fond qui se répétait
jusqu'à présent alors qu'il suffit de donner l'ordre "no-repeat center fixed; " !

Fraja

17 Juin 2019 à 09h27

Pour une complète compatibilité avec navigateur android, ajoutez height:100vh; au

modèle css. vh étant la hauteur visible de l'affichage.

Nono94

28 Novembre 2019 à 01h28

Bonjour , merci pour tout tes tuto tous les plus fou les uns que les autre . Cependant
j'ai un petit souci je voudrais adapter un gif integrer à mon site (pas en arrière plan
mais juste après le header ) pour qu'il soit bien dimensionné aussi bien en version
mobile qu'en version bureau actuellement en version mobile il est parfait mais en
version bureau il n'est pas du tout adapter en faite il ne prend pas la largeur . Ou
même au pire si je peut le rendre visible uniquement sur mobile.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Identifiant (pseudo) ou e-mail :

Mot de passe :

Oubli de mot de passe ? Pas de panique, on va le retrouver

Valide r

Pas encore inscrit ? C'est très simple et gratuit.

 L'amour est dans le <pre> !  (Chuck Bartowski)



 plan du site

 contact

 
  boutique

 formations

 agence web
 Retourner en haut de page

Alsacréations est une communauté dédiée à la conception de sites et applications

web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages
HTML et JavaScript, et à l'accessibilité. Réalisé par l'agence web Alsacreations.fr ·
Hébergement Syazen · À propos et mentions légales · Données personnelles