Intégration Menu Personnalisé ! [Réglé]
TheCarlus77 Membre non connecté
Booster Fronde
- Booster Fronde
- Voir le profil du membre TheCarlus77
- Inscrit le : 11/10/2014
- Site internet
Alors voila j’essaie d’intégrer un menu personnalisé dans le Header de mon forum sous PHPBoost !
C'est un menu du site http://www.wifeo.com/ pour information...
Alors voila tout marche nickel mais j'ai un soucis sinon c'est pas drôle
Mon soucis est le suivant : Ma div prend donc de la place dans le head et "pousse" les autres éléments du head comme le logo, slogan, titre...
Un screen de l'avancement :
Voila ce doit être un problème de position mais étant que "Débutant" je ne sais gérer cette situation...
En espérant que vous m'aillez compris !
Merci par avance
Carl
Cordialement
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
TheCarlus77 Membre non connecté
Booster Fronde
- Booster Fronde
- Voir le profil du membre TheCarlus77
- Inscrit le : 11/10/2014
- Site internet
Voila Merci
Édité par TheCarlus77 Le 19/10/2014 à 10h01
Cordialement
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
TheCarlus77 Membre non connecté
Booster Fronde
- Booster Fronde
- Voir le profil du membre TheCarlus77
- Inscrit le : 11/10/2014
- Site internet
Merci pour vos réponses rapides et efficace !
Je teste sa !
Merci
Cordialement
TheCarlus77 Membre non connecté
Booster Fronde
- Booster Fronde
- Voir le profil du membre TheCarlus77
- Inscrit le : 11/10/2014
- Site internet
Citation :
Il te suffit alors d'utiliser l'attribut position:absolute; pour qu'il passe au dessus sans masquer tes élements.
Je vous donne mes codes puisque je n'arrive pas à trouver ou inclure la position:absolute;
Voici mon code CSS
Code CSS :
<style type="text/css">.wifeo_1413795950pagemenu > a{color:#FFFFFF;text-decoration:none} .wifeo_1413795950pagemenu:hover > a{color:#FFFFFF;text-decoration:none;font-weight:bold} .wifeo_1413795950rubrique > a{color:#FFFFFF;text-decoration:none} .wifeo_1413795950rubrique:hover > a{color:#FFFFFF;font-weight:bold;text-decoration:none} .wifeo_1413795950pagesousmenu > a{color:#FFFFFF;text-decoration:none} .wifeo_1413795950conteneur_menu{border-spacing:0px} .wifeo_1413795950conteneur_menu{width:100%;display:table;background-color:#2E6FD1;height:50px} .wifeo_1413795950conteneur_menu a{text-decoration:none;display:table-cell;vertical-align:middle;height:50px;padding:0 5px;text-align:center;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease} .wifeo_1413795950pagemenu, .wifeo_1413795950rubrique{float:left;position:relative;width:25%;text-align:center;display:table;border-top:1px dashed #5697F9;border-bottom:1px dashed #0647A9;background-image:url();background-position:center} .wifeo_1413795950sousmenu{width:100%;left:0;opacity:0;position:absolute;top:0;visibility:hidden;z-index:1} @media screen and (min-device-width:1024px){.wifeo_1413795950sousmenu{-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}} .wifeo_1413795950pagemenu:hover, .wifeo_1413795950rubrique:hover{background-color:#5697F9;border-top:1px dashed #7EBFFF;border-bottom:1px dashed #2E6FD1} .wifeo_1413795950pagesousmenu{width:100%;text-align:center;display:table} .wifeo_1413795950sousmenu a{background-image:url();background-position:center;text-align:center;background-color:#7EBFFF;border-top:1px dashed #A6E7FF;border-bottom:1px dashed #5697D7} .wifeo_1413795950sousmenu a:hover{background-image:url();background-position:center;background:#A6E7FF;border-top:1px dashed #CEFFFF;border-bottom:1px dashed #7EBFD7} .wifeo_1413795950rubrique:hover > .wifeo_1413795950sousmenu{opacity:1;top:50px;visibility:visible}</style>
Et voici mon code HTML :
Code HTML :
<nav><div class='wifeo_1413795950conteneur_menu'><div class='wifeo_1413795950pagemenu'><a href='http://zone-geek.fr'><img src='http://forum.zone-geek.fr/upload/home.png' border='0'></a></div><div class='wifeo_1413795950pagemenu'><a href='http://forum.zone-geek.fr/news/index.php'>Les Nouveautés</a></div><div class='wifeo_1413795950pagemenu'><a href='http://forum.zone-geek.fr/forum/index.php'>Le Forum</a></div><div class='wifeo_1413795950rubrique'><a href='#mw999'>Divers</a><div class='wifeo_1413795950sousmenu'><div class='wifeo_1413795950pagesousmenu'><a href='http://forum.zone-geek.fr/shoutbox/shoutbox.php'>Shoutbox</a></div><div class='wifeo_1413795950pagesousmenu'><a href='http://forum.zone-geek.fr/online/index.php'>Qui est en ligne ?</a></div><div class='wifeo_1413795950pagesousmenu'><a href='http://forum.zone-geek.fr/newsletter/index.php'>Newsletter</a></div><div class='wifeo_1413795950pagesousmenu'><a href='http://zone-geek.fr/contact.html' target='_blank'>Nous Contacter</a></div></div></div></div></nav>
Merci par avance et désolé de vous déranger (Encore)
Cordialement
TheCarlus77 Membre non connecté
Booster Fronde
- Booster Fronde
- Voir le profil du membre TheCarlus77
- Inscrit le : 11/10/2014
- Site internet
Merci encore
Cordialement
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie