sidebar collée au reste du forum

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu sidebar collée au reste du forum

Message par Dellou Dim 26 Nov 2017 - 14:47

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://alarecherchedunnom.forumactif.com/

Description du problème

Bonjour, bonsoir Smile
Je viens faire appel à vous pour un problème qui me prend de plus en plus la tête ; actuellement sur mon forum, j'ai installé un sidebar à gauche de mon forum. Mon soucis, c'est que j'aimerais que celui soit collé au forum, pour, éviter que la sidebar passe en dessous ou au dessus du forum mais aussi pour que, sur mobile, cela ne gêne pas les utilisateur.

Pour illustrer mon idée, je prends l'exemple de Never Utopia, qui, quand on réduit la largeur de la page, prend en compte le forum et la sidebar qui reste bien fixé au forum.

J'aimerais savoir si quelqu'un sait comment s'y prendre pour me venir en aide Smile Merci beaucoup d'avance <3
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: sidebar collée au reste du forum

Message par Adam_sfp Dim 26 Nov 2017 - 22:45

Bonsoir

Il faut un peu raisonner à l'inverse et commencer votre code en imaginant le design sur mobile puis tablette et web pc pour finir.
Vous pouvez passer par un script pour définir ce qui sera visible en dessous d'une certaine taille d'écran
Code:
$(document).ready(function() {
  if ($(window).width() < 450)
 {
    ICI LE CODE A EXÉCUTER SI LA TAILLE EST INFÉRIEURE A 450
  }
});

Egalement via le css et les tailles en % dans certains cas .. également les Media Queries avec par exemple
Code:
@media (max-width: 700px)
C'est avec cette manière que l'on procède dans ce menu
DEMO

Vous pouvez redimensionner votre fenêtre pour voir le résultat.
Ça peut toujours vous faire une base pour votre side bar au cas ou..
HTML
Code:
<aside>
  <a>
  <div id="nav-btn" ><img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg" alt="burger"></div>
 </a>
  <h1> Nav Bar</h1>
    <nav>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
    </ul>
  </nav>
</aside>

CSS
Code:
*{
   margin:0;
   padding:0;
   text-decoration:none;
   list-style:none;
}
#nav-btn{
  height:40px;
  width:40px;
  position:absolute;
  right:20px;
  top:10px;
  display:none;
}

aside{
   position:fixed;
   float:left;
   width:250px;
   padding-top:40px;
   padding-left:15px;
   top:0;
   bottom:0;
   background-color:#474958;
   z-index:400;
}

nav{
  display:block;
}

nav ul{
}

nav ul li{
   line-height:30px;
}

nav ul li a{
   color:black;
}

nav ul li a:hover{
   color:#99dbfc;
}


h1{
   font-family:Arial, sans-serif;
   color:white;
   margin-bottom:50px;
   font-size:2.1em;
}

@media (max-width: 700px) {
   h2{
     font-size:2em;
  }
  aside{
      float:left;
      width:95%;
      padding-left: 5%;
      position:relative;
      float:left;
      padding-top: 10px;
      padding-bottom:10px;
   }
   
   nav{
     display:none;
  }
  #nav-btn{

    height:40px;
    width:40px;
    position:absolute;
    right:7px;
    top:7px;
    display:block;
    cursor: pointer;
  }
   h1{
      margin-bottom: 0px;
   }
   }
   

Javascript
Code:
$( "#nav-btn" ).click(function() {
  $( "nav" ).toggle( "slow" );
});


*Peut être pas tout compris le "fixé au forum" Wink

Cdt.


Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: sidebar collée au reste du forum

Message par Dellou Dim 26 Nov 2017 - 23:52

Bonjour Adam ! Merci de ta réponse et de tes explications ! Smile
Mais en fait, mon véritable soucis c'est le fait que la sidebar soit collé au forum, genre, j'ai du mal à expliquer par les mots donc je vous fait un schema :

Spoiler:

Je ne sais pas si je suis bien claire ;;
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: sidebar collée au reste du forum

Message par Adam_sfp Lun 27 Nov 2017 - 11:09

Bonjour @Dellou

On ne peut plus claire ! superbe schéma Very Happy

Peut être en ajoutant ceci dans votre CSS
Code:
.bodyline {
   
    position: absolute;
    left: X px;
    top: X px;
   
}
En mettant vos valeurs à la place de X pour régler par rapport à la largeur de la navbar
Ajouter peut être également une largeur si besoin
Code:
width:X px;

Et pensez aussi à la propriété z-index qui peut vous permettre des superpositions esthétiques.

Cdt.




Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: sidebar collée au reste du forum

Message par Dellou Lun 27 Nov 2017 - 16:37

Après avoir bidouillé avec vos conseils, j'ai enfin réussit ! Merci pour tout ! Vraiment ! Very Happy

Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum