Menu fondu dans fond d'écran + border

**Franzouille** · 30/09/2016, 15h12

Bonjour à tous,

je suis débutant en HTML/CSS et je cherche à créer un site web pour mon entreprise où je suis actuellement en stage.
C'est un site assez basique qui ressemble actuellement à ça :

Nom : Site Web.jpeg
Affichages : 714
Taille : 334,0 Ko

Un ami Webdesigner m'a fait une maquette qui lui semble plus pro mais mon soucis est que je n'arrive pas à faire le menu fondu dans le fond d'écran ainsi qu'inclure une bannière en fond d'écran blanc qui pourra contenir le logo ainsi que le choix de langue...

Nom : Site Web Maquette.jpeg
Affichages : 965
Taille : 267,2 Ko

Voici mon code HTML de ma page d'accueil :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	<link rel="stylesheet" href="HomePageStyle.css" />
        <title>Page d'accueil</title>
    </head>
 
    <body TOPMARGIN="50" BOTTOMMARGIN="50" LEFTMARGIN="40" RIGHTMARGIN="40">
	<center> <p><img src="LogoFidelitas.jpeg"/></p> </center>
<div id="langue" align="right">
 
 
<a href="PagedeGardeFR.html" title="Fran&ccedil;ais"><img src="FlagFR.jpeg" alt "Fran&ccedil;ais" /></a>
<a href="PagedeGardeEN.html" title="English"><img src="FlagEN.jpeg" alt "English" /></a>          
 
            </div>
 
	<div id="Menu">
<ul id="onglets">
    <li><a href="AboutUsFR.html"> L'&eacutequipe </a></li>
    <li><a href="ContactUsFR.html"> Nous contacter </a></li>
    <li><a href="ServicesFR.html"> Nos services </a></li>
    <li class="active"><a href="PagedeGardeFR.html"> Accueil </a></li>
  </ul>
</div>
 
<table style="text-align: left; width: 100%;" border="0" 
cellpadding="0" cellspacing="0"> 
 <tbody> 
  <tr> 
  <td style="width: 20px;"></td> 
  <td style="width: 55px;">
 
  <td style="width: 929px;"><h2><u>Toute l'&eacutequipe de Fidelitas vous souhaite la bienvenue sur son site web !</u></h2>
  <a href="AboutUsFR.html" title="Notre equipe"><img src="Team.jpg" alt "Notre equipe" /></a>
  <br>
  <h2> <u>Les services d'une fiduciaire et bien plus encore !</u></h2>
  <br><a href="ServicesFR.html" title="Nos services"><img src="Service.jpg" alt "Nos services" /></a>
  <br>
  <h2><u>Vous souhaitez nous contacter ? Cliquez sur l'image.</u></h2>
  <br><a href="ContactUsFR.html" title="Nous contacter"><img src="ContacterEN.jpg" alt "Nous contacter" /></a>
 </td> 
 <td style="width: 20px;"></td> 
</tr> 
</tbody> 
</table> 
 
    </body>
</html>

Ainsi que mon code CSS :

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
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
#onglets
{
    font : bold 20px CaviarDreams;
    src:url('CaviarDreams.ttf');
    list-style-type : none;
    padding-bottom : 73px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #000000;
    margin-left : 0;
    line-height:normal;
}
#onglets li
{
    float : right;
    left: -50%;
    position: relative;
    text-align: left;
    height : 70px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #81BEF7;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
 
}
 
 
#onglets a
{
    display : block;
    color : #000000;
    text-decoration : none;
    no-repeat left top;
    padding : 25px;
}
#onglets a:hover
{
    background-color: lightblue;
}
 
