28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais faire un cadre rectangulaire avec onglet en faisant en sorte qu'en cliquant sur l'onglet suivant ce soit automatique qu'il n'y est pas de rechargement de page...

Existe t-il une solution viable (compatible IE MAC 5 et >, Safari, Mozilla, Firefox et IE 5) qui permettrait de faire ça en CSS ?
Modifié par Samuel Berg (23 Aug 2006 - 12:45)
Bonjour,

Il existe en effet une solution couplant CSS et JavaScript permettant de faire cela.

Plutôt que de faire de long discours, je t'invite à aller yeuter cette page : http://bb80.free.fr/accueil.php

Ce sont deux spans qui s'affichent ou se cachent grâce à du JavaScript.
ça c'est gentil !

Smiley jap

PS: Si je l'utilise plusieurs fois dans la page ne va t-il pas y avoir un problème d'id en double ? Cela utilise des class ?
J't'avoue que là j'avais besoin d'un système à deux onglets, donc je l'ai fait comme tel (avec des id).

Ensuite si tu veux en rajouter il est clair qu'il faudra retoucher le code, à la fois niveau XHTML, CSS et JavaScript. Mais remplacer les id par des classes ne changera rien à son fonctionnement du moins, si telle était ta question.
Je crois rencontrer un problème avec le code, le premier onglet est transparent (?) et laisse visible affichage 2 sur affichage 1:

Si je met ça dans la page


<div id="iframe">

<div id="imenu">
<a id="imenunews" href="javascript:showNews();">Affichage 1</a>
<a id="imenuresult" href="javascript:showResults();">Affichage 2</a>
</div>

<div id="icontenu">
<span id="inews">
Affichage 1
</span>

<span id="result">
Affichage 2
</span>
</div> 

</div>



ça dans le CSS


#iframe {
    float: left;
	margin-top: 20px;
	margin-left: 20px;
	_margin-left: 10px; /* Crack IE */
	margin-bottom: 0px;

	width: 230px;
	height: 223px;
}

#imenu {
	width: 230px;
	height: 18px;

    background: url('img/imenu.jpg');
	background-repeat: no-repeat;
}

a#imenunews  {
    float: left;
	font-size: 0.8em;
	margin-left: 20px;
	color: #F7EFCD;
	text-decoration: none;
}

a:hover#imenunews  {
	color: #EEAB7B;
	text-decoration: none;
}


a#imenuresult {
    float: right;
	font-size: 0.8em;
	margin-right: 25px;
	color: #8E6F43;
	text-decoration: none;
}

a:hover#imenuresult  {
	color: #EEAB7B;
	text-decoration: none;
}

#icontenu {
    font-size: 0.6em;
	text-align: justify;

    overflow: auto;

	width: 220px;
	_width: 230px; /* Crack IE */
	height: 205px;

	padding: 5px;

    background: #F8F4E3;
	border: 1px solid #B49870;
}

a.ilien {
    color: #8E6F43;
	text-decoration: none;
}

a:hover.ilien {
    color: #EEAB7B;
	text-decoration: none;
}


Et ça dans le JS

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.sous_menu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("menu_deroulant").getElementsByTagName("span"); 
		if(el.style.display != "block"){ 
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="sous_menu") 
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

