sidebar collée au reste du forum
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
sidebar collée au reste du forum
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, bonsoirJe 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 Merci beaucoup d'avance <3
Re: sidebar collée au reste du forum
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
Egalement via le css et les tailles en % dans certains cas .. également les Media Queries avec par exemple
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
CSS
Javascript
*Peut être pas tout compris le "fixé au forum"
Cdt.
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)
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"
Cdt.
Re: sidebar collée au reste du forum
Bonjour Adam ! Merci de ta réponse et de tes explications !
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 :
Je ne sais pas si je suis bien claire ;;
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 ;;
Re: sidebar collée au reste du forum
Bonjour @Dellou
On ne peut plus claire ! superbe schéma
Peut être en ajoutant ceci dans votre CSS
Ajouter peut être également une largeur si besoin
Et pensez aussi à la propriété z-index qui peut vous permettre des superpositions esthétiques.
Cdt.
On ne peut plus claire ! superbe schéma
Peut être en ajoutant ceci dans votre CSS
- Code:
.bodyline {
position: absolute;
left: X px;
top: X px;
}
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.
Re: sidebar collée au reste du forum
Après avoir bidouillé avec vos conseils, j'ai enfin réussit ! Merci pour tout ! Vraiment !
Sujets similaires
» Barre de navigation non collée au top du forum
» Image genre bordure verticale collée au cadre extérieur du forum
» Différence largeur forum entre page d'accueil et reste du forum
» catégories plus large que le reste du forum
» Le fond du forum qui reste blanc
» Image genre bordure verticale collée au cadre extérieur du forum
» Différence largeur forum entre page d'accueil et reste du forum
» catégories plus large que le reste du forum
» Le fond du forum qui reste blanc
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum