CSS Séparateur dynamique

**Fabthebug** · 10/09/2009, 13h49

Bonjour,

J'essaie actuellement de faire un petit popup dynamique, qui s'étend avec le titre, et je cherche a faire un séparateur de la largeur du popup.
Chose faite sous FF, marche nickel... alors quoi me direz vous ? Et bien IE bien sûr !

Sous IE, pas de séparateur. Si quelqu'un pouvait m'aider, merci.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
 
	<head>
		<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
		<script type="text/javascript" src="functions.js" ></script>
	</head>
 
	<body>
 
		<div class="div1" >
 
			<div class="div2" >
				<h3>
					<div class="tableauInvisible">
						<span id="menuTitle">
							Popup Title
						</span>
						<span>
							<a><img style="padding-left:10px" src="close.png"></a>
						</span>
					</div>
				</h3>
				<ul>
					<li id="viewMode" >Menu1</li>
					<li id="editMode" >Menu 2</li>
					<hr id="separator" ></hr>
					<li id="editMode" >Menu3...</li>
				</ul>
			</div>
 
		</div>
 
	</body>
 
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
h3 {
	font-size: 10px;
	background-color: #6600CC;
	border-top:1px solid #564b47;
	border-bottom:1px solid #564b47;
	padding: 3px 3px 3px 3px;
	margin:0px;
	color: black;
}
 
h3 label {
	float: left;
	text-transform: none;
	color: #000000;
}
 
h3 img {
	padding-left: 10px;
	width: 10px;
}
 
.tableauInvisible table, .tableauInvisible tr, .tableauInvisible td, .tableauInvisible caption {
	width:100%;
	min-width: 30px;
	border-color:white;
	border-style:none;
	border-width:0px;
	background:none;
	font-size: 90%;
}
 
.div1{
	padding: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
}
 
.div2{
	position: absolute;
	width: auto;
	border: 1px solid black;
	background: #6666CC;
	font-size: 9px;
	font-family: Verdana,Arial,SunSans-Regular,Sans-Serif;
	text-align: left;
	color: white;
}
 
.div2 ul li{
	width:auto;
	padding: 3px 3px 3px 3px;
	height:10px;
}
 
.div2 li:hover{
	color:black;
}
 
dl, dt, dd, ul, li, hr {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
 
#separator {
	background-color: black;
	width: auto;
	padding: 0;
	height: 1px;
}
 
#separator:hover {}

J'ai essayé pas mal de trucs, et j'avoue être à court d'idée... ah si tout le monde pouvait être sous FF

Mais comme c'est loin d'être le cas, je m'en remets à vous.

Merci et bonne journée

EDIT : Pour le close.png mettez n'importe quoi ou virez le, désolé.

**Bisûnûrs** · 10/09/2009, 14h32

Envoyé par Fabthebug

ah si tout le monde pouvait être sous FF

Ah, si tout le monde pouvait coder correctement.

Plusieurs erreurs dans ton code :

1. L'élément <hr> est un élément auto-fermant, il n'a pas de deuxième balise.
2. Un élément <ul> ne prend comme enfant direct que des <li>, que fait ton <hr> en plein milieu ?

**Fabthebug** · 10/09/2009, 15h00

Ah, si tout le monde pouvait coder correctement.

1. L'élément <hr> est un élément auto-fermant, il n'a pas de deuxième balise.

Hehe, je ne suis pas codeur web habituellement

2. Un élément <ul> ne prend comme enfant direct que des <li>, que fait ton <hr> en plein milieu ?

C'est un developpeur web qui me l'a conseillé pour remédier au problème, bien que ça ne fonctionne pas

**Bisûnûrs** · 10/09/2009, 15h05

Envoyé par Fabthebug

C'est un developpeur web qui me l'a conseillé

Un mauvais alors, ou pas consciencieux.

Soit tu mets ton <hr> dans un le <li> précédent, soit tu gères la séparation autrement, en mettant une bordure basse en CSS au <li> précédent par exemple.

Il ne faut pas non plus oublier ce que pourrait être ta page sans CSS. Est-ce une séparation physique du contenu que tu souhaites faire ou une séparation graphique ? Dans le premier cas le <hr> est indiqué (mais une séparation physique du contenu au milieu d'une liste, j'y crois moyen), dans le deuxième cas le mieux est la stylisation en CSS.

**Fabthebug** · 10/09/2009, 15h17

A l'origine j'avais fait ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<ul>
	<li id="viewMode" >Menu1</li>
	<li id="editMode" >Menu 2</li>
	<li id="separator" ></li>
	<li id="editMode" >Menu3...</li>
</ul>

