Html/css centrer en absolute

**im-rainmaker** · 18/11/2008, 21h45

Bonsoir,

Voila je code un site pour une amie, un site très simple mais j'ai un probleme, je veux que le centre sois fixe et que les coté soit extensible, lorsque je met mon centre en position absolute dans mon css ca fonctionne bien apart que l'image n'est pas centré, mais je ne sais pas trop comment faire pour la centrer.

Si vous pouviez m'aider ce serais super !

Code html :

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
<html>
	<head>
	<link href="favicon.ico" rel="icon" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<title>Bienvenue chez Tailleur Jean</title>
	</head>
	<body>		
		<h1></h1>
		<p>
 
		</p>
		<div id="lien">
		<ul>
			<a href="clavier.html"><li></li></a>
			<a href="souris.html"><li></li></a>
			<a href="joystick.html"><li></li></a>
			<a href="tablette.html"><li><br></li></a>
			<a href="trackball.html"><li></li></a>
			<a href="gadget.html"><li></li></a>
		</ul>
		<div id="fond"><img src="fond.jpg" width="991px" height="1164px"></div>
		<center><img src="bandeg.jpg" width="50%" height="1164px"><img src="banded.jpg" width="50%" height="1164px"></center>
 
 
	</body>
</html>

ainsi que le code css :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#fond {
position: absolute;
margin-left: auto;
margin-right: auto;
width : 991px;
height : 1164px;	
}
#acceuil {
position: absolute;
left: 396px;
top: 123px;
width : 106px;
height : 41px;	
}
#materiel {
position: absolute;
left: 516px;
top: 123px;
width : 106px;
height : 41px;	
}
#image {
position: absolute;
left: 636px;
top: 123px;
width : 106px;
height : 41px;	
}
#contact {
position: absolute;
left: 756px;
top: 123px;
width : 106px;
height : 41px;	
}
#suivant {
position: absolute;
left: 666px;
top: 771px;
width : 114px;
height : 58px;	
}
#precedent {
position: absolute;
left: 546px;
top: 771px;
width : 114px;
height : 58px;	
}
p {
position: absolute;
text-align: justify;
font-size: 75%;
overflow: auto;
padding: 8px;
left: 520px;
top: 216px;
width : 396px;
height : 500px;	
}
h1 {
position: absolute;
color: #424242;
text-align: center;
left: 528px;
top: 180px;
width : 396px;
height : 543px;	
}
.titre{
text-decoration: underline;
font-weight: bolder;
}
.titreimg{
font-weight: 900;
}
ul {
position: absolute;
color: #424242;
font-size: 90%;
left: 313px;
right: -900;
top: 245px;
width : 96px;
height : 180px;	
}
a{
color:#424242;
text-decoration:underline;
}
a:hover{
color:#3c79a1;
}
img.centered {
   display: block;
   margin-left: auto;
   margin-right: auto }

Les images utilisé sont en pièce jointe si vous désirez essayer.

Merci d'avance.

Cordialement, Bazin Jérémy

**GihefBey** · 18/11/2008, 22h03

Bonjour,

Sans plus de précisions, je suppose qu'il s'agit de #fond
De toute façon le principe est le même.

Essaye

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#fond {
  position: absolute;
/*  margin-left: auto;
  margin-right: auto;*/
  width : 991px;
  height : 1164px;
  left : 50%;
  /* la moitié de la largeur totale  */
  margin-left : -495px;
  /* la moitié négative, si c'est possible, de la largeur du bloc  */
  }

Sinon, donne l'adresse de la page.
Ou précise.

++
Tu peux te passer de <center>

Mets les <a> dans les <li>

Code html :

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

1
2
<li><a href="clavier.html"></a></li>

Après la relecture, j'ai ajouté le </a>

-

**im-rainmaker** · 24/11/2008, 10h37

Merci ça marche parfaitement !

La je ne suis pas chez moi, mais ce soir je remettrais un sujet car je n'arrive pas a placer le texte comme je le voudrais, j'ai utilisé ta methode, mais lorsque je change de résolution ce n'est plus placé ou je le souhaiterais. Je te remercie et je met ce sujet en résolus.

Html/css centrer en absolute

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager