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.

CSS Séparateur dynamique

CSS

Vue hybride

Discussions similaires

Partager

Partager