Problème CSS (absolute)

[julkien]

bonjour tous le monde ^^

 

Je dépoussière mon login Zebulon, car ça fait un bail que je suis pas venu poster (bien que hautement présent sur le #channel) ...

 

Mon soucie, la ou je coince et que j'en ais marre que je trouve pas la solution qui me ¤¤¤¤¤¤¤ grrrr, bref :

 

Donc mon soucie c'est que le menu déroulant que j'ai pris ici et là et assemblé comme j'ai pu, a le rendu escompté, est a la bonne place, mais quand ont déroule le menu, le site se décale vers le bas, alors que normalement il devrait se mettre au dessus du site, enfin superposer sur les articles (j'y ais pas mis un effet de transparence pour rien

 

donc voici mon CSS :

 

/*---- Menu--------*/

#containerIE {}
#testIE {}



.menuIE {
display:none !important;
display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#000;
width:92px;
height:21px;
display:block;
background-image:url('image/btnfond.gif');
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:xx-small;
line-height:21px;
overflow:hidden;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity: 0.75;
}

a.boutonIE:hover {
color:#fff;
background-image:url('image/btnclick.gif');
overflow:visible;}

a.boutonIE:hover table {
display:block;
background:#eee;
border-collapse:collapse;
}


#container{position:relative}
#test{position:absolute !important;z-index:100 !important}


.boutonFF {
color:#FFFFFF;
width:92px;
height:21px;
display:block !important;
display:none;
background-image:url('image/btnfond.gif');
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:xx-small;
line-height:21px;
overflow:hidden;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity: 0.75;
}

.boutonFF:hover {
height:auto;
cursor:pointer;
color:#FFFF00;
background-image:url('image/btnclick.gif');
}


a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:92px !important;
width:118px;
height:21px;
text-decoration:none;
color:#400040;
font-family: verdana;
font-size:xx-small;
text-align:center;
background:#eee;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity: 0.75;
}


