28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous, je me retrouve confronter à un petit soucis en construisant mon site web...
Je le construit via un software qui se nomme Blocs sur Mac...
Arrive l'étape de la fixation du menu en haut de la page que je n'arrive pas à faire via ce soft...
J'essaie donc de me pencher sur le problème avec Dreamweaver mais je ne comprend pas comment solutionner ce problème...
Voici le site : http://e.digital.free.fr

Si vous aviez une petite de la manipulation à effectuer je suis preneur ! Smiley smile
Bonjour. Sans plus de commentaires :
#menu-sticky-wrapper {
    position: fixed;
    z-index: 200 // ça c'est pour que le menu reste au dessus des autres éléments quoi qu'il arrive.
    width: 100%; // l'élément prend toute la largeur
    height: 78px; // du coup vous pourrez supprimer cette même règle qui se trouve ailleurs apposée directement sur l'élément
}

Modifié par Olivier C (01 Dec 2015 - 07:29)
Merci pour votre réponse ! Hier soir j'ai eu l'aide d'un ami, nous avons donc entré ce code

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$("#menu").sticky({topSpacing:0});
});

</script>

Et nous avons ajouter le plugin sticky dans le dossier JS.
Pour le moment cela semble fonctionner à l'exception d'un petit détail...
Je souhaiterai avoir une marge (ou espace) avec mon menu et le reste de la page lorsqu'il se retrouve bloqué en haut.
Je m'explique : quand je clique sur un des liens situé dans la bar de menu, ça remonte jusqu'à celui ci mais l'espace entre le bloc concerné et le menu est insuffisant, le bloc est un peu mangé.
Je pense que ça doit être une histoire de botSpacing?
Très bien, j'ai ouvert mon fichier CSS mais c'est un peu du chinois pour moi...
Sauriez vous m'aiguillez?
Savez vous à quoi je dois me référer?

Merci !
Salut Kinetos,

Olivier C ma donné un coup de main ce WK.
En fait à chaque id de mes articles je m'en suis fait une ancre et dans ma feuille CSS j'ai rajouté ceci

#id-de-article {
margin-top: -92px; /* environ la hauteur du menu en fixed */
padding-top: 92px; /* pour compenser visuellement la règle précédente */
}

remplace #id-de-article par le nom de ton id si du n'en pas mis fait le.
Dans votre cas vous pouvez simplement augmenter la hauteur des blocs ciblés :
.block {
margin-top: 80px; /* environ la hauteur du menu en fixed */
}

Attention : sur mobile la page devient inconsultable à cause du menu positionné en position fixed. C'est le problème principal des sticky menus...
Modifié par Olivier C (02 Dec 2015 - 07:10)