"Superposer" 2 éléments
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
En pleine refonte de mon site sous la v4, je cherche actuellement à superposer 2 éléments. Une image sera plus explicite je pense, voici donc ce que je souhaiterais faire:

J'ai déjà un peu chercher sur internet mais rien de très clair. J'ai vu une histoire de "<span>" à la place des "<div>" mais apparemment l'une des solutions les plus pertinentes serait de jouer sur la position "absolute" et "relative", là aussi, je n'ai pas vraiment tout compris.
Donc voilà

Merci d'avance,
Benji
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
il faudrait plus de renseignements sur l'emplacement et le nom des divs
c'est un menu ajouté par l'admin ou mis "à la main" dans un tpl ?
aiglobulles Membre non connecté
Booster Missile
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
ça te donnera un truc du genre:
pour le html:
pour le css:
Code CSS :
#header { position: relative; } #menu { position: absolute; top: 0px; left: 800px; width: 200px; height: 50px; }
les valeurs exprimées en pixels dépendent bien entendu de ton template. A toi de voir ce qui va bien. Tu trouveras plein d'infos utiles en cherchant "positionnement css" dans google.
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
Code HTML :
Code CSS :
div#sub_header ul.menu { } div#sub_header ul.menu li{ display: inline; float:left; margin-left:20px; border-bottom:2px solid #353535; -webkit-transition: border 2s ease-out; -moz-transition: border 2s ease-out; -o-transition: border 2s ease-out; transition: border 2s ease-out; } div#sub_header ul.menu li a{ display: block; height: 31px; padding: 10px 1px 0px 1px; } div#sub_header ul.menu li a.title{ color:#cccccc; font-size:17px; font-family:"Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif; text-decoration:none; font-weight: normal; transition: color 2s ease-out; -webkit-transition: color 2s ease-out; -moz-transition: color 2s ease-out; -o-transition: color 2s ease-out; } div#sub_header ul.menu li a.title:hover{ color:#FFFFFF; transition: color 0.5s ease-out; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; } div#sub_header ul.menu li.lien, div#sub_header ul.menu li.lien:hover{ border-bottom:2px solid #8f0000; } div#sub_header ul.menu li.lien a{ color:#ebebeb; } div#sub_header ul.menu li:hover{ border-bottom:2px solid #336397; -webkit-transition: border 0.5s ease-out; -moz-transition: border 0.5s ease-out; -o-transition: border 0.5s ease-out; transition: border 0.5s ease-out; } div#header{ height:143px; } div#sub_header { height: 45px; margin: auto; } div#sub_header p a { color:#FFF; } div#header .dynamic_menu h5.links { background:none; border:none; color:#edfff0; width:134px; background:url(images/button.png) no-repeat; padding:5px 0px; font-size:11px; margin-right:1px; } div#header .dynamic_menu h5.links:hover { color:#edfff0; cursor:default; background:url(images/button_click.png) no-repeat; } div#header .dynamic_menu h5 a { color:#FFFFFF; text-decoration:none; }
Concernant le menu, il s'agit donc du contenu de la zone sub header. C'est ce contenu que je souhaiterais superposer à mon image.
Merci d'avance,
Benji
[EDIT] @ aiglobulles: D'accord, merci, je vais essayer avec ces éléments
aiglobulles Membre non connecté
Booster Missile
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
Dans le cas présent, ton image se compose d'un logo sur la gauche avec sur la droite, le menu (écriture blanche) sur un fond en forme de trapèze (côté gauche biseauté).
L'image étendue sur toute la largeur du site pèse bien lourd que si tu avais juste ton logo sur la gauche. Et à côté de cela ton menu avec soit:
- un background biseauté réalisable avec les nouvelles fonctionnalités apportées par les CSS3
- un background sous forme d'image (juste le trapèze en png transparent par exemple.
La première solution risque cependant de ne pas être compatible avec les vieux navigateurs, mais n'importe quel navigateur à jour (excepté peut-être IE) devrait interpréter correctement les nouvelles normes CSS.
En plus d'un gain de poids au niveau des images, tu gagneras aussi en optimisation du code.
Par contre, l'image button.png, c'est quoi ? Je n'en vois pas l'intérêt si tes liens sont textuels.
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
L'image "button.png" est utilisée pour le formulaire de connexion il me semble (le menu permet de se connecter ou d’accéder aux liens du profil).
En admettant que je reprenne tout, en partant sur ta deuxième solution, quel serait les bases à mettre ? Parce qu'après j'arrive à peu près à bidouiller pour obtenir le résultat voulu.
Actuellement, j'ai réussi à superposer l'image et le menu, donc je pourrais m'en contenter, mais il est vrai que ça fait une image plus lourde à charger et un code ni optimisé, ni pratique dans la mesure ou pour modifier les liens, je devrais passer par PS.
Merci d'avance,
Benji
aiglobulles Membre non connecté
Booster Missile
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
Via Skype ?
aiglobulles Membre non connecté
Booster Missile
-
Booster Missile
- Voir le profil du membre aiglobulles
- Inscrit le : 15/08/2008
- Groupes :
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
