28172 sujets

CSS et mise en forme, CSS3

Pseudo-menu

Bonsoir, le titre est pseudo-menu car ce que je veux faire ressemble à un menu, et je poste dans CSS car je crois que ça se fait rien qu'avec du CSS.

En fait, mon idée est de faire la chose suivante (mieux vaut un petit dessin qu'une confuse explication) :

item 1----------------------item 3
bla bla 1-1----------------bla bla 3-1
bla bla 1-2----------------bla-bla 3-2
bla bla 1-3----------------bla-bla 3-3
bouton "see more"-----bouton "see more"

item 2----------------------item 4
bla bla 2-1----------------bla-bla 4-1
bla bla 2-2----------------bla-bla 4-2
bla bla 2-3----------------bla-bla 4-3
bouton "see more"-----bouton "see more"

et si je clique sur le bouton "see more" de l'item 1, on a

item 1----------------------item 3
bla bla 1-1----------------bla bla 3-1
bla bla 1-2----------------bla-bla 3-2
bla bla 1-3----------------bla-bla 3-3
bla bla 1-4----------------bouton "see more"
bla bla 1-5
bla bla 1-6----------------item 4
bla bla 1-7----------------bla-bla 4-1
-----------------------------bla-bla 4-2
bouton "hide-------------bla-bla 4-3
-----------------------------bouton "see more"


donc quand on développe l'item 1, cela masque l'item 2 qui se trouve juste au-dessous.
Et donc ça ressemble un peu à un menu sauf qu'il n'y a pas de rollover, mais que des changements sur click.
Salut laurents,

J'ai une idée de solution pour ton menu. C'est une solution parmi d'autres.

Pour chaque parti de menu (item 1, item 2, item 3 et item 4), met un min-height de la valeur qu'il te faut pour éviter le masquage du menu du bas.
Merci pour cette réponse mais même si c'est une partie de solution, ça ne me donne pas le comportement souhaité (les boutons "see more" et "hide").
Comme en fait, ça se trouve sur intranet, je peux pas donner une URL mais en voici le code (ds son état actuel, donc y a pas du tout la gestion que je voudrais inclure) :
code CSS :
.siteMap2 .normal,
.siteMap2 .selected{cursor:pointer;}
.siteMap2{width:790px;}
.siteMap2 a{color:inherit;font-family:inherit;font-size:inherit;margin:0;padding:0;}
.siteMap2 .normal *{font-weight:bold;color:white;}
.siteMap2 *{margin:0;padding:0;font:bold 13px arial;font-style:normal;text-decoration:none;color:#626469;}
.siteMap2 .Menu1{height:40px;}
.siteMap2 .Menu1 .Separator{width:5px;height:40px;}
.siteMap2 .Menu1 *{width:125px;font-weight:normal;}
.siteMap2 .Menu1 a{width:100%;font-weight:inherit;color:#626469;}
.siteMap2 .Menu1_roundTop .top{height:5px;background-color:transparent;line-height:0;background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greytop.gif");}
.siteMap2 .Menu1_content{width:100%;background-color:#EAEAEA;height:25px;}
.siteMap2 .Menu1_content td{width:115px;}
.siteMap2 .Menu1_content td.padding{width:7px;}
.siteMap2 .Menu1 .normal *{font-weight:bold;color:#626469;}
.siteMap2 .Menu1 .selected .Menu1_roundTop .top{background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greentop.gif");}
.siteMap2 .Menu1 .selected *{font-weight:bold;color:white;}
.siteMap2 .Menu1 .selected a{width:115px;font-weight:bold;color:white;}
.siteMap2 .selected .Menu1_content{background-color:#87D300;height:35px;}
.siteMap2 .Menu1_rollover .Menu1_roundTop .top{background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greentop.gif");}
.siteMap2 .Menu1_rollover .Menu1_content{background-color:#87D300;height:35px;}
.siteMap2 .level1 a,
.siteMap2 .level1 a:link,
.siteMap2 .level1 a:visited{display:block;text-decoration:none;color:#626469;font:bold Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;
line-height:22px;padding-left:10px;width:auto;}
.siteMap2 .level2{margin-top:-2px!important;margin-bottom:1px;}
.siteMap2 .level1{margin-top:20px!important;margin-bottom:10px;}
.siteMap2 .level2 a,
.siteMap2 .level2 a:link,
.siteMap2 .level2 a:visited{display:block;padding:2px 0 2px 20px;color:#6e6e6d;font:Arial,Helvetica,sans-serif;font-weight:normal;font-size:1Opx text-decoration:none;
background:url("http://www.schneider-electric.fr/gc_1_0/images/structure/green_bullet.gif") 10px 7px no-repeat;line-height:16px;vertical-align:middle;width:auto;}
.siteMap2 .level2 a:hover,
.siteMap2 .level2 a.selected{font-weight:normal;color:#87d300;}
.siteMap2 .level2 .level3{margin-bottom:2px;}
.siteMap2 .level3 a,
.siteMap2 .level3 a:link,
.siteMap2 .level3 a:visited{padding-left:25px;font-weight:normal;color:#6e6e6d;background:none;width:auto;}
.siteMap2 .level3 a:hover,
.siteMap2 .level3 a.selected{color:#87d300;}
.siteMap2 .level3 a,
.siteMap2 .level3 a:link,
.siteMap2 .level3 a:visited{padding-left:25px;font-weight:normal;color:#6e6e6d;background:none;width:auto;}
.siteMap2 .level3 a:hover,
.siteMap2 .level3 a.selected{color:#87d300;}


.box1 {
	font: normal 11pt Trebuchet MS,Arial,sans-serif;
	background-color: #B4AF91;
	width: 150px;
	height: 20px;
	padding-left:10px;
	min-height:40px;

	-webkit-border-radius: 5px;

	behavior: url(border-radius.htc);
}

.rel {
	margin: 0px 0 0 0px;
	padding: 0px;
	position: relative;
	z-index: inherit;
	zoom: 1; 
}

.width2 {
width : 220px;
}


code html :
<table cellspacing=0 cellpadding=0 width="790" style="border:1px solid white" class="siteMap2">
<tr>
<td width="135" style="border:1px solid white">&nbsp;</td>
<td width="3" style="border:1px solid white">&nbsp;</td>
<td width="135" style="border:1px solid white">&nbsp;</td>
<td width="3" style="border:1px solid white">&nbsp;</td>
<td width="135" style="border:1px solid white">&nbsp;</td>
<td width="3" style="border:1px solid white">&nbsp;</td>
<!-- fin ligne 1 -->
</tr>
<tr>
<td>
<div class="rel">

			<div class="box1 level1">
<a href="#" target="_self"><script>document.write('<a href="'+link_1+'" target="'+target_1+'">' +titre_1+'</a>');</script></a>
			</div> </div>
</td>
<td></td>
<td>
<div class="rel">

	
			<div class="box1 level1">
			<a href="#" target="_self"><script>document.write('<a href="'+link_2+'" target="'+target_2+'">' +titre_2+'</a>');</script></a>

			</div> </div>
</td>
<td></td>
<td>
<div class="rel">

			<div class="box1 level1">
			<a href="#" target="_self"><script>document.write('<a href="'+link_3+'" target="'+target_3+'">' +titre_3+'</a>');</script></a>
			</div> </div>
</td>
<td></td>


</tr>
<tr>
<td valign="top">
<div class="rel">

			<div class="box1 level1">
<a href="#" target="_self"><script>document.write('<a href="'+link_1_1+'" target="'+target_1_1+'">' +label_1_1+'</a>');</script></a>
			</div> </div>
<div class="rel">

			<div class="box1 level1">
<a href="#" target="_self"><script>document.write('<a href="'+link_1_2+'" target="'+target_1_2+'">' +label_1_2+'</a>');</script></a>
</div> </div>

<table cellspacing="0" cellpadding="0" class="level2"><tr>
<td>
<a href="#" target="_self"><script>document.write('<a href="'+link_1_2_1+'" target="'+target_1_2_1+'">' +label_1_2_1+'</a>');</script></a>
</td></tr></table>
...

</tr>
<tr><td width="135" style="border:1px solid white">&nbsp;</td>
<td width="3" style="border:1px solid white">&nbsp;</td>
<td width="135" style="border:1px solid white">&nbsp;</td>
<td width="3" style="border:1px solid white">&nbsp;</td>
<td width="135" style="border:1px solid white">&nbsp;</td>
</tr>

<tr><td>
<div class="rel">

			<div class="box1 level1">
			<a href="#" target="_self"><script>document.write('<a href="'+link_4+'" target="'+target_4+'">' +titre_4+'</a>');</script></a>
</div></div>
</td>
<td></td>
<td>
<div class="rel">

			<div class="box1 level1">
			<a href="#" target="_self"><script>document.write('<a href="'+link_5+'" target="'+target_5+'">' +titre_5+'</a>');</script></a>
</div></div>
</td>
<td></td>
<td>
<div class="rel">

			<div class="box1 level1">
			<a href="#" target="_self"><script>document.write('<a href="'+link_6+'" target="'+target_6+'">' +titre_6+'</a>');</script></a>
</div></div>
</td></tr>

<tr>



<td valign="top">
<div class="rel">

			<div class="box1 level1">
<a href="#" target="_self"><script>document.write('<a href="'+link_4_1+'" target="'+target_4_1+'">' +label_4_1+'</a>');</script></a>
</div></div>
<div class="rel">

			<div class="box1 level1">
<a href="#" target="_self"><script>document.write('<a href="'+link_4_2+'" target="'+target_4_2+'">' +label_4_2+'</a>');</script></a>
</div></div>
...

			</tr>


</table>


code js : 
<script>
// objectif : pouvoir facilement modifier le contenu

// COLONNE 1 : USER CENTRIC
var titre_1="USERS CENTRIC";var link_1="#";var target_1="";
var label_1_1="Project Managers";var link_1_1="http://ocp.schneider-electric.com/Global/OCP/OCPHTML.nsf/pages/Project_Managers_Area/$File/ProjectManagers_home2.html";var target_1_1="";
...
</script>


Evidemment, c'est un code que je récupère, déjà un peu modifié (les coins arrondis) et j'ai fortement simplifié le html et le js, mais pas touché au CSS.
Salut laurentsc,

En regardant ton code, j'ai vu qu'il était composé de tableau.
Je te propose de reprendre entièrement ton code HTML en mettant des <div> et des <span> au lieu de <table>, <tr> et <td>. Bien sur il faudra reprendre aussi ton CSS.

je te dis ça parce que le HTML5 sera bientôt finalisé (d'ici 2014), et tu seras obligé de reprendre ton code avant cette échéance.
A partir de là, tu pourras avoir plusieurs solutions à ton problème.
OK, et je sais que la mise en page à base de table html, c'est pas top ; d'ailleurs, j'avais essayé de le réécrire, non avec des div et span, mais avec des ul/li, mais j'y arrivais pas car j'arrive à tout comprendre dans le CSS de ce code que je récupère ; de plus, j'ai pas le courage, mais es-tu sûr que c'est un passage obligé ?
Je suis sur et certain que c'est un passage obligé.
Aujourd'hui, très peu de choses se font en tableau en HTML (mises à part les données présenté en tableau).

Quitte à le faire, fait-le maintenant et tu seras tranquille pour un long moment.

Ensuite, tu n'es pas obligé de t'inspirer du CSS que tu as. Il suffit de le refaire de 0. Mais il faut noter tout ce que tu veux à la base.
Sujet clos
Aller à