[html / css] pb mise en page, div positionnés

Marsh Posté le 31-07-2002 à 16:48:25

salut, j'essaye de faire un site avec des menus et des sous-menus contextuels ... j'essaye de faire ce genre de sous menus avec des div positionnés, paske j'ai pas envie de faire plein d'images, car ces sous menus risquent de changer, dans leur quantité, texte, etc.... et donc, je veux faire entrer en jeu les CSS et les DIV ....

je sais pas trop comment faire
poue le menu principal j'ai réussi (cf. (1) ) à bien positionner, et faire un effet onmouseover onmouseout avec un peu de javascript, en changeant de classe ....
mais pour les sous menus(cf. (2) ), je sais pas du tout comment faire .... sachant qu'il y a un effet onmouseover, etc...
le screenshot :

Reply

Marsh Posté le 31-07-2002 à 16:48:25

Reply

Marsh Posté le 31-07-2002 à 17:09:50

euh
je crois que mon problème est mal expliqué :'(

un extrait de ma css :

Code :

.menuitem1 {
font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: white;
background-image:url(/image/v2/rond_on.gif);
background-position:center right;
background-repeat:no-repeat;
position:absolute; top:80px; left:220px;
}
.menuitem1 a:active {color: white; text-decoration:none}
.menuitem1 a:hover {color: white; text-decoration:none}
.menuitem1 a:link {color: white; text-decoration:none}
.menuitem1 a:visited {color: white; text-decoration:none}
.menuitem1_over {
font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #f7931e; font-weight: bold;
background-image:url(/image/v2/rond_roll.gif);
background-position:center right;
background-repeat:no-repeat;
position:absolute; top:80px; left:220px;
}
.menuitem1_over a:active {color: #f7931e; text-decoration:none}
.menuitem1_over a:hover {color: #f7931e; text-decoration:none}
.menuitem1_over a:link {color: #f7931e; text-decoration:none}
.menuitem1_over a:visited {color: #f7931e; text-decoration:none}

mon javascript:

Code :

function menu_mouseover(obj) {
obj.className = obj.className + "_over";
}
function menu_mouseout(obj) {
var pt = obj.className.indexOf("_over" );
if (pt >= 0) {
newclass = obj.className.substring(0,pt);
} else {
newclass = obj.className;
}
obj.className = newclass;
}

mon chteumeuleu pour les menus:

Code :

<div class="menuitem1" onmouseover="javascript:menu_mouseover(this);" onmouseout="javascript:menu_mouseout(this);"><a href="">Accueil </a></div>

ça ça marche nickel, paske les éléments du menu (1) ne font qu'une ligne de texte, donc le petit rond blanc reste toujours aligné ...

par contre je sais pas comment faire ça pour les sous menus qui peuvent faire plus d'une ligne etc....

bref :s
eske kelkun a fait un menu avec des sous menus un peu comme mon truc et que en css ?

Reply

Marsh Posté le 31-07-2002 à 18:19:46

hum
pas passionnant tout ça :cry:
sinon, en css, quand je fais ça:

background-image:url(/image/v2/rond_on.gif);
background-position:center right;
background-repeat:no-repeat;

eske je peux dire à l'image qu'elle descende de x pixel par rapport au top ? ya moyen de positionner une background-image ??????

Reply

[html / css] pb mise en page, div positionnés

Sujets relatifs:

Leave a Replay