28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

EDIT1 : Tout d'abord je ne parviens pas à clairement appliquer les style liés au langage, désolé.
EDIT 2 : C'est bon, j'ai trouvé Smiley biggol

Je débute en Javascript et je me suis fait tout seul comme un grand une boîte à onglets. La mauvaise surprise ça a été lorsque j'ai chargé la page sous IE.. La cata. Sous FF, Opera et Chrome ça marche correctement en revanche. Voyez vous-mêmes : http://aeroport.calais.free.fr/pronos/test.php

J'ai mis le problème en CSS mais il semblerait qu'il y ait 2 soucis sous IE :
1- le script ne s'exécute pas normalement, le clic sur un nouvel onglet n'a pas l'effet escompté
2- la mise en page est complètement foireuse sous IE

Voici les 3 bouts :

Javascript

function afficheronglet(n)
{
var etat = document.getElementsByName("onglet");
var fond = document.getElementsByName("puce");
var nbre = etat.length;

for (j = 0; j < nbre; j++)
{
if (etat[n].style.display != etat[j].style.display)
{
etat[n].style.display = "block";
fond[n].style.background = "yellow";
etat[j].style.display = "none";
fond[j].style.background = "none";
}
}
}


L'appel :

<script type="text/javascript" src="scripts.js"></script>

<div id="contenant">
<dl>
<dt name="puce" style="background: yellow;">
<!-- onglet 1 : n = 0 -->
<a href="#" onclick="javascript:afficheronglet(0)">But et gains</a>
<div id="onglet" style="display: block; " name="onglet">
<p>On ne joue ici que sur la course (pas de paris pour les qualifications). Le but est de <strong>parier sur les 10 premiers pilotes à l'arrivée de chaque weekend de grand-prix</strong>. Au terme du grand prix, le pronostic rapporte des points (cf juste en dessous) et un cumul de points se fait
tout au long de la saison. Au terme de la saison un vainqueur sera désigné.</p>
</div>
</dt>
<dt>....
</dl>
</div>


Et la css :

#contenant
{
margin: 0;
width: 100%;
height: auto;
}

#onglet
{
position: absolute;
width: 780px;
padding: 0;
}
#contenant dl
{
border-bottom: 1px solid;
width: 100%;
height: 22px;
}

#contenant dt
{
display: inline;
list-style-type: none;
margin: 0 3px 0 0;
padding: 3px;
border: 1px solid;
border-bottom: 0;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}


Quelqu'un peut-il m'aider svp ? Merci d'avance. Smiley smile
Modifié par Bertrand40 (10 Feb 2010 - 11:57)
Je vois plusieurs petits trucs à corriger en premier lieu.

Tu devrais valider ta page et faire les corrections, notamment celui qui dit qu'un ID doit être unique.

Pour ce que j'en sais, IE est capricieux avec le getElementByName ou le getElementByClass mais il faudrait vérifier mais certaines méthodes ne sont pas appréciées de IE.

Ensuite, <a href="#" onclick="javascript:afficheronglet(0)"> ce n'est pas bon.

Voici les deux choix qui s'offrent à toi.


<a href="#" onclick="afficheronglet(0)">
<a href="javascript:afficheronglet(0)">


L'utilisation d'une définition list ( DL ) n'est pas pertinent. Surtout que tu n'utilises pas les <dd> ( definition description ).

L'attribut name n'existe pas pour les <div>.

Bref, tu as des problèmes de structure dans ton code qu'il faudra régler. Peut-être pourras-tu aussi envisager de regarder les exemples javascript qui existe déjà. Ça pourra te donner une piste de combien bien le faire tout en apprenant à le faire.
Modifié par Sorano (29 Jan 2010 - 17:15)
Merci pour ta réponse.

J'ai modifié la partie du lien <a href="javascript:afficheronglet(0)">.

