Faire flotter un logo

**DomIII** · 19/05/2013, 23h48

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.

**saymoneu** · 20/05/2013, 10h23

Bonjour,

Il faut attribuer à votre logo un position:absolute; , et à votre div d'en-tête un position:relative.
Grâce à ça on va pouvoir gérer le positionnement du logo par rapport à son dernier conteneur en relative, ici donc la box d'en-tête, sans que cela ne modifie rien pour l'en-tête.

En mettant une valeur négative au positionnement "top" du logo cela devrait être bon.

Je n'ai peut être pas été clair, je peux vous modifier le code si vous le désirez.

**rodolphebrd** · 20/05/2013, 11h00

L'idée de @saymoneu est intéressante et on peut aussi se contenter de positions relatives:

Code css :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#entete{
	width:800px;
	height:200px;
}
.bloc1{
	width:800px;
	height:150px;
	background: url(http://lorempixel.com/400/200/);
}
.bloc2{
	width:700px;
	height:50px;
	margin:auto;
	background: green;
	position:relative;
	top:-20px;
 
}
.logo{
	width: 160px;
	height: 120px;
	border-radius: 80px / 60px;
	margin:auto;
	background:salmon;
	position:relative;
	top:-150px;
}
</style>
</head>
<body>
<div id="entete">
 <div class="bloc1"> </div>
  <div class="bloc2"> </div>
  <div class="logo"> </div>
</div>
</body>
</html>