3 pièce(s) jointe(s)
Html/css centrer en absolute
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:
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:
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