J'ai utilisé la fonction getElementsByClassName et donc supprimé les "name" de mes div :
function afficheronglet(n)
{
	var etat = document.getElementsByClassName("onglet");


J'ai changé le div onglet par une classe onglet :
.onglet
{
	position: absolute;
	width: 780px;
	padding: 0;
}


Premier constat : ça ne marche plus du tout sur IE.
La validation confirme qu'il y a moins d'erreurs.

Je viens de lire que getElementsByClassName n'est pas implémenté dans IE.. Les recherches se poursuivent donc.

Concernant les listes, j'ai jamais vraiment compris. Comme beaucoup de choses qui restent assez floues.. Mais je n'ai d'autre moyen que pratiquer pour intégrer. Smiley sweatdrop
Modifié par Bertrand40 (29 Jan 2010 - 17:51)
J'ai pas d'exemple complet mais voici un petit exemple de ce que tu pourrais faire.

En premier lieu, j'utiliserais le onclick car premièrement, tu peux offrir un contenu alternatif équivalent à ceux n'ayant pas javascript et tu peux aussi garder le contexte de sur quel lien tu cliques. ( Si le javascript est désactivé, le href="URL" sera pris en compte )

Voici une piste que tu pourrais peut-être creuser. Sinon, comme je te disais, tu peux surment regardé ce qui existe déjà.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
	function change_onglet(elem){
		elem.parentNode.getElementsByTagName('p').item(0).style.display = 'none';
		return false;
	}
</script>
</head>

<body>


<div>
    <a href="page.html" onclick="return change_onglet(this)">bbbb</a>
    <p class="onglet">
        asdad
        asdasd
    </p>
</div>
</body>
</html>


Ça fonctionne aussi dans IE. J'espère que ça t'aidera. Sinon tu peux mettre des ID unique sur chacun de tes onglets et utiliser getElementById pour faire gérer tes onglets.

D'ailleurs, il y a une raison pourquoi tu fais ça comme ça ? Je veux dire, tu as quand même pas beaucoup de contenu dans tes onglets alors pourquoi en faire pour 1 paragraphe ? Si tu me dis qu'il y aura plus de contenu alors pourquoi chaque onglet n'est pas une page html ?

Bref, je crois que tu peux d'autant plus réfléchir sur la structure de ton site que sur les moyens javascript de gérer ton contenu.
Salut Sorano,

D'abord je réponds à tes dernières interrogations.
En fait ce que je fais là existe déjà depuis longtemps sur mon site, c'est ici : http://aeroport.calais.free.fr/pronos/regles.php
En fait je le fais sous forme d'onglets, surtout pour apprendre et manier un peu Javascript. Je trouve JScript beaucoup plus compliqué que HTML/CSS/PHP (même si je maîtrise pas bien cette triplette). En fait c'est pour apprendre et m'amuser on va dire, car je suis à cours d'idées pour le site lui-même.

Là je n'ai pas le tps d'aller plus loin. Donc ce soir je regarderai getElementsByTagName et je reviendrai te donner quelques nouvelles.

Merci quoiqu'il en soit pour ta disponibilité, bon weekend ! Smiley biggrin
Salut,

Bon j'ai persisté dans ce que j'avais commencé, il n'y a que comme ça que je vois une certaine logique pour l'instant. Je serai peut-être mûr un jour pour comprendre autrement.

Bref ça fonctionne avec le getElementsByTagName en ajoutant un hack (du moins c'est comme ça qu'il est présenté sur un forum) : ajouter un id en plus du name, car IE ne sait apparemment dans certains cas pas récupérer le name (c'est ce qui m'arrivait). Par ailleurs j'ai utilisé les dd. Voilà donc au final :

<div id="contenant">
<dl>
	<dt name="puce" id="puce" style="background: #e3ff87;">
		<a href="javascript:afficheronglet(0)">Titre onglet 1</a>
		<dd style="display: block; ">
		Texte page 1
		</dd
	</dt>
	<dt name="puce" id="puce">
		<a href="javascript:afficheronglet(1)">Titre onglet 2</a>
		<dd style="display: none; ">
		Texte page 2
		</dd>
	</dt>
</dl>
</div>


function afficheronglet(n)
{
	var etat = document.getElementsByTagName("dd");
	var fond = document.getElementsByName("puce");
	var nbre = etat.length;
	
	for (j = 0; j < nbre; j++)
	{
		if (etat[n].style.display != etat[j].style.display)
		{
			etat[n].style.display = "block";
			fond[n].style.background = "#e3ff87";
			etat[j].style.display = "none";
			fond[j].style.background = "none";
		}
	}
}


#contenant
{
	position: absolute;
	margin: 0;
	width: 770px;
	height: auto;
}
	
#contenant dl
{
	list-style-type: none;
	padding: 6px 0 4px 0;
}

#contenant dt
{
	display: inline;
	margin: 0 3px 0 0;
	padding: 3px;
	border: 1px solid;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

#contenant dd
{
	position: absolute;
	left: 0;
	top: 40px;
	width: 100%;
	margin: 0;
	padding: 5px;
}
Ta structure HTML n'est pas bonne.

<dt> ne peut pas avoir l'attribut name.

Tu ne peux pas avoir un <dd> dans ton <dt>. Ils doivent être adjacent et non pas parent.

Un id doit être unique or en ce moment, chaque <dt> ont le même ID et ce n'est pas bon.

Voici un exemple de structure et de javascript.


<div id="contenant">
  <dl id="onglets">
    <dt><a href="javascript:afficheronglet(0)">Titre onglet 1</a></dt>
    <dd style="display: block; "> Texte page 1 </dd>
    
    <dt><a href="javascript:afficheronglet(1)">Titre onglet 2</a></dt>
    <dd style="display: none; "> Texte page 2 </dd>
    
    <dt><a href="javascript:afficheronglet(2)">Titre onglet 3</a></dt>
    <dd style="display: none; "> Texte page 3 </dd>
    
    <dt><a href="javascript:afficheronglet(3)">Titre onglet 4</a></dt>
    <dd style="display: none; "> Texte page 4 </dd>
  </dl>
</div>



function afficheronglet(n){ 
    var onglets = document.getElementById("onglets");
	var dt = onglets.getElementsByTagName("dt");
	var dd = onglets.getElementsByTagName("dd");
	for(var x = 0; x < dt.length; x++){
		if(x==n){
			dt.item(x).style.background = "#000";
			dd.item(x).style.display = "block";
		}
		else {
			dt.item(x).style.background = "#fff";
			dd.item(x).style.display = "none";
		}
	}
}


J'ai simplifié tout ça je crois. Si tu as des questions tu me feras signe.

J'aurais bien utilisé une autre méthode avec le "children" au lieu des NodeList mais ce n'est pas supporté partout donc j'ai employé une méthode moins "propre" par soucis de compatibilité.
Re,

J'ai compris ton script et il fonctionne parfaitement. Tu m'as fait découvrir "item" qui permet donc de retourner un noeud dans une liste.

Bilan pour moi donc : pour ce qui concerne la logique "brute" ça va je comprends ce qui se code en fait, grosso modo, par contre après c'est bourré de non respect des règles, et ça c'est plus embêtant.. Comment vous appelez ce domaine qui me pose problème ?

Pour ce qui est de l'utilisation des listes (ul/li, dl/dt/dd) il va falloir que je retourne voir si cette fois-ci je saisis la différence.

Prochaine étape, faire en sorte que mon site propose le choix entre différentes CSS (j'ai un ami qui adore Ferrari, il va falloir que je lui concocte un truc à base de rouge).

Quoiqu'il en soit merci d'avoir été dispo, c'est super sympa.
@une prochaine Smiley biggrin