#menu
{
        border-bottom : 1px solid #9EA0A1;
        padding-bottom : 25px;
}
* Menu des langues */
#langue {
	padding: 5px;
	display: block;
	margin: 0px;
	position: absolute;
	height: 25px;
	width: 70px;
	top: 50px;
	right: 30px;
}
#langue img {
	margin: 0px 5px;
	padding: 0px;
	border-style: none;
}
body
{
    background: url('Background.png');
    font-family: Exo-light;
   src: url('Exo-Light.ttf');
    color: #ffffff;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
#p1 {background-color: hsl(120, 100%, 50%);}
}
/* l'image occupe toute la place du body */
#arriere {
    width : 100%;
    height: 100%;
}
 
img {
  vertical-align:top;
}

Merci d'avance pour votre aide !

Invité · 30/09/2016, 18h16

Bonjour,

Déjà, ça démarre mal :

Code :

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

1
2
3
    <body TOPMARGIN="50" BOTTOMMARGIN="50" LEFTMARGIN="40" RIGHTMARGIN="40">
	<center> <p><img src="LogoFidelitas.jpeg"/></p> </center>
<div id="langue" align="right">

Code :

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

1
2
<table style="text-align: left; width: 100%;" border="0" 
cellpadding="0" cellspacing="0">

Tu utilises :

des balises obsolètes ! (<center>, .......)
des attributs obsolètes ! (TOPMARGIN, BOTTOMMARGIN, .......) => à remplacer par des styles CSS
une <table>* pour la mise en page !

* les <table> sont faites pour l'affichage de données tabulaires. Pas/plus pour la mise en page.

Donc : ré-écris d'abord ton code.

HTML5 : le guide du débutant
cours et tutoriels CSS
Div et CSS : une mise en page rapide et facile (2006, mais donne quelques bases)

**Franzouille** · 01/10/2016, 19h33

Merci beaucoup pour ces conseils ! En effet je me suis inspiré de codes provenant d'articles un peu plus vieux...
Je vais me pencher sur le sujet et je reviens avec le code MAJ bientôt !

**Franzouille** · 02/10/2016, 17h44

Bonjour Jreaux62,

J'ai donc changer tout les attributs/balises obsolètes comme prévu, voici maintenant mon code mis à jour :

Code HTML:

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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	<link rel="stylesheet" href="HomePageStyle.css" />
        <title>Page d'accueil</title>
    </head>
 
 
	<p><img src="LogoFidelitas.jpeg"/></p>
 
<div id="langue">
 
<a href="PagedeGardeFR.html" title="Fran&ccedil;ais"><img src="FlagFR.jpeg" alt "Fran&ccedil;ais" /></a>
<a href="PagedeGardeEN.html" title="English"><img src="FlagEN.jpeg" alt "English" /></a>          
 
<body>        
            </div>
 
	<div id="Menu">
<ul id="onglets">
    <li><a href="AboutUsFR.html"> L'&eacutequipe </a></li>
    <li><a href="ContactUsFR.html"> Nous contacter </a></li>
    <li><a href="ServicesFR.html"> Nos services </a></li>
    <li class="active"><a href="PagedeGardeFR.html"> Accueil </a></li>
  </ul>
</div>
 
<div id="Texte">
 
<h2><u>Toute l'&eacutequipe de Fidelitas vous souhaite la bienvenue sur son site web !</u></h2>
<a href="AboutUsFR.html" title="Notre equipe"><img src="Team.jpg" alt "Notre equipe" /></a>
<br>
<h2> <u>Les services d'une fiduciaire et bien plus encore !</u></h2>
<br><a href="ServicesFR.html" title="Nos services"><img src="Service.jpg" alt "Nos services" /></a>
<br>
<h2><u>Vous souhaitez nous contacter ? Cliquez sur l'image.</u></h2>
<br><a href="ContactUsFR.html" title="Nous contacter"><img src="ContacterEN.jpg" alt "Nous contacter" /></a>
</div>
 
    </body>
</html>

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
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
 
/* Onglets */
 
#onglets
{
    font : bold 20px CaviarDreams;
    src:url('CaviarDreams.ttf');
    list-style-type : none;
    padding-bottom : 73px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #000000;
    margin-left : 0;
    line-height:normal;
}
#onglets li
{
    float : right;
    left: -50%;
    position: relative;
    text-align: left;
    height : 70px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #81BEF7;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
 
}
 
