Sujet Précédent Sujet Suivant

Problème de cadre sur Firefox (<div> et css)

Fermé
Simmans - 30 janv. 2008 à 20:34
 Pedro - 30 janv. 2008 à 22:52
Bonjour,

Je suis en train de développer un site web en PHP et j'utilise XHTML 1.0 Strict .

Voilà mon problème, je développe le site web avec plusieurs couches de balises <div> et la balise <div> principale est encadré :

.principal{
background-color: #DDDDFF;
margin-left: auto;
margin-right: auto;
width: 870px;
border-width: 3;
border-style: ridge;
border-color: #AAAAFF;
}

La classe "principal" est la première couche, j'ai une deuxième couche qui représente le niveau en hauteur et la 3ème chaques parties de la page. J'utilise le paramètre CSS float et clear pour rassembler tous les sections d'un même niveau. Il y a un cadre "border" qui rassemble le tout (dans la balise <div class="principal">). Jusqu'ici ça va.

Sur Internet Explorer 7, c'est nickel, aucun problème. Mais sur FireFox et Opéra, le cadre entoure seulement la première partie le premier niveau (de la deuxième couche) du site. De plus, quand je supprime les float et clear du deuxième niveau, l'encadrement est correcte. Mais j'ai besoin de ceux-ci sinon l'affichage est incorrecte. Comment puis-je me débrouiller?

Merci
A voir également:

5 réponses

Réponse 1 / 5
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
30 janv. 2008 à 20:49
Bonjour,

Montre-nous ça.
Le code HTML et CSS de la page ou, mieux, son adresse.

--
0
Réponse 2 / 5
simmans Messages postés 6 Date d'inscription mercredi 30 janvier 2008 Statut Membre Dernière intervention 13 janvier 2009 10
30 janv. 2008 à 21:12
Voici la page HTML(index.php compilé): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Nom du site</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

</head>

<body>
<div class="principal">
	<div class="haut">
		<div class="titre">
			<img src="images/tralala_coul_small.gif" alt="Inter-Select" />
		</div>
		<div class="menuhaut">
		<a href="index.php"><img src="images/tralala_coul_mini.gif" height="16" width="16" alt="tralala" /> Accueil</a>  
		
		<a href="histoire.php"><img src="images/tralala_coul_mini.gif" height="16" width="16" alt="tralala" /> Historique</a>   
		
		<a href="equipe.php"><img src="images/tralala_coul_mini.gif" height="16" width="16" alt="tralala" /> Équipe</a>  
 
		<a href="contact.php"><img src="images/tralala_coul_mini.gif" height="16" width="16" alt="tralala" /> Contacter</a>  
		
		<a href="part.php"><img src="images/tralala_coul_mini.gif" height="16" width="16" alt="tralala" /> Partenaires</a>  
		
		</div>
		<div class="coordonnee">
			123, rue Test<br />Keke part, Qc<br />A1A 1A1<br />Tel : (123) 456-7890 Poste 200<br />Sans Frais : 1-800-123-4567<br />Fax : (418) 123-4567<br />RBQ: 1111-1111-11
		</div>
	</div>
	<hr />
	<div class="milieu">

		<div class="menugauche">
		
<div class="dtree">
<script type="text/javascript">d = new dTree('d');d.add(0,-1,'');d.add(1,0,'valeur de test 1','page.php','','');d.add(2,1,'test','page.php?option=test','','');d.add(3,0,'deuxieme valeur','deuxieme.php','','');document.write(d);</script></div>

		
		<br />
		<a href="http://cestuntest">Intranet</a>
		<br />
		<a href="test" >Assistance</a>
		</div>
		
				<div class="contenu">
			<br />
Site en construction


<img src="images/tralala_medium.jpg" alt="tralala" /><br />
123, rue testt<br />
Uneville<br />
A1A 1A1<br />
Téléphone : (123) 456-7890<br />
Sans-frais : (123) 456-7890<br />
Fax : (123) 456-7890<br />
info@test.com
		</div>


<div class="droite">
			<!-- Section de droite -->
		<br />
		<a href="http://lagrandetraversee.fictif.com/">La grande traversée<br />Tralala</a>
		<br />  <br />  