if (document.getElementById){ 
document.write('<style type="text/css">\n')
document.write('.sous_menu2{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("menu_deroulant2").getElementsByTagName("span"); 
		if(el.style.display != "block"){ 
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="sous_menu2") 
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}


function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_jumpMenuGo(selName,targ,restore){ //v3.0
  var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}
[/i][/i][/i][/i][/i][/i]
Le problème vient du fait que j'ai beau changer tous les backgrounds possibles et imaginables... il ne veut rien savoir !

Qu'est ce qui peut poser problème ?
Sans trop regarder dans le JS, je serai tenté de dire que le problème est peut être que les deux divs sont affichés simultanément.

Il semble me souvenir que pour ma part j'avais de base mis les deux div en display:none et qu'au chargement de la page une fonction en mettez une en visible

Vlà les sources :

function showNews() {
   	document.getElementById("inews").style.display="inline";
   	document.getElementById("iresult").style.display="none";
}

function showResults() {
   	document.getElementById("inews").style.display="none";
   	document.getElementById("iresult").style.display="inline";
}

window.onload = function() {
	showNews();
}

Modifié par Jedi (21 Jun 2006 - 15:09)
Cela doit être par rapport au reste du site car en faisant un copier coller de ton code c'est pareil.

Il doit y avoir en dehors de tout le menu (div index inclus) des paramètres qui gèrent l'affichage genre les z-index...
Euuuh... en ne conservant que ca en XHTML
<!-- Déclaration XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Déclaration XHTML Fr -->
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' >
    <head>

		<!-- Appel de la feuille de style -->

		<link rel='stylesheet' media='screen' type='text/css' title='Design de base' href='style.css' />
		
		<!-- Appel des JS -->
		<script language="JavaScript" src="script.js"></script>


				
	</head>

	<body>



<!--
----------------------------------------- IFRAME -----------------------------------------
-->

<div id='iframe'>
<!-- I-Menu -->
<div id='imenu'>
<a id='imenunews' href="javascript:showNews();">News</a>
<a id='imenuresult' href="javascript:showResults();">Résultats</a>
</div>

<div id='icontenu'>

<!-- I-News -->
<span id='inews'>
<strong>MAJ Equipe</strong><br />Il est désormais possible d'enregistrer totalement son équipe.<br />
<br />
Restera à faire le calcul auto du classement par équipe.<br /><span class="time">Jedi :: 07/05/06 17:32</span><br /><div align="center">-*-*-*-*-*-*-*-*-*-*-</div><strong>MAJ Forum</strong><br />Désormais l'on connait l'identité du dernier posteur [smile]<br /><span class="time">Jedi :: 06/05/06 12:53</span><br /><div align="center">-*-*-*-*-*-*-*-*-*-*-</div><strong>Ajout de quelques stats</strong><br />- Meilleure attaque (équipe marquant le plus de TD),<br />
- Meilleure défense (équipe encaissant le moins de TD),<br />

- Meilleure présence physique (équipe f... <em><a href="news.php?$deb=23" class="ilien">(Suite)</a></em><br /><span class="time">Jedi :: 06/05/06 12:08</span><br /><div align="center">-*-*-*-*-*-*-*-*-*-*-</div><strong>Modification des stats des jou...</strong><br />Mise en place [smile]<br /><span class="time">Jedi :: 06/05/06 11:51</span><br /><div align="center">-*-*-*-*-*-*-*-*-*-*-</div><strong>Création d'équipes</strong><br />Désormais, vous pouvez enregistrer votre équipe (enfin, presque ^^) ainsi que les joueurs qui la composent.<br />
<br />
N'hésitez pas à faire des tests afin de... <em><a href="news.php?$deb=21" class="ilien">(Suite)</a></em><br /><span class="time">Jedi :: 04/05/06 19:01</span><br /><div align="center">-*-*-*-*-*-*-*-*-*-*-</div></span>

<!-- I-Result -->
<span id='iresult'>
Page de test : Résults<br />
</span>

</div> 
<!-- Fin I-Menu -->
</div>


	</body>
</html>


Que ca en CSS
/**
 * ----------------------------------------- IFrame -----------------------------------------
 */
#iframe {
    float: left;

	margin-top: 20px;
	margin-left: 20px;
	_margin-left: 10px; /* Crack IE */
	margin-bottom: 0px;

	width: 230px;
	height: 223px;
}

#imenu {
	width: 230px;
	height: 18px;

    background: url('img/imenu.jpg');
	background-repeat: no-repeat;
}

a#imenunews  {
    float: left;
	font-size: 0.8em;
	margin-left: 20px;
	color: #F7EFCD;
	text-decoration: none;
}

a:hover#imenunews  {
	color: #EEAB7B;
	text-decoration: none;
}


a#imenuresult {
    float: right;
	font-size: 0.8em;
	margin-right: 25px;
	color: #8E6F43;
	text-decoration: none;
}

a:hover#imenuresult  {
	color: #EEAB7B;
	text-decoration: none;
}

#icontenu {
    font-size: 0.6em;
	text-align: justify;

    overflow: auto;

	width: 220px;
	_width: 230px; /* Crack IE */
	height: 205px;

	padding: 5px;

    background: #F8F4E3;
	border: 1px solid #B49870;
}

a.ilien {
    color: #8E6F43;
	text-decoration: none;
}

a:hover.ilien {
    color: #EEAB7B;
	text-decoration: none;
}


Que ca en JS
<!-- Script pour affichage/désaffichage -->


function showNews() {
   	document.getElementById("inews").style.display="inline";
   	document.getElementById("iresult").style.display="none";
}

function showResults() {
   	document.getElementById("inews").style.display="none";
   	document.getElementById("iresult").style.display="inline";
}

<!-- Appel des scripts au chargement -->


window.onload = function() {
	showNews();
}


Chez moi, en local, ca marche Smiley sweatdrop
Modifié par Jedi (21 Jun 2006 - 16:25)
Merci d'avoir pris le temps de faire ce travail.
Effectivement ça marche sur une page de test reste à voir si je n'ai pas des conflits avec mes autres variables javascript qui font elles aussi appel à des onLoad (menus notamment).

Après tests navigateurs : fonctionne avec tous mais soucis avec Explorer 5 Mac. En effet les onglets fonctionnent mais le texte ne s'affiche pas sur le deuxième... mais bon de plus en plus de personnes utilisent Safari ou Firefox sur Mac, par ailleurs le développement est arrêter alors...
Modifié par Samuel Berg (22 Jun 2006 - 10:23)
J'ai trouvé le problème :

Ce menu est incompatible avec le CMS Spip.
Quand on fait une page seule, ça va, mais quand on fait appel au page par la ligne spip.php?page=test, le menu ne fonctionne plus...
Modifié par Samuel Berg (22 Jun 2006 - 13:27)
Administrateur
Samuel Berg a écrit :
J'ai trouvé le problème

Bravo.
Le sujet est donc [Résolu] ? Si oui, merci de bien vouloir le marquer dans le titre, comme d'habitude.