#onglets a
{
    display : block;
    color : #000000;
    text-decoration : none;
    no-repeat left top;
    padding : 25px;
}
#onglets a:hover
{
    background-color: lightblue;
}
 
#menu
{
        border-bottom : 1px solid #9EA0A1;
        padding-bottom : 25px;
}
/* Menu des langues */
#langue {
 
	display: inline; 
	float: right;
	width: 100px;
	padding: 10px;
}
img {
 
	margin: 0px 0px;
	padding: 0px;
	border-style: none;
	vertical-align:top;
 
}
body
{	
    margin-bottom: 50;
    margin-top: 50;
    margin-left: 40;
    margin-right: 40;
 
 
    background: url('Background.png');
    font-family: Exo-light;
   src: url('Exo-Light.ttf');
    color: #ffffff;
}
 
p 
{ text-align:center;
 
}
 
#Texte {
	position: relative;
	left: 180px;
 
 
}
 
/* Contact : envoi email */
 
fieldset {
  padding:20 20px 20px 20px;
  margin-bottom:10px;
  border:1px solid #000000;
 }
 
legend {
  color:#ffffff;
  font-weight:bold
 } 
label {
  margin-top:20px;
  display:block;
 }
label.inline {
  display:inline;
  margin-right:50px;
 } 
input, textarea, select, option {
  background-color:#FFF3F3;
 } 
input, textarea, select {
  padding:3px;
  border:1px solid #F5C5C5;
  border-radius:5px;
  width:300px;
  box-shadow:1px 1px 2px #C0C0C0 inset;
 } 
select {
  margin-top:10px;
 }
input[type=radio] {
  background-color:transparent;
  border:none;
  width:10px;
 }
input[type=submit], input[type=reset] {
  width:100px;
  margin-left:5px;
  box-shadow:1px 1px 1px #000000;
  cursor:pointer;
 }
 
/* Photos présentation équipe */
.photo{
	width:500px;
	height:500px;
	float:left;
	margin:5px;
	padding:5px;
	text-align:bottom;
	border-left: solid #000000;
}

Donc voilà, votre aide est la bienvenue pour mon problème d'origine !
Merci d'avance.

Invité · 02/10/2016, 20h03

Bonjour,

1/ la balise <body> est mal placée

2/ tu peux créer un "entête" avec <header>, et le menu avec <nav>.
l'entête contiendra le logo.
le menu à onglets peut être dedans, ou après.

3/ pour arrondir les onglet :

Code css :

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

border-radius: 5px 5px 0 0;

Introduction à HTML5

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<body>
  <header>
    <div class="hgroup">
      <h1>Titre</h1>
      <h2>Sous-titre</h2>
    </div>
  </header>
 
  <nav>
   <ul>
     Navigation
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Titre</h1>
     </header>
     <section>
       Contenu...
     </section>
   </article>
   <article>
     <header>
       <h1>Titre</h1>
     </header>
     <section>
       Contenu
     </section>
   </article>
  </section>
 
  <aside>
   Liens externes
  </aside>
 
  <figure>
    <img src="..."/>
    <figcaption>Graphique</figcaption>
  </figure>
 
  <footer>
   Copyright © xxxxx
   <time datetime="2011-12-08">2011</time>.
  </footer>
</body>

N.B. la balise <hgroup> a été retirée. Ne pas l'utiliser.

**Franzouille** · 02/10/2016, 23h25

Bonsoir jreaux62,

Merci beaucoup pour toute ces précisions !

J'ai de nouveau un petit problème : il y a un espace qui n'est pas prit en compte par le fond d'écran du header même si je met le header dans le plus haut du code ou que j'augmente la résolution... De plus il y a un petit espace qui reste sur le fond d'écran du body.

Est-ce que vous savez comment faire pour pas que le fond d'écran dépasse ?