Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

sidebar collée au reste du forum

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 le 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 : 113
Inscrit(e) le : 06/10/2012

http://zootopia.forumactif.org/
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 le 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 : 4391
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 le 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:
sidebar collée au reste du forum 208701forumm

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

Dellou
***

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

http://zootopia.forumactif.org/
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 le 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 : 4391
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 le 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 : 113
Inscrit(e) le : 06/10/2012

http://zootopia.forumactif.org/
Dellou a été remercié(e) par l'auteur de ce sujet.

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


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