[Résolue] Structure d'une fenêtre (faux popup)

Bonjour,

j'ai une structure basique que je transforme avec un javascript non intrusif en fenêtre (faux popup). Tout marche très bien, le truc c'est que je souhaite que la transformation effectué soit bien construite au niveau du xhtml.

J'aimerai des avis pour faire au mieu.

Merci d'avance

voici ma fenêtre basique (sans transformation):

<div class="fenetre">
	<h1 class="fenetre_titre">mon titre</h1>
	<div class="fenetre_contenu">
		<p>
			mon contenu
		</p>
	</div>
</div>

voici ma fenêtre transformé (est ce que c'est la meilleur solution?):

<div class="fenetre">
	<h1 class="fenetre_titre">mon titre</h1>
	<ul>
		<li><a href="#">réduire</a></li>
		<li><a href="#">fermer</a></li>
	</ul>
	<div class="fenetre_contenu">
		<p>
			mon contenu
		</p>
	</div>
</div>

Modifié par Francois44 (15 Dec 2006 - 16:31)

Bonjour,

Ca a l'air plutôt propre.

Par contre, l'utilisation de class (fenetre_titre, fenetre_contenu) à l'intérieur de ta <div> principale est redondante. Tu devrais pouvoir te contenter de la classe "fenetre". De plus, est-ce que la <div> fenetre_contenu contient systématiquement un seul paragraphe ? Si c'est le cas, elle est sans doute superflue.

Remarque subsidiaire : attention à l'utilisation de <h1>. Est-ce que c'est le titre principal de ta page ?
Modifié par Eldebaran (15 Dec 2006 - 13:16)

Merci pour ta réponse,

en fait, le contenu est très variable et peu être constitué de tableau, de paragraphe(s) etc...

De plus, sur certaine fenêtre, j'utilise la technique de Stu Nicholls pour réaliser des coin arrondis ou en 45°.

j'ai du mal à voir comment je peut me passer des classes "fenetre_titre" et "fenetre_contenu". Pourrais tu m'en dire plus?

Pour le titre, j'adapte le "<hn></hn>" au besoin.

Voici un example de structure plus élaboré avant transformation par Javascript

<div class="fenetre">
			<span class="angle_pixhaut1"></span>
			<span class="angle_pixhaut2"></span>
			<span class="angle_pixhaut3"></span>
			<span class="angle_pixhaut4"></span>
			<span class="angle_pixhaut5"></span>
			
			<h1 class="fenetre_titre">mon titre</h1>
			<div class="fenetre_contenu">
				<p>
					mon contenu
				</p>
				<h2>blablabla</h2>
				<p>
				un autre contenu
				</p>
			</div>
			
			<span class="angle_pixbas1"></span>
			<span class="angle_pixbas2"></span>
			<span class="angle_pixbas3"></span>
			<span class="angle_pixbas4"></span>
			<span class="angle_pixbas5"></span>
		</div>

et le css lié:

.fenetre {
	position: static;
	display: block;
	z-index: 5;
	margin: auto;
	top: 2.5em;
}
.fenetre_titre {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	background: #677f96 url('images/titre_effet.gif') bottom repeat-x;
	font-size: 1em;
	height: 1.8em;
	text-align: center;
	font-weight: bold;
	color: #fff;
	padding: 0;
	margin: 0;
}
.fenetre_contenu {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 5px;
	margin: 0 auto 0 auto;
	background: #fff;
	color: #000;
}
/* --------------------------------------------------------
EFFET DES ANGLES ARRONDIS SANS IMAGE
-------------------------------------------------------- */
.angle_pixhaut1, .angle_pixhaut2, .angle_pixhaut3, .angle_pixhaut4, .angle_pixhaut5, .angle_pixbas1, .angle_pixbas2, .angle_pixbas3, .angle_pixbas4, .angle_pixbas5 {
	display: block;
	overflow: hidden;
	height: 1px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	margin: 0;
	padding: 0;
	background: #677f96;
	color: #eeeeee;
}
.angle_pixhaut1 {
	margin: 0 5px;
	background: #000;
}
.angle_pixhaut2 {
	margin: 0 4px;
}
.angle_pixhaut3 {
	margin:0 3px;
}
.angle_pixhaut4 {
	margin: 0 2px;
}
.angle_pixhaut5 {
	margin: 0 1px;
}
.angle_pixbas1 {
	margin: 0 1px;
	background: #fff;
}
.angle_pixbas2 {
	margin: 0 2px;
	background: #fff;
}
.angle_pixbas3 {
	margin: 0 3px;
	background: #fff;
}
.angle_pixbas4 {
	margin: 0 4px;
	background: #fff;
}
.angle_pixbas5 {
	margin: 0 5px;
	background: #000;
}

Modifié par Francois44 (15 Dec 2006 - 13:29)

Francois44 a écrit :
j'ai du mal à voir comment je peut me passer des classes "fenetre_titre" et "fenetre_contenu". Pourrais tu m'en dire plus?

Par exemple, si tu enlèves la classe du h1, il te suffira de remplacer ".fenetre_contenu" par ".fenetre h1" dans ton code CSS.

Ok, merci pour ton avis et tes conseils