Rendre mon menu fixe (donc pas flottant !)

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/09/2013, 21h46
jytest

Puis-je vous demander de suivre de la même manière mon post qui arrive...
concerne maintenant le footer...
Mêmes soucis...

Les pictos Facebook et Twitter passent totalement inaperçus !
Autant les supprimer ! (ou les placer ailleurs)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<ul id="footer" class="footer_fullwidth" style="z-index:8000;">
    <li id="social">
        <ul>
            <li><a href="https://twitter.com/MaisonCelinni" class="tooltip" target="_blank">
            <img src='diamants/js/sf/images/icons/twitter.png' alt="twitter_celinni" class="footer_icon" /><span>Twitter</span></a></li>
            <li><a href="https://www.facebook.com/celinni.diamant" class="tooltip" target="_blank">
            <img src='diamants/js/sf/images/icons/facebook.png' alt="facebook_celinni" class="footer_icon" /><span>Facebook</span></a></li>
        </ul>
    </li>
    <div style="float:right;">
        <li><a href="#" class="col_1 picto1">Recevez votre bijou.<br>Payez-le plus tard !</a></li>
        <li><a href="recherche-diamant.htm" class="col_1 picto2">Recherchez<br>votre diamant</a></li>
        <li><a href="#" class="col_1 picto3">Composez<br>votre bijou</a>
            <div class="footer_dropup drop1column">
                <ul style="padding:0px 10px 0px 10px;">
                    <li style="padding-bottom:7px;"><a href="choisir-solitaire-diamant.htm">Composez votre bague</a></li>
                    <li style="padding-bottom:7px;"><a href="#">Composez votre pendentif</a></li>
                    <li style="padding-bottom:7px;"><a href="#">Composez votre bracelet</a></li>
                    <li style="padding-bottom:7px;"><a href="#">Composez vos boucles d'oreilles</a></li>
				</ul>
            </div>
        </li>
        <li><a href="diamant-investissement.htm" class="col_1 picto4">Investisseurs</a></li>
        <li><a href="#" class="col_1 picto5">Prendre<br>un rendez-vous</a></li>
        <li><a href="#" class="col_1 picto6">Pourquoi choisir<br>CELINNI Diamant</a></li>
        <li><a href="maison-celinni.htm" class="col_1 picto7">La Maison<br>CELINNI Diamant</a></li>
    </div>
 
</ul>

Nettoie aussi ton code : tu mets un <div> dans un <ul>.
Ce n'est pas cohérent.

23/09/2013, 22h05
jytest

Idéalement les laisser... quitter à les colorer comme à l'origine !
Effectivement, ils peuvent être déplacés... Mais où les mettre ???
23/09/2013, 22h12
Invité
Change aussi ça (guidediamant00.css, ligne 14) :
Code:

1 2 3 4 5 6 #ombre { box-shadow: 6px 6px 12px #202020; margin: 10px auto; width: 1054px; z-index: 2; }
N.B. Je pense sincèrement que tu manques sérieusement de bases en CSS.
23/09/2013, 22h16
Invité

Pour revenir au footer :
- centrer le bloc (au lieu de le caler à droite). Ce sera plus logique et harmonieux.
- de préférence de la même largeur que le reste du site (1024px ?)
- au lieu d'avoir les pictos "collés" au fond (une image picto-fond) -> faire des pictos .gif ou .png, et le fond en CSS. En plus tes fonds sont "has been" et choquent par rapport au reste.
- mettre les li en %. (100% / 7li) = 14.28%
23/09/2013, 22h45
jytest

@jreaux62
... merci pour la correction css !

Le placer à droite est un souhait du client !
Les boutons sont un souhait du client !
idem facebook, twitter...
Tout est de lui...

Il souhaite facebook et twitter à gauche...
et les boutons menus sur la droite...

Que dire de plus ?
Rien... C'est la galère !

@jreaux62
Dans ta première réponse,
tu me conseilles de faire quoi ?
25/09/2013, 10h21
Invité

1 pièce(s) jointe(s)
Fais en sorte que le footer (barre de boutons) fasse la MEME LARGEUR (ou moins) que le site : 1054px

Car si on réduit la largeur de la fenêtre à 1054px, et le dernier bouton du footer passe en dessous des autres.
Et c'est over-moche.
Idem sur smartphone (la largeur d'affichage se règle automatiquement sur celle du site).

footer.css, ligne 150 :
Code:

1 2 3 #footer .col_1 { width: 98px; /* avant : 104px */ }
Il faut modifier les images de fond (onglets) en conséquence.

OU :

Ce que je ferais, PERSO :
1/ Je supprime les images de fond (onglets), et ne garde QUE les pictos.
2/ Je mets un fond gris foncé à TOUT le footer, sur toute la longueur.
3/ les <li> (picto + texte) en % ou display:table-cell; pour qu'ils s'adaptent en largueur (si on réduit la largeur du navigateur, ou sur smartphone)
4/ à droite du footer : un bouton (X) qui permet de masquer/montrer le footer, afin de donner la possibilité au visiteur de lire le contenu confortablement !
5/ Enfin, les pictos sociaux plus grands (assez pour qu'on puisse les voir !)

Ce serait plus élégant, et en accord avec l'aspect sobre du site.
25/09/2013, 21h15
jytest

Ta proposition est alléchante...
Mais je galère à la mettre en oeuvre...
Tu peux m'avancer un peu dans ce sens, stp.
Au moins une ébauche du truc ?
D'avance, je t'en remercie.

Voir 40 message(s) de cette discussion en une page