a.SousMenu:hover {background:#ECE9D8;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

 

Tous se joue ici, bon j'avoue je suis pas très bon en prog, mais j'essai de me dépatouiller.

 

Il parait que c'est simple, m'a ton dit, une histoire de sous menu en position:absolute; mais j'ai essayer je n'y arrive pas.

 

Si une ame charitable veut bien m'éclairer...

 

Merci d'avance et pardon pour mon humour pas top

[simous]

Avec le code html, ça serait plus simple, et un exemple en ligne serait un plus

[julkien]

Avec le code html, ça serait plus simple, et un exemple en ligne serait un plus

 

Alors pour l'exemple en ligne, (mais malheureusement va faloir vous créer un compte car le site tourne, et ne peut pas tourner avec se menu)

 

Donc Rendez vous sur powido.com

 

Et dans "mon thème" choisir le thème "Test"

 

sinon voici mon header.php (du thème) ou le menu est inseré :

 

(plutot que de le mettre la ===> Pastebin )

 

voici mon header.php

 

Merci a toi de m'aider ^^

[KewlCat]

Juste d'après ta description du problème (pas le temps de lire le code), j'ai l'impression que tu n'as pas fixé la hauteur de ton conteneur de menu (avec un height explicite, et un overflow: overflow; explicite lui aussi, peut-être même avec un z-index pour être bien sûr que ça passera "au-dessus") du coup, quand tu fais afficher du contenu dedans, il ajuste automatiquement la hauteur du bloc et décale tout le reste...

 

Ceci étant, si tu le positionnes en "absolute" tu vas le retirer du flot normal des éléments de ta page et donc t'éviter ce phénomène de "je change la taille d'un bloc et je décale tout"...

[julkien]

salut Kewlcat chat boom ? (sa fait longtemps)

 

donc tu le sais (ou plus) je suis vraiment pas au point hein, tous ce qui concerne le codage chez moi, est du pur bidouillage (j'avoue Skwi ma beaucoup appris sur le PHP) mais bon

 

donc j'ai relus mon CSS rapidement et sa parle un peu de ce que tu dis :

#container{position:relative}
#test{position:absolute !important;z-index:100 !important}

 

Après je me trompe sûrement mais donc cela ne proviendrait pas de cela si ?

[Dylav]

Bonjour Julkien,

 

Peux-tu préciser quel bloc est le conteneur de ton menu déroulant ? Car c'est lui qu'il faut incruster dans la page en position:absolute. Et il faut en outre indiquer où tu le positionnes dans la page, par exemple top:0;left;0; pour le coin haut gauche.

 

Par ailleurs, je ne pense pas que les mentions !important soient bien utiles.

[julkien]

Bonjour Julkien,

 

Peux-tu préciser quel bloc est le conteneur de ton menu déroulant ? Car c'est lui qu'il faut incruster dans la page en position:absolute. Et il faut en outre indiquer où tu le positionnes dans la page, par exemple top:0;left;0; pour le coin haut gauche.

 

Par ailleurs, je ne pense pas que les mentions !important soient bien utiles.

 

Alors je vais essayer de te répondre mon cher Dylav (bonjour en passant) donc, le menu est incruster dans le header.php du thème, ils est donc mis a la bonne place (selon moi) (j'avais fait un autre menu en .JS qui fonctionnais nickel (sauf pour IE...)).

 

Qu'appelle tu conteneur ? (désolé chui un noob)

 

Qu'appelle tu Block ? (idem)

 

tu as les infos du header.php dans ce pastebin

 

La notion d'important est pour diffenrecier IE de FF par exemple (il me semble)

 

Le menu est tout simple (voir dans le header.php la partie "intégration menu").

 

en l'occurrence si tu veux je fait un zip contenant le menu avec son CSS ?

 

Désolé de pas être plus clair....

 

EDIT: de base c'est ce menu là : http://www.peutetreunereponse.net/article-1175702.html

 

Y'en a qui en parle dans les commentaires mais je pige pas

 

c'est commentaire là

 

UNE PISTE : le pacer en position absolute ou l'entourer d'une div avec des margin-left et marginr-right auto

 

(trouver en fouillant dans les commentaires mais je sais pas l'appliqué)

Modifié le 10 mars 2008 par julkien

[Dylav]

Conteneur = contenant.

 

Un bloc est représenté par exemple par une balise <div>. Donc son contenu, c'est tout ce qui se trouve entre la balise de début <div> et la balise de fin </div>. Ensuite, le comportement du bloc est décrit dans la feuille de style sous son identificateur "id".

 

Exemple : <div id="blocbloc"> ... </div> (page HTML)

#blocbloc {position:absolute;top:0;left:0;} (feuille de style)

 

Par ailleurs, je suis allé voir ta page d'accueil sur powido.com. Elle n'a pas l'air de bien supporter une largeur d'écran inférieure à 1280 pixels : la zone centrale d'identification déborde sur la colonne de droite...

[julkien]

Normal, le thème mis par défaut est un thème que j'ai mis vite fait... si tu as créé un compte, et essayé le thème "test", tu auras vu le menu ou sa ch**.

 

Donc sinon, une idée par rapport à mon précédent post ?

[julkien]

Je vient d'essayer ca Dylav :

 

Rajouter ceci dans le CSS

 

#dylav {position:absolute;top:20;left:26;}

 

et encapsuler tout mon menu de ça :

 

<div id="dylav"> ....... </div>

 

Sous FirefoX le menu apparait nickel, quasi au bon endroit (mais j'arrive pas a mieux), mais sous IE le menu sort du site, je craint donc qu'il ne faille faire une partie pour IE et une pour Firefox...

 

Pourquoi quand je change "top:20;left:26;" par par exemple "top:25;left:30;" il n'y a pas de changement apparent ?

 

Je comprend pas tout, sinon il va donc faloir que je fasse une balise Div pour FF et une Pour IE, sachant que le menu marche en doublons sa ne devrait pas poser trop de problème non ?

 

EDIT: Je vient d'essayer de mettre une Div pour la partie FF et une Div pour la partie IE avec un nom différent, mais je n'est plus que deux bouton qui s'affiche du menu (les deux dernier).

 

je pige pas :/

Modifié le 10 mars 2008 par julkien