5568 sujets

Sémantique web et HTML

Bonjour à tout le monde,
J'aimerais de l'aide sur un problème que je rencontre. Je maîtrise mal HTML/CSS. Aussi pour les besoins d'un site statique, j'ai utilisé le template Hyperspace (https://html5up.net/hyperspace) que je trouve très joli.
Ma question : j'aimerais insérer un logo dans la sidebar, en haut à gauche, qui soit donc fixe et dont la taille s'adapte en fonction de l'écran.

J'ai évidemment essayé par moi-même mais je n'y arrive pas. Je vous remercie d'avance pour votre aide.

PS : il est plus simple de télécharger directement le template sur html5up.net pour regarder le code.
Modérateur
Bonsoir,

as tu tenter quelque chose ?

Est ce un logo cliquable ou eventuellement un élement de design ?

Pour un element de design, il peut-être intégré en fond :

exemple basique :
#sidebar .inner {
  background: url(https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/150px-Circle_Logo.svg.png)
    50% 0 no-repeat;
  background-size: 80% auto;
}
@media screen and (max-width: 1280px) {
  #sidebar .inner {
    background: url(https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/150px-Circle_Logo.svg.png)
      0 50% no-repeat;
    background-size: auto 80%;
  }
}
@media screen and (max-width: 736px) {
  #intro .inner {
    background: url(https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/150px-Circle_Logo.svg.png)
      90% 0 no-repeat;
    background-size: auto 30%;
  }
}


attention aux droits sur l'image avant de penser à l'utiliser , c'est un vrai logo d'entreprise Smiley cligne
Modifié par gcyrillus (23 Nov 2020 - 17:51)
Meilleure solution
Salut ! Le logo est uniquement un élément de design, non cliquable.

Du coup merci beaucoup pour ta réponse et ton temps. En revanche, je ne sais pas du tout où insérer ce que tu m'as transmis. Le CSS fait quasi 4000 lignes comme tu l'as vu et honnêtement je suis complétement perdu !! Encore un tout petit peu d'aide stp ?

Merci d'avance Smiley smile

gcyrillus a écrit :
Bonsoir,

as tu tenter quelque chose ?

Est ce un logo cliquable ou eventuellement un élement de design ?

Pour un element de design, il peut-être intégré en fond :

exemple basique :
#sidebar .inner {
  background: url(https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/150px-Circle_Logo.svg.png)
    50% 0 no-repeat;
  background-size: 80% auto;
}
@media screen and (max-width: 1280px) {
  #sidebar .inner {
    background: url(https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/150px-Circle_Logo.svg.png)
      0 50% no-repeat;
    background-size: auto 80%;
  }
}
@media screen and (max-width: 736px) {
  #intro .inner {
    background: url(https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/150px-Circle_Logo.svg.png)
      90% 0 no-repeat;
    background-size: auto 30%;
  }
}


attention aux droits sur l'image avant de penser à l'utiliser , c'est un vrai logo d'entreprise Smiley cligne