En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Politique de confidentialité.
Forum - GuppY 4.6 - vos questions - Mai46: header fixe

 

clos par Katryne le 09/09/2014 @ 05:06  Sujet n° 131

le 30/01/2014 @ 07:54
par Katryne

Katryne



Bonjour Sabine :
Sur StockAstuces, je n'arrive pas à me passer de ta belle skin Mai46.
J'essaye, sans vraiment aboutir, de rendre le header fixe, et de faire passer au scrolling main-content dessous.

J'ai réussi à fixer l'image cadre (ciel.jpg), celle qui fait les nuages en haut et sur les côtés, comme ça :
 
Code : css
body { /*  corps du document */
margin: 0;
font: 12px Arial, Helvetica, sans-serif;
color: #284664;
background: url(ciel.jpg) 50% 0% no-repeat #fff;
background-attachment:fixed;
z-index:300;
}
Mais, au scrolling, main-content passe par-dessus (malgré une hiérarchie de z-index) et je n'arrive pas à fixer correctement la partie du logo (avec head-top)

Voilà où j'en suis : http://stockatest.stockastuces.org/index.php?lng=fr

Pourrais-tu m'aider ? Je suis dans le brouillard... Merci d'avance, au moins pour un début de piste. J'ai réussi à le faire avec une skin plus simple, sans image. Mais là, je butte.


Guppy ... What else ?

sujet clos Haut  

Réponse n° 1
--------
le 30/01/2014 @ 12:09
par Sabine

Sabine



Bonjour Katryne,
Je pense qu'en mettant un background blanc à #mainContent, ça devrait régler le problème.
Sabine 
Ecrire à Sabine Site web Sabine
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 2
--------
le 30/01/2014 @ 15:24
par Katryne

Katryne

visiteur

Merci Sabine, mais c'est pas ça encore : le main-content continue à passer par dessus en scrollant. Sauf pour le menu qui reste au-dessus.
J'ai réussi à fixer le header-top et le menu, mais pas le header-bottom (avec la barre de drapeaux du traducteur).
En plus du body, voilà ce que j'ai modifié, en l'état :
 
Code : css
#headTop { /* header top and middle (logo-banner + citation) */
color: inherit;
background: url(header.png) no-repeat center;
height: 264px;
width : 100%;
z-index:400;
background-attachment:fixed;
background-position: 50% 0% ;
}
#headBottom { /* header bottom (logo-menu) */
margin: 0;
padding: 0 4px;
color: inherit;
background-color: transparent;
background-attachment:fixed;
background-position: 0 -80px ;
width:999px;
z-index:300;
}
#mainContent { /* main page */
padding:1px;
background-color:#ffffff;
border: 0px solid #fff;
z-index:100;
}
div.menuIcons { /* block menu */
padding:0px 0px;
text-align: center;
width: 999px;
position: fixed;
padding-top:120px;
margin-bottom:20px;
margin-left:auto; margin-right:auto;
height: 40px;
}
Site web Katryne
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 3
--------
le 30/01/2014 @ 16:54
par Sabine

Sabine



À quel résultat veux-tu aboutir ? Veux-tu que les nuages soient toujours visibles ? Ou veux-tu que le header soit toujours visible ?

Sabine
Ecrire à Sabine Site web Sabine
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 4
--------
le 30/01/2014 @ 16:57
par Sabine

Sabine



Pour que ce soit uniquement le contenu principal qui bouge, il faut indiquer à MainContent : une hauteur maximum et l'ascenseur :

#mainContent { /* main page */
  margin-top: 10px;
  padding:1px;
  background: #fff;
  width: 995px;
  border: 0px solid #fff;
  max-height: 600px;
  overflow: scroll;

}

Il n'y a rien à changer d'autres dans le fichier.

Sabine e
Ecrire à Sabine Site web Sabine
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 5
--------
le 30/01/2014 @ 18:41
par Katryne

Katryne

visiteur

Merci MERCI  M E R C I
C'est tout bon !

Edit : non, pas encore.
Le main-content remonte quand même par-dessus le header et maintenant, j'ai 2 barres de défilement au lieu d'une.

Je vais chercher encore.

Je n'avais pas vu ta demande de précision, juste avant. Voilà : je cherche à bloquer le header complet, du haut jusqu'au header-bottom inclus, y compris donc le menu. Et que tout cela reste visible, quelque soit le scroll de la page. Et j'essaye de faire qu'en déroulant la page, celle-ci remonte sous le header bloqué. Si on limite sa hauteur, comme avec ton code ci-dessus, le contenu principal ne remonte pas et se voit attribuer une barre de défilement perso, qui s'ajoute à celle du navigateur.

Je l'ai fait sur le site cité avec la skin maudkatv3 (visible avec Ghost). Mais avec Mai46, les images de fond et de header sont en partie transparentes, ce qui rend l'exercice difficile.
Rectifié par Katryne le 30/01/2014 @ 18:55
Site web Katryne
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 6
--------
le 30/01/2014 @ 19:47
par Sabine

Sabine



J'ai fait plusieurs essais sans succès. Ce serait possible s'il n'y avait pas de headBottom.

Si tu peux mettre les drapeaux ailleurs, il faut :

1. copier l'image des nuages sous l'image transparente du header (pour que l'image ne soit plus transparente).

2. faire les modifications suivantes dans style.css :

#headTop { /* header top and middle (logo-banner + citation) */
  color: inherit;
  background: url(header.png) repeat-x top;
  height: 264px;
  width : 999px;
  z-index:400;
  position: fixed;
  margin: 0px;
  margin-top: -264px;

}


#mainContent { /* main page */
  padding:1px;
  margin-top: 264px;
  background: #fff;
  width: 995px;
  border: 0px solid #fff;
}

Désolée !

Sabine
Ecrire à Sabine Site web Sabine
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 7
--------
le 31/01/2014 @ 02:57
par Katryne

Katryne

visiteur

Je te remercie de tous tes efforts. Il est vrai que mai46 est une skin déjà très particulière avec ses transparences. Je vais tester tes nouvelles suggestions. Plus généralement, pourrais-tu envisager que parmi ta jolie collection on puisse trouver un ou deux modèles avec cette spécificité de header bloqué ?
Site web Katryne
clos par Katryne le 09/09/2014 @ 05:06 Haut  
Réponse n° 8
--------
le 31/01/2014 @ 06:35
par Sabine

Sabine



Bonjour,

Actuellement, je suis en pleine adaptation des skins 4.6 vers la version 5.0... et j'en ai encore pas mal à faire. Il n'y aura pas de nouvelles créations pour l'instant... mais je prends note de ta suggestion.

Sabine e
Ecrire à Sabine Site web Sabine
clos par Katryne le 09/09/2014 @ 05:06 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum  



Vous êtes ici :   Accueil » Forum » GuppY 4.6 » vos questions » Mai46: header fixe