Bonjour,

Il m'est demandé de faire une page HTML selon le modèle suivant :

http://athe.pagesperso-orange.fr/maquette.jpg

Le disque violet est un logo en PNG, la barre verte un menu horizontal.

L'image en fond d'écran ne pose aucun problème à être posée.

En revanche, je voudrais faire chevaucher le logo sur la barre verte, sachant que celle-ci contient à droite et à gauche des ancres locales (texte1 et texte2). J'y travaille depuis 2 jours, je n'y arrive pas...

J'ai bien essayé avec une table, ça ne marche pas du tout.

Quelqu'un aurait-il une idée ?...

Voilà ce que j'ai fait en 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
27
28
<!DOCTYPE HTML>
<html>
<head>
	<title>Ent&ecirc;te Paragon</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<div id="entete">
		<div class="t30 gauche boxgauche valignbas">
			<span class="blanc h1">Serveur</span><br><span class="blanc">Ville de &nbsp;</span>
			<span class="rouge">Site<span>
			<span class="blanc">&nbsp;-&nbsp;</span>
			<span class="bleuciel">Version 1.1</span>
		</div>
		<div class="t39 centre boxgauche">
			<img src="images/logo.png" alt="Logo">
		</div>
		<div class="t25 droite boxgauche" style="display:block;">
			<span class="blanc h1">Bienvenue sur Ville</span><br>
			&nbsp;
			<span class="blanc">Mon compte Rejoindre Se connecter</span>
		</div>
		<div class="t5 centre boxgauche">
			<img src="images/avatar.jpg" alt="Avatar">
		</div>
	</div>
</body>

Le fichier 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
html {
	background:url('images/Background.jpg') no-repeat;
	background-color:#c7c5c2;
	background-position:top center;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	font-family:Microsoft New Tai Lue, Arial, Courrier;
}
 
#entete {
	width:1024px;
	margin:auto;
}
.droite {
	text-align:right;
}
 
.gauche {
	text-align:left;
}
.centre {
	text-align:center;
}
 
.boxgauche {
	float:left;
}
.boxdroite {
	float:right;
}
 
.blanc {
	color:#fff;
}
.rouge {
	color:red;
}
.bleu {
	color:blue;
}
.bleuciel {
	color:#90c0e0;
}
.h1{
	font-weight:bold;
	font-size:150%
}
.t50 {
	width:49%;
}
.t40 {
	width:40%;
}
.t39 {
	width:39%;
}
.t35 {
	width:35%
}
.t30 {
	width:30%
}
.t25 {
	width:23%;
}
.t20 {
	width:20%;
}
.t10 {
	width:10%;
}
.t5 {
	width:7%;
}

Merci par avance à toute personne pouvant me donner de l'aide ou des indices.