Avec un background noir et un height de 1px (je l'ai laisse dans le css). Ca marche impeccablement avec FF mais pas avec IE.

**Bisûnûrs** · 10/09/2009, 15h23

Envoyé par Fabthebug

Ca marche impeccablement avec FF mais pas avec IE.

Sur quelle version de IE ? Je ne vois aucun problème personnellement. Mais ce n'est toujours pas la meilleure solution, puisqu'en désactivant la CSS tu as élément de ta liste vide.

**Fabthebug** · 10/09/2009, 15h25

Envoyé par Bisûnûrs

Sur quelle version de IE ? Je ne vois aucun problème personnellement. Mais ce n'est toujours pas la meilleure solution, puisqu'en désactivant la CSS tu as élément de ta liste vide.

Je code pour IE7 pour le moment, car il y a encore pas mal de personnes dessus. Ce serait une erreur de les laisser de côté. Je t'invite à utiliser la compatibilité dans le navigateur pour voir le résultat.

**Bisûnûrs** · 10/09/2009, 15h28

Comme je te l'ai dit, je n'ai vu aucun problème. IE7 compris.

Si tu as une page en ligne de ton problème ça sera plus facile. Et n'oublie pas mes recommandations deux posts au-dessus.

**Fabthebug** · 10/09/2009, 15h38

Envoyé par Bisûnûrs

Comme je te l'ai dit, je n'ai vu aucun problème. IE7 compris.

Etrange... mon patron aussi a "l'erreur"

Si tu as une page en ligne de ton problème ça sera plus facile. Et n'oublie pas mes recommandations deux posts au-dessus.

Malheureusement, c'est sur un backoffice avec mot de passe, tu comprends donc que je ne peux pas te montrer ce problème en ligne

. De toute façon en local ça donne la même chose.
Pour ce qui est de mettre une bordure sur l'élément du dessus, impossible car certains menus ne sont pas affichés en fonction des droits.

**Fabthebug** · 10/09/2009, 15h51

Bon admettons avec ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<ul>
	<li id="viewMode" >Menu1</li>
	<li id="editMode" >Menu 2</li>
</ul>
<hr id="separator" />
<ul>
	<li id="editMode" >Menu3...</li>
</ul>

Ca a l'air d'être plus propre, mais c'est toujours pareille chez moi.

**Bisûnûrs** · 10/09/2009, 16h34

As-tu essayé de faire un copié/collé du code que tu nous proposes dans une autre page que ton backoffice complet ? Parce que ce code n'a aucun problème, et ce depuis le début.

Donc mon avis c'est que tu as un style (ou autre chose) que tu ne nous montres pas qui vient perturber l'affichage de ta séparation.

**Fabthebug** · 10/09/2009, 18h23

Envoyé par Bisûnûrs

As-tu essayé de faire un copié/collé du code que tu nous proposes dans une autre page que ton backoffice complet ? Parce que ce code n'a aucun problème, et ce depuis le début.

Donc mon avis c'est que tu as un style (ou autre chose) que tu ne nous montres pas qui vient perturber l'affichage de ta séparation.

En fait ce code est un sample que j'ai fait à partir du backoffice. Bien sûr que je l'ai testé. C'est même la dessus que j'ai testé pas mal de trucs CSS pour essayer d'obtenir un bon résultat.
Ce code a un problème certain, mais l'émulation IE7 via IE8 est peut être simplement pourrie...
J'ai envoyé mon code à un pote pour qu'il test, si quelqu'un test et que ça ne fonctionne pas, j'aimerais qu'il me le dise que je sois sûr. Si ça n'est que chez moi, et bien tant mieux après tout !

**rivsc** · 11/09/2009, 17h01

Bonjour,

Et pourquoi pas ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul>
	<li id="viewMode">Menu1</li>
	<li id="editMode">Menu 2</li>
	<li id="separator"><hr /></li>
	<li id="editMode">Menu3...</li>
</ul>

C'est pas très juste d'un point de vue sémantique mais bon...
Sinon entre les <div> et les <span> il faut des <p>...

De même <h3> ne sert pas à "grossir" le texte mais informe d'un titre (balise sémantique).

**Fabthebug** · 25/09/2009, 12h36

Envoyé par rivsc

Bonjour,

Et pourquoi pas ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul>
	<li id="viewMode">Menu1</li>
	<li id="editMode">Menu 2</li>
	<li id="separator"><hr /></li>
	<li id="editMode">Menu3...</li>
</ul>

C'est pas très juste d'un point de vue sémantique mais bon...
Sinon entre les <div> et les <span> il faut des <p>...

De même <h3> ne sert pas à "grossir" le texte mais informe d'un titre (balise sémantique).

J'ai abandonné l'espoir sur IE 7.... mais un sincère merci pour vos aides rapides.

CSS Séparateur dynamique

CSS

Discussions similaires

Partager

Partager