<a href="doc/ctpat_best_practices.pdf">C-TPAT</a>		</div>	
	</div>
</div>
</body>


</html>


Voici le code CSS(sheet.css) : 

/* Style de la page */
body{
	font-size: 10pt ;
	background-color: #DDDDFF;
	color: #0000CC; 
	margin-top: 0px;

}

/* Style des images */
img{
	border-width: 0px; 
}

/* Style des liens hypertextes */
/* Style des liens normales */
a:link{
	color: #0000CC; 
	text-decoration: none;
}

/* Style des liens activés */
a:active{
	color: #0000CC; 
	text-decoration: none; 
}

/* Style des liens visités */
a:visited{
	color: #0000CC; 
	text-decoration: none; 
}

/* Style des liens survolés */
a:hover{
	color: #0000CC;
	text-decoration: underline;
}

/* Style de la balise <strong> */
strong{
	font-size: 14pt;
}

/* Style de la balise <h3> */
H3{
	font-size: 11pt; 
	text-align: center;
}

/* Style du <div> de la classe "cursor" */
.cursor{
	cursor: hand;
}

/* Style de la section visible de la page */
.principal{
	background-color: #DDDDFF;
	margin-left: auto; 
	margin-right: auto; 
	width: 870px;
	border-width: 3;
	border-style: ridge;
	border-color: #AAAAFF;
}

/* Style de la section du haut (titre, menuhaut, coordonnees) */
.haut{
	width: 850px;
	height: 100px;
	margin-top: 3px;
	margin-left: 3px;
}

/* Style de la section du titre */
.titre{
	float: left; 
	clear: left; 
	width: 220px;
}

/* Style du menu du haut */
.menuhaut{
	position: relative;
	top: 50px; 
	float: left; 
	width: 465px; 
}

/* Style de la section des coordonnees */
.coordonnee{
	float: left; 
	width: 160px;
}

/* Style de la section du milieu (menugauche, contenu, droite) */
.milieu{
	width: 850px;
	margin-bottom: 5px;
}

/* Style du menu à gauche */
.menugauche{
	float: left; 
	clear: left;
	width: 220px;
	margin-left: 3px;
}

/* Style de la section du contenu */
.contenu{
	top: 50px; 
	float: left; 
	width: 465px; 
}

/* Style de la section de droite */
.droite{
	float: left; 
	width: 160px;
}



Le Javascript (dtree.js): 
/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö               |
|                                                   |
| This script can be used freely as long as all     |
| copyright messages are intact.                    |
|                                                   |
| Updated: 17.04.2003                               |
|--------------------------------------------------*/

// Node object
function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
	this.id = id;
	this.pid = pid;
	this.name = name;
	this.url = url;
	this.title = title;
	this.target = target;
	this.icon = icon;
	this.iconOpen = iconOpen;
	this._io = open || false;
	this._is = false;
	this._ls = false;
	this._hc = false;
	this._ai = 0;
	this._p;
};

// Tree object
function dTree(objName) {
	this.config = {
		target				: null,
		folderLinks			: false,
		useSelection		: true,
		useCookies			: false,
		useLines			: true,
		useIcons			: true,
		useStatusText		: false,
		closeSameLevel		: false,
		inOrder				: false
	}
	this.icon = {
		root				: 'images/empty.gif',
		folder				: 'images/Inter-Select_coul_mini.gif',
		folderOpen			: 'images/Inter-Select_coul_mini2.gif',
		node				: 'images/Inter-Select_coul_mini.gif',
		empty				: 'images/empty.gif',
		line				: 'images/empty.gif',
		join				: 'images/empty.gif',
		joinBottom			: 'images/empty.gif',
		plus				: 'images/empty.gif',
		plusBottom			: 'images/empty.gif',
		minus				: 'images/empty.gif',
		minusBottom			: 'images/empty.gif',
		nlPlus				: 'images/empty.gif',
		nlMinus				: 'images/empty.gif'
	};
	this.obj = objName;
	this.aNodes = [];
	this.aIndent = [];
	this.root = new Node(-1);
	this.selectedNode = null;
	this.selectedFound = false;
	this.completed = false;
};

