Disposition fixe à deux colonnes. Menu supérieur fixe et barre latérale flottante dans WordPress
Quelles sont les exigences de mise en page ?
- Disposition en caoutchouc à deux colonnes
- largeur fixe de la barre latérale 300px
- le contenu est étiré sur le reste de la largeur.
- pied de page appuyé vers le bas (dans ce tutoriel, je ne montrerai pas comment cela se fait).
Quels problèmes CSS surviennent lors de la mise en page d'une telle mise en page :
1 voie.
Si vous faites flotter des blocs, vous doit leur donner une largeur fixe(vous ne pouvez pas définir 1 barre latérale sur 300 pixels et le contenu sur 100 %). Dans ce cas, soit le contenu glisse vers le bas, soit un défilement horizontal de 300 pixels vers la gauche apparaît. Eh bien, la principale chose à comprendre est que cette méthode ne nous convient pas.
2 voies.
De nombreux typographes proposent cette méthode, à quoi pensent-ils ?! L'essence de la méthode est que vous pouvez définir la barre latérale pour flotter avec une largeur de 300, et ne pas faire flotter le contenu et définir margin-left : 300px dessus. Un bon moyen et tout semble fonctionner si bien. Pour être honnête, je pensais que c'était la meilleure façon, mais cette méthode a ses propres pièges. Les raisons de l'abandon de cette méthode sont que si nous créons soudainement dans le contenu, par exemple, un menu avec li flottant ou tout autre bloc flottant et que nous voulons ensuite les effacer avec clear:both, alors la bordure inférieure de ce bloc glisse jusqu'au niveau de la bordure inférieure de la barre latérale (Quoi et ce n'est pas étrange puisque foat est effacé, vous pouvez éviter cela si définir un bloc flottant à une hauteur fixe, mais ce n'est pas du tout le cas de fixer une hauteur fixe).
3 voies.
Peut être utilisé pour position absolue de la barre latérale mais seulement si vous nous sommes sûrs que le contenu sera plus grand que la barre latérale en hauteur sinon, tout le contenu de la barre latérale tiendra dans le pied de page (après tout, le positionnement absolu sort du flux général).
Mais pour moi, ce n'est pas non plus un très bon moyen !
4 voies.
"Excellent moyen, s'il a des défauts, veuillez commenter. Mais je pense que c'est le meilleur moyen."
- Avantages de cette méthode : premièrement, le contenu DOM ira avant la barre latérale, ce qui est bon pour les moteurs de recherche.
- rien ne tient sur le pied de page
- tous les blocs peuvent être effacés et rien ne glissera vers la bordure inférieure (nous avons donc surmonté les problèmes de la deuxième méthode).
En général, comment ça marche : regardez le code vient d'abord le contenu suivi de la barre latérale. nous définissons float sur ces deux blocs (bien sûr, la barre latérale glisse vers le bas). après cela, nous définissons la propriété de la barre latérale margin-left:-100%. super, c'est remis en place, et indentez le contenu avec margin-lerft:300px.
html
CSS
.sidebar(largeur : 300 px ;
bloc de visualisation;
flotteur : gauche ;
marge : 0 0 0 -100 % ;
}
.teneur(
min-largeur : 723 px ;
bloc de visualisation;
flotteur : gauche ;
marge : 0 0 0 220px ;
}
Un bloc flottant (ou comme on l'appelle aussi mobile, fixe, bloqué) est nécessaire sur le site pour que l'utilisateur voie un élément fixe lors du défilement de la page, dans lequel la publicité est le plus souvent placée (teasers, bannières ou contexte).
Hélas, les règles d'adsense nous l'interdisent. Cependant, de nombreux propriétaires de sites ignorent les règles à leurs risques et périls. Peut-être qu'ils ne sont même pas punis pour cela, mais je ne conseillerais pas de prendre des risques.
Je place YAN, mes teasers/bannières dans de tels blocs, et parfois, au lieu de faire de la publicité, j'affiche des messages similaires ou des informations utiles pour le visiteur.
Voyons comment créer un bloc flottant sur votre site.
Tâche: faire flotter le dernier bloc de la barre latérale (barre latérale). De plus, pour qu'il ne colle qu'au moment où l'utilisateur y accède en scrollant, et pas immédiatement à l'ouverture de la page. De plus, le bloc doit "coller", atteindre le pied de page (c'est-à-dire ne pas le chevaucher).
La manière la plus efficace
Il existe de nombreuses implémentations du bloc collant, mais toutes ne fonctionnent pas correctement. Je vais vous dire par expérience personnelle: la même méthode d'installation de blocs peut fonctionner sur un site et des jambages apparaîtront sur un autre.
Vous trouverez ci-dessous un exemple de bloc flottant qui a fonctionné sur presque tous les sites sur lesquels je l'ai installé. Il n'y avait pas de chèvres. Le moteur n'est pas non plus important (DLE, WordPress, LiveStreet, etc.).
Collez le code HTML suivant à l'emplacement souhaité de la barre latérale :
$(fenêtre).scroll(fonction() (
var sb_m = 20 ; /* rembourrage haut et bas */
var mo = 300 ; /* hauteur sous-sol avec marge */
varst = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top ;
var sbi_ot = sbi.offset() .top ;
var sb_h = sb.hauteur () ;
Si(sb_h + $(document).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
si(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m ;
sb.css(("paddingTop" : h) ) ;
}
autre(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
}
)
;
Dans ce code, vous pouvez définir le haut, le bas et la hauteur de votre pied de page, c'est-à-dire la hauteur à laquelle le bloc doit s'arrêter.
Maintenant, nous incluons JS. Pour ce faire, écrivez dans la section HEAD :