[CSS][HTML]Besoin d'aide

Version imprimable

[Résolu][CSS][HTML]Besoin d'aide

Bonjour,

Je voudrais arriver à mettre des liens sur une image comme sur ce site :
http://rbox.free.fr/kit/vieuxkit/index.html mais j'ai beau essayer je n'y arrive pas! quelqu'un pourrait-il m'aider svp.
Voici l'adresse de ma page:
http://briannoel.ifrance.com/h2o/pages/site.htm comme vous pouvez lz voir, le lien acceuil est en dessous de l'image. comment faire pour le placer dessus :?:
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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Document sans nom</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header1"> <img src="../images/h2o5_01.jpg" alt="h2o" id="bannière"/> </div> <div id="header2"><img src="../images/h2o5_02.jpg" alt="rubriques"/img> <div class="rubriques">::: <a href="">Accueil</a><br> </div> </div> </div> </body> </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 27 28 29 30 31 32 33 34 35 36 37 body { margin: 0; font-family: verdana, arial, sans-serif; font-size: 75%; text-align:center; } .header1 { width:790px; background-image: url("../images/h2o5_01.jpg"); border: 1px solid #000000; } .header2 { background-image: url("../images/h2o5_02.jpg"); background-color:#CCCCCC; width:790px; height:25px; } .rubriques { float: inherit; margin-right:5px; margin-top: 5px; } .rubriques a { font-size: 18px; font-weight: blod; color: #CCCCCC; text-decoration:none; margin-left: 15px; }
Merci a tout ceux qui pourron m'aider
Amicalement,
Brian

02/09/2005, 12h21
Perceval

Bah tu as mis ton bloc "accueil" en dessous... c'est normal qu'il soit en dessous....
Et puis le placer au dessus.... Mais au dessus de quoi ?
02/09/2005, 12h24
Brian

Et je dois faire quoi pour le mettre sur le bandeau gris.

(je suis débutant :oops: )

je viens juste de comprendre.... désolé... LoL

Bah il suffit de regarder la CSS :wink:
Code:

1 2 3 4 5 6 .leblocmenuheader { background-image: url('images/img07.jpg'); width: 760px; height: 17px; border-top: 1px solid #000000; }

02/09/2005, 12h33
Perceval
Il faudrait que tu fasses
Code:

1 2 3 4 <div id="header1"> <img src="../images/h2o5_01.jpg" alt="h2o" id="bannière"/> <div class="rubriques">::: <a href="">Accueil</a></div> </div>
et dans ta CSS un truc du style (j'ai fait ca à l'arrache, je vais aller manger)
Code:

1 2 3 4 .rubrique { background-image:url(images/h2o5_02.jpg); background-repeat:repeat-x; }
Mais en regardant les sources, tu devrais ptête comprendre.

En fait, il a div global pour le menu découpé en 2. Un pour la bannière et l'autre pour le menu. Mais pour le bloc menu, il a juste mis un background en fond. C'est ce qui fait qu'il peut mette sont menu sur une image.
02/09/2005, 12h45
Brian

Merci

mais j'ai essayer et le seul truc qui a changer, c'est que "acceuil" s'est retrouver au dessus du bandeau mais pas sur le bandeau :arf:
02/09/2005, 12h52
trattos

la balise <area shape="rect" /> permet de placer un lien sur une image à n'importe quel endroit de celle ci, il suffit juste de rajouter l'attribut coords="" avec les coordonées de l'emplacement du lien!
Un editeur comme Dreamweaver le fait sans problême!
02/09/2005, 14h00
Perceval

Mais avec cette solution, ca t'oblige à "écrire" directement sur l'image alors que ce qu'il souhaite faire, c'est mettre des liens dans un div et puis mettre un background derrrière. Si il souhaite faire pareil que sur le site mis en exemple.
02/09/2005, 14h03
Brian

ok merci a tous j'y suis enfin arriver!
02/09/2005, 16h06
Perceval

Juste une remarque, c'est décalé sur Firefox.....

Voila, j'ai presque terminé ma page d'accueil mais les images se supperposent voila a quoi cela ressemble http://briannoel.ifrance.com/h2o/pages/site.htm
alors que ca devrai plutot ressembler a cela http://rbox.free.fr/kit/vieuxkit/index.html
Lorsque je suis en mode creation sur dreamwever, la page d'acceuil est comme je le voudrai mai sur ie c'est pas la mm chose.
Pouvez vous m'aider svp

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
 
/* CSS Document */
 
body {
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 75%;
text-align:center;
}
 
 
.header1 {
width:790px;
background-image: url(../images/h2o5_01.jpg);
border: 1px solid #000000;
 }	
 
.header2 {
background-image: url(../images/h2o5_02.jpg);
width:790px;
height:25px;
color: #333333;
font-size: 17px;
text-decoration:none;
border: 1px solid #000000;
}
 
.menu {
background-image: url(../images/h2o_08.jpg);
width: 112px;
height: 21px;
color: #333333;
font-size: 17px;
text-decoration:none;
margin:10px;
margin-left: -340px;
border: 1px solid #000000;
margin-top: 0px;
border: 1px solid #000000;
}
 
 
.contenu {
background-image: url(../images/h2o_10.gif);
width: 667px;
height: 21px;
color: #333333;
font-size: 17px;
text-decoration:none;
margin-left: 62px;
margin-top: -34px;
text-align: center;
margin: 10px;
border: 1px solid #000000;
}
 
.menu2 {
background-image: url(../images/h2o_11.gif);
width: 112px;
height: 612px;
font-size: 14px;
text-decoration:none;
text-align: center;
margin-left: -340px;
margin: -31px;
border: 1px solid #000000;
}
 
.contenu2 {
background-image: url(../images/h2o_12.gif);
width: 667px;
height: 612px;
text-decoration:none;
font-size: 10px;
text-align: left;
margin-left: 62px;
margin-top:-585px;
border: 1px solid #000000;
}
 
.bandeau {
background-image: url(../images/h2o5_02.jpg);
width:790px;
height:21px;
color: #333333;
font-size: 10px;
text-decoration:none;
border: 1px solid #000000;
}

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
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #168A13;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style></head>
 
<body>
 
<div id="header1">
<img src="../images/h2o5_01.jpg" alt="h2o" width="790" height="120" class="header1" id="bannière"/>
</div> 
 
 
<div id="header2"></div>
<div class="header2"><a href="site.htm">::Acceuil:: </a>::Lien2:: ::Lien3:: ::Lien4:: ::Lien5:: ::Lien6:: ::Lien7:: ::Lien8:: ::Lien9:: </div>
 
 
<div id="menu"></div>
<div class="menu">Menu</div>
 
 
<div id="contenu"></div>
<div class="contenu">Titre</div>
 
 
<div id="menu2"></div>
<div class="menu2">::Acceuil:: ::Lien1::  </div>
 
 
<div id="contenu2"></div>
<div class="contenu2">Le texte ici bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
 
 
<div id="bandeau"></div>
<div class="bandeau">::Copyright <a href="../images/msn.com">Brian Noel</a> 2005 Tous droits réservés::</div>
 
</body>
</html>

02/09/2005, 18h47
spirou

:salut:

où sont les identifiants dans ton css ?
Attention à ne pas confondre identifiants et classes.

Je serais toi, je placerais tout le contenu de ta page dans un bloc conteneur, ce qui facilite le travail.
03/09/2005, 09h20
arfy

désolé mais je n'ai pas vraiment vu quel était le soucis :?
03/09/2005, 13h56
Brian

personne ne peut m'aider :?:

Salut !!

Comme je ne savais pas quoi faire, je me suis permis d'enregistrer ta page afin d'essayer de résoudre ton problème, j'ai modifié pratiquement tout....

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML STRICT 4.01 //EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>
      Document sans nom
    </title>
    <link href="site_fichiers/styles.css" rel="stylesheet" type="text/css">
  </head>
 
  <body>
 
  <div id="container">  <!-- contient tout les elements de la page -->
 
    <div id="header">   <!-- entete -->
    </div>
 
    <ul id="menu">  <!-- le menu pricipal -->
      <li><a href="http://briannoel.ifrance.com/h2o/pages/site.htm">::Acceuil::</a></li>
      <li><a href="#">::Lien2::</a></li>
      <li><a href="#">::Lien3::</a></li>
      <li><a href="#">::Lien4::</a></li>
      <li><a href="#">::Lien5::</a></li>
      <li><a href="#">::Lien6::</a></li>
      <li><a href="#">::Lien7::</a></li>
      <li><a href="#">::Lien8::</a></li>
      <li><a href="#">::Lien9::</a></li>
    </ul>
 
 
    <div id="titre">  <!-- le titre de ta page -->
      Titre
    </div>
 
    <div id="corps">   <!-- le corps ou sont contenu  les deux colonnes -->
 
      <div id="colonnegauche"> <!-- menu gauche de la page -->
        <ul>
          <li><a href="#">::Acceuil::</a></li>
          <li><a href="#">::Lien1::</a></li>
          <li><a href="#">::Lien2::</a></li>
          <li><a href="#">::Lien3::</a></li>
          <li><a href="#">::Lien4::</a></li>
          <li><a href="#">::Lien5::</a></li>
          <li><a href="#">::Lien6::</a></li>
          <li><a href="#">::Lien7::</a></li>
          <li><a href="#">::Etc...::</a></li>
        </ul>
      </div>
 
      <div id="colonnedroite">    <!-- colonne princpale -->
        <p>Le texte ici bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
        bla bla bla bla bla bla bla bla bla bla bla bla bla bla ......
        </p>
      </div>
 
    </div>  <!-- fin du conteneur corps -->
 
    <div id="pied">
      ::Copyright
      <a href="#">Brian Noel</a>
      2005 Tous droits réservés::
    </div>
 
    </div>    <!-- fermeture du div container -->
  </body>
</html>

Le 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
/* CSS Document */
 
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 15px 0;   /* marge superieure et inferieure du container */
	font-family: verdana, arial, sans-serif;
	font-size: 18px;
	background-color: #ffffcc;
}
 
 
#container{   /* le conteneur de tout les elements de la page */
	width: 790px;
	margin-left: -395px;   /* moitie de la largeur, ceci pour centrer le container */
	left: 50%;     /* position par rapport a la gauche du body */
	border: 1px solid #000;
	position: relative;
}
 