// Adds a new node to the node array
dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
	this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
};

// Open/close all nodes
dTree.prototype.openAll = function() {
	this.oAll(true);
};
dTree.prototype.closeAll = function() {
	this.oAll(false);
};

// Outputs the tree to the page
dTree.prototype.toString = function() {
	var str = '<div class="dtree">\n';
	if (document.getElementById) {
		if (this.config.useCookies) this.selectedNode = this.getSelected();
		str += this.addNode(this.root);
	} else str += 'Browser not supported.';
	str += '</div>';
	if (!this.selectedFound) this.selectedNode = null;
	this.completed = true;
	return str;
};

// Creates the tree structure
dTree.prototype.addNode = function(pNode) {
	var str = '';
	var n=0;
	if (this.config.inOrder) n = pNode._ai;
	for (n; n<this.aNodes.length; n++) {
		if (this.aNodes[n].pid == pNode.id) {
			var cn = this.aNodes[n];
			cn._p = pNode;
			cn._ai = n;
			this.setCS(cn);
			if (!cn.target && this.config.target) cn.target = this.config.target;
			if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);
			if (!this.config.folderLinks && cn._hc) cn.url = null;
			if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {
					cn._is = true;
					this.selectedNode = n;
					this.selectedFound = true;
			}
			str += this.node(cn, n);
			if (cn._ls) break;
		}
	}
	return str;
};

// Creates the node icon, url and text
dTree.prototype.node = function(node, nodeId) {
	var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
	if (this.config.useIcons) {
		if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
		if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
		if (this.root.id == node.pid) {
			node.icon = this.icon.root;
			node.iconOpen = this.icon.root;
		}
		str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
	}
	if (node.url) {
		str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';
		if (node.title) str += ' title="' + node.title + '"';
		if (node.target) str += ' target="' + node.target + '"';
		if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
		if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
			str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';
		str += '>';
	}
	else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
		str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
	str += node.name;
	if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
	str += '</div>';
	if (node._hc) {
		str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
		str += this.addNode(node);
		str += '</div>';
	}
	this.aIndent.pop();
	return str;
};

// Adds the empty and line icons
dTree.prototype.indent = function(node, nodeId) {
	var str = '';
	if (this.root.id != node.pid) {
		for (var n=0; n<this.aIndent.length; n++)
			str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';
		(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
		if (node._hc) {
			str += '<b><a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';
			if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;
			else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );
			str += '" alt="" /></a></b>';
		} else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';
	}
	return str;
};

// Checks if a node has any children and if it is the last sibling
dTree.prototype.setCS = function(node) {
	var lastId;
	for (var n=0; n<this.aNodes.length; n++) {
		if (this.aNodes[n].pid == node.id) node._hc = true;
		if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;
	}
	if (lastId==node.id) node._ls = true;
};

// Returns the selected node
dTree.prototype.getSelected = function() {
	var sn = this.getCookie('cs' + this.obj);
	return (sn) ? sn : null;
};

// Highlights the selected node
dTree.prototype.s = function(id) {
	if (!this.config.useSelection) return;
	var cn = this.aNodes[id];
	if (cn._hc && !this.config.folderLinks) return;
	if (this.selectedNode != id) {
		if (this.selectedNode || this.selectedNode==0) {
			eOld = document.getElementById("s" + this.obj + this.selectedNode);
			eOld.className = "node";
		}
		eNew = document.getElementById("s" + this.obj + id);
		eNew.className = "nodeSel";
		this.selectedNode = id;
		if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);
	}
};

// Toggle Open or close
dTree.prototype.o = function(id) {
	var cn = this.aNodes[id];
	this.nodeStatus(!cn._io, id, cn._ls);
	cn._io = !cn._io;
	if (this.config.closeSameLevel) this.closeLevel(cn);
	if (this.config.useCookies) this.updateCookie();
};

// Open or close all nodes
dTree.prototype.oAll = function(status) {
	for (var n=0; n<this.aNodes.length; n++) {
		if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {
			this.nodeStatus(status, n, this.aNodes[n]._ls)
			this.aNodes[n]._io = status;
		}
	}
	if (this.config.useCookies) this.updateCookie();
};

// Opens the tree to a specific node
dTree.prototype.openTo = function(nId, bSelect, bFirst) {
	if (!bFirst) {
		for (var n=0; n<this.aNodes.length; n++) {
			if (this.aNodes[n].id == nId) {
				nId=n;
				break;
			}
		}
	}
	var cn=this.aNodes[nId];
	if (cn.pid==this.root.id || !cn._p) return;
	cn._io = true;
	cn._is = bSelect;
	if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);
	if (this.completed && bSelect) this.s(cn._ai);
	else if (bSelect) this._sn=cn._ai;
	this.openTo(cn._p._ai, false, true);
};

// Closes all nodes on the same level as certain node
dTree.prototype.closeLevel = function(node) {
	for (var n=0; n<this.aNodes.length; n++) {
		if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {
			this.nodeStatus(false, n, this.aNodes[n]._ls);
			this.aNodes[n]._io = false;
			this.closeAllChildren(this.aNodes[n]);
		}
	}
}

// Closes all children of a node
dTree.prototype.closeAllChildren = function(node) {
	for (var n=0; n<this.aNodes.length; n++) {
		if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {
			if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);
			this.aNodes[n]._io = false;
			this.closeAllChildren(this.aNodes[n]);		
		}
	}
}

// Change the status of a node(open or closed)
dTree.prototype.nodeStatus = function(status, id, bottom) {
	eDiv	= document.getElementById('d' + this.obj + id);
	eJoin	= document.getElementById('j' + this.obj + id);
	if (this.config.useIcons) {
		eIcon	= document.getElementById('i' + this.obj + id);
		eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;
	}
	eJoin.src = (this.config.useLines)?
	((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):
	((status)?this.icon.nlMinus:this.icon.nlPlus);
	eDiv.style.display = (status) ? 'block': 'none';
};

// If Push and pop is not implemented by the browser
if (!Array.prototype.push) {
	Array.prototype.push = function array_push() {
		for(var i=0;i<arguments.length;i++)
			this[this.length]=arguments[i];
		return this.length;
	}
};
if (!Array.prototype.pop) {
	Array.prototype.pop = function array_pop() {
		lastElement = this[this.length-1];
		this.length = Math.max(this.length-1,0);
		return lastElement;
	}
};


Et le css du menu (dtree.css): 
/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö               |
|--------------------------------------------------*/

.dtree {
	
	
	color: #0000CC;
	white-space: nowrap;
}
.dtree img {
	border: 0px;
	vertical-align: middle;
}
.dtree a {
	color: #0000CC;
	text-decoration: none;
	
}
.dtree a.node, .dtree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
	color: #0000CC;
	text-decoration: underline;
	
}
.dtree a.nodeSel {
	background-color: #c0d2ec;
}
.dtree .clip {
	overflow: hidden;
}


J'ai changé des informations pour la confidentialité. Avec tout cela, vous etes supposé en avoir assez pour me trouver la solution.
0
Réponse 3 / 5
simmans Messages postés 6 Date d'inscription mercredi 30 janvier 2008 Statut Membre Dernière intervention 13 janvier 2009 10
30 janv. 2008 à 22:43
J'ai trouvé une solution, j'ai "simulé" une table grâce aux paramêtre display: table; en css sur ma première couche. Je peux toujours pas expliquer le problème, mais j'ai réussi à l'arranger.
0
Réponse 4 / 5
Pedro
30 janv. 2008 à 22:50
Je dis ça sans avoir testé, mais si ça se trouve, avec width en auto sur le principal ça résoudrait les problèmes ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Pedro
30 janv. 2008 à 22:52
Je voulais dire height en auto, et width en %. Désolé pour la coquille...
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Tableau suivi cadres 2023 204 jours travaillés
UFAL75 -
PHILOU10120 -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
probleme sommet
urgent -
Raymond PENTIER -

2 réponses
Problème de téléchargement de firefox mozilla
Source2Vie18 -
fabul -

1 réponse