28220 sujets

CSS et mise en forme, CSS3

voila ske je veu faire en gros

http://img421.imageshack.us/my.php?image=menu4mm.swf

mais je veu le faire en css car le menu flash me recharge toute la page au lieu de changer juste l'élement selectionné.

est ce possible d'arriver a un système de portes coulissantes avec du genre

http://img402.imageshack.us/img402/298/menu7vf.jpg

et de definir différentes positions relative a chaques petits carré de couleurs?
je suis graphiste et pas codeur, le code c'est pas trop mon dada... je cherche sur la toile mais je trouve pas d'exemple concret a me mettre sous la dent, j'ai bien des exemples de menu, mais rien qui me dise comment definir telle ou telle zone doit etre réactive etc... etc...

enfin merci de votre aide!
Smiley cligne
Modifié par Evil9 (16 Oct 2005 - 14:09)
Tu dois dessiner ton menu normalement.
Ensuite sur chaque lien tu mets un javascript qui:
1- masque toutes les zones de titres
2- affiche le titre voulu
Tu trouveras ca normalement facilement sur les sites dédiés au javascript.
a+
quand tu dis normalement, tu veux dire quoi? une seule image, et ensuite avec le javascript mettre une espèce de layer qui masque et dévoile certaines partie?

désolé de mon incultabilité mais je débute dans le css, j'essaye de comprendre via 2 ou 3 bouquins, le faqs, les forums et les tutos du web, et je dois dire que ca me prend pas mal de temps sur mon boulot... Smiley biggrin
non tu fais ton menu, par exemple sous forme de liste:

<ul>
<li><a href="#" onclick="monjavascript">image ou lien</a></li>
<li><a href="#" onclick="monjavascript">image ou lien</a></li>
<li><a href="#" onclick="monjavascript">image ou lien</a></li>
<li><a href="#" onclick="monjavascript">image ou lien</a></li>
</ul>

puis la zone ou tu vas mettre ton intitulé:
<div id="intitulé_1">intitulé 1<div>
<div id="intitulé_2">intitulé 2<div>
<div id="intitulé_3">intitulé 3<div>
<div id="intitulé_4">intitulé 4<div>

ensuite dans la css:
1- tu mets en page ton menu (cf. http://css.alsacreations.com/Galeries-de-menus-en-CSS)

2- tu positionne et rend invisible tous tes intitulés
#intitulé_1, #intitulé_2, #intitulé_3, #intitulé_4 {
position: absolute;
top: XXpx; left: XX px; /* même valeurs ils seront donc superposés */
display: none;
}

3- tu controles ensuites avec le javascript. c-a-d quand tu survoles:
A- une fonction javascript masque tous les intitulés (au cas ou l'un soit déjà visible)
B- tu montres celui qui t'intéresses: document.getElementById('intitule_1').style.display='block';
ok merci, je teste çà,
grace a tes 20 petites lignes , tu viens de m'aider a avancer un grand pas! ca fait depuis ce matin que je me casse la tete...

Smiley smile
le problème c'est que j'aimerais faire ca sans javascript... est-ce possible? car je connais pas par coeur toutes le possibilités, la je cherche les "balises" qui pouraient peut etre me permettre d'avancer.
j'ai mal au crâne... Smiley biggol
ca y est! j'ai trouvé enfin ces lignes de codes css qui m'ont permis de faire ce menu. et sans flash ni javascript... j'ai bien décortiqué certains exemples et j'ai repris les parties qui m'interresaient pour enfin arriver a un menu qui s'integre bien dans mons graphisme...

voila le code, (une partie) si quelqu'un y voit des trucs illogiques ou inutiles, qu'il me le signale car je suis un peu noob en la matière, il m'a fallu 1 grosse journée pour trouver a peine 30 lignes de code... Smiley biggol

html :

 

<div id="menu">
 <div id="navcontainer">
<ul id="navlist">
<li><a id="menu1" href="home.html">Home</a></li>
<li><a id="menu2" href="portfolio.html">Portfolio</a></li>
<li><a id="menu3" href="cv.html">Curriculum vitae</a></li>
<li><a id="menu4" href="links.html">Links</a></li>
</ul>
</div>



et la css :


 
 #menu {
	width: 595px;
	height: 19px;
	background: #fff url(images/menu.gif) no-repeat;
	
}
 ul#navlist {
	text-align : left;
	margin-left: 65px;
	padding-left: 0;
	white-space: nowrap;

}

#navlist li {
	display: inline;
	list-style-type: none;

}

#navlist  li a { 
	padding: 3px 10px;
	font-size: 0.9em;
}

#navlist a:link, #navlist a:visited {
	color: #000000;
	text-decoration: none;
}

#navlist li a:hover {
	font-size: 1em;
	text-decoration: none;
	
}

#navlist li a#menu1:hover {
   color: #000000;
}

#navlist li a#menu2:hover {
	color: #00A4E8;
}

#navlist li a#menu3:hover {
	color: #C30080;
}

#navlist li a#menu4:hover {
	color: #FFEC00;

}



voila. Smiley smile [code]
Modifié par Evil9 (16 Oct 2005 - 14:19)
Administrateur
Hello Evil9 et Brunob,

Merci de bien vouloir respecter les règles du forum en ce qui concerne l'affichage recommandé des codes.
Tout est expliqué dans les règles (voir le bouton en haut) que vous avez acceptées en vous inscrivant.

Merci de bien vouloir modifier vos messages pour rendre vos codes lisibles (éviter d'en créer de nouveaux)