problème avec css

Version imprimable

2 pièce(s) jointe(s)

problème avec css

bonjour je veux afficher sur mon le login du connecté et le nombre de connecté j arrive a le faire mais j ai un problme de affichage du a mon css

voici un exemple de l'affichage au debut tout fonctionner bien apres un petit retouche je ne comprend plus

apres quelques retouche ça ne fonctionne plus

voici mes code html et css
html

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<div id="haut" >
					<ul id="usercontrol">
							<li><a id="logout" href="logout.php">Logout : </a></li>
							<li id="reslogout"><b> <?php  echo $_SESSION['identifiant'];?> </b></li>
							<li id="idconnecte"><b >nombre de connecte:</b></li>
							<li id="idresconn"><b><?php echo $_SESSION['nbre_connectes'] ?></b></li>
					</ul>
				</div>

css

Code:

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
 
div#haut{
	    width:1000px;
	     height: auto;
	     margin: 2px;
 	    margin-left:150px;
 	   background-color: #EB800E;
	}
div#haut ul#usercontrol {
		position: relative;
		left:0px;
		width: 1000px;
		height: 20px;
		margin-top: 2px;
		margin-bottom: 2px;
		list-style: none;
	}
 
 
	div#haut ul#usercontrol li a#logout{
	     display: inline-table;
		color: #BACB00;
		text-decoration: underline;
 
	}
div#haut ul#usercontrol li#reslogout{
 
		color: #BACB00;
  	    text-decoration: none;
 
}
 
	div#haut ul#usercontrol li#idconnecte{
	    margin-left:660px;
		color: #BACB00;
		text-decoration: underline;
	}
 
	div#haut ul#usercontrol li#idresconn{
		display: inline-table;	
	    margin-left:5px;
		color:#BACB00;
		text-decoration: none;	
	}

merci d avance j ai joint pour voir mon probleme avec les deux cas

01/08/2012, 15h40
NoSmoking
Bonjour,
la construction, pour affichage de tes éléments me paraît hasardeuse, l'utilisation de liste pour ce type d'affichage n'est pas forcément la mieux adaptée.

Essaies en mettant dans le CSS
Code:

1 2 3 ul li{ display:inline; }
Citation:

apres quelques retouche ça ne fonctionne plus

il eut été bon de savoir lesquelles!

Bonjour.

Ca "devrait" être mieux

Code:

1
2
3
4
5
6
7
8
<div id="haut" >
					<div id="usercontrol">
							<a id="logout" href="logout.php">Logout : </a>
							<b id="reslogout"> <?php  echo $_SESSION['identifiant'];?></b>
							<b id="idconnecte">nombre de connecte:</b>
							<b id="idresconn"><?php echo $_SESSION['nbre_connectes'] ?></b>
					</div>
				</div>

Code:

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
 
div#haut{
	    width:1000px;
	     height: auto;
	     margin: 2px;
 	    margin-left:150px;
 	   background-color: #EB800E;
	}
div#haut div#usercontrol {
		position: relative;
		left:0px;
		width: 1000px;
		height: 20px;
		margin-top: 2px;
		margin-bottom: 2px;
		list-style: none;
	}
 
 
	div#haut div#usercontrol b a#logout{
	     display: inline-table;
		color: #BACB00;
		text-decoration: underline;
 
	}
div#haut div#usercontrol b#reslogout{
 
		color: #BACB00;
  	    text-decoration: none;
 
}
 
	div#haut div#usercontrol b#idconnecte{
	    margin-left:660px;
		color: #BACB00;
		text-decoration: underline;
	}
 
	div#haut div#usercontrol b#idresconn{
		display: inline-table;	
	    margin-left:5px;
		color:#BACB00;
		text-decoration: none;	
	}

Par contre, tu devrais utiliser des % au lieu des px, pour mieux s'adapter aux écrans. Pareil, la position absolue c'est pas terrible.
Sinon tu peux fonctionner en table (tr,td), les listes n'ont pas d'intérêt ici, tu y verras plus clair, et ce sera plus structuré.

on peut faire simplement

Code:

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>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#haut{
  color:#BACB00;
  overflow:hidden;
  padding:10px;
  margin: 5px;
  background-color:#EB800E;
}
#haut a{
  color: #BACB00;
}
#gauche{
  float:left;
}
#droite{
  float:right;
}
</style>
</head>
<body>
<div id="haut" >
  <div id="gauche">
    <a href="logout.php">Logout : </a>
    <b> UnTel</b>
  </div>
  <div id="droite">
  <b >nombre de connecte: 12</b>
  </div>
</div>
</body>
</html>

02/08/2012, 14h29
diengkals

désolé pour le retard de mon retour merci bcp ça m a beaucoup aider