#header{    /* entete de la page */
	width: 100%;
	height: 120px;
	background-image: url(../images/h2o5_01.jpg);
}
 
/* le menu pricipal (en haut) **********************************************************/
 
#menu{
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;    /* afin d'eliminer toute marge interieure */
	background-image: url(../images/h2o5_02.jpg);
	list-style-type: none;    /* afin d'enlever les puces */
	font-size: 0.8em;
}
 
#menu li{
  float: left;  /* afin que les elements de la liste s'aligne et ne sorte pas de leur conteneur #menu */
  margin: 0 0 0 10px;
  padding: 0;
}
 
#menu a{
  margin: 0 5px 0 0;  /* marge droite entre chaque element <a> */
  padding: 0 2px;   /* marge interieure droite et gauche des elements <a> */
  line-height: 24px;    /* pour centrer le texte verticalement */
  text-align: center;
  text-decoration: none;    /* enleve le soulignement */
  color: #333333;
}
 
#menu a:hover{
  color: #00f;
}
 
/* fin du menu pricipal **********************************************************/
 
#titre{     /* titre sous le menu principal */
  width: 100%;
  height: 1.5em;
  background-color: #ddd;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
  color: #333333;
}
 
#corps{     /* conteneur qui englobe les deux colonnes */
    width: 100%;
    height: 612px;
    margin: 0;
    padding: 0;
    position: relative;  /* pour que la position absolute de la colonne gauche s'applique a ce conteneur */
}
 
/* menu gauche de la page *********************************************************/
 
#colonnegauche{    
    width: 112px;
    height: 612px;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
  	background-image: url(../images/h2o_11.gif);
  	border-right: 1px solid #000;
  	position: absolute;
}
 
#colonnegauche ul{
    width: 100px;
    margin: 6px;
    padding: 0;
    list-style-type: none;
}
 
#colonnegauche li{
    margin: 0;
    padding: 0;
}
 
#colonnegauche a{
    display: block;   /* afin de pouvoir modifier les elements <a> */
    width: 100%;
    height: 1.2em;
    margin: 0.2em 0 0 0;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.2em;
    text-align: center;
    color: #666666;
    text-decoration: none;
}
 
#colonnegauche a:hover{
    font-weight: 700;
    color: #000;
}
 
/* fin de la colonne gauche ********************************************************/
 
#colonnedroite{
    height: 612px;    /* pas de largeur a mettre */
    margin-left: 113px;   /* largeur colonne gauche + sa bordure */
    padding: 0;   
    background-color: #fff;
}
 
#pied{
	background-image: url(../images/h2o5_02.jpg);
	width: 790px;
	height: 21px;
	line-height: 21px;
	color: #333333;
	font-size: 0.6em;
	text-decoration: none;
	border-top: 1px solid #000;
}
 
p{
  margin: 0;
  padding: 15px;
}

Il reste quelques trucs à bricoler, mais je pense que dans l'ensemble, c'est à peu près ce que tu voulais obtenir.