"Figer" un menu [Résolu]

[hamlesbettraves]

Bonjour, voilà je commence petit à petit à monter un site web, et il y a un problème que je n'arrive pas à résoudre malgré mes recherches :

En fait j'ai un menu horizontal qui s'affiche parfaitement lorsque le navigateur est en mode plein écran, seulement, lorsque je réduis la fenêtre, le menu se déplace pour s'afficher dans l'espace restant! J'aimerais plutôt qu'apparaisse une barre de défilement horizontale...

Avez-vous une idée?

Voici mon code:

Code :

1
2
3
4
5
<span class="pre" <a href="index.htm" class="lien"><font size="5" face="arial">Présentation /</font></a></SPAN>
<span class="for" <a href="formatio.htm" class="lien"><font size="5" face="arial">Formation /</font></a></SPAN>
<span class="exp" <a href="exp.htm" class="lien"><font size="5" face="arial">Expérience professionnelle /</font></a></SPAN>
<span class="inf" <a href="informat.htm" class="lien"><font size="5" face="arial">Informations complémentaires /</font></a></SPAN>
<span class="pou" <a href="pourquoi.htm" class="lien"><font size="5" face="arial">Pourquoi moi ?</font></a></SPAN>

Merci à vous!

[e-fitz]

Bonsoir,

peut etre un overflow:auto sur le conteneur du menu ?

Bonne soirée

[insane1]

Donne nous aussi ton code css afin qu'on puisse mieux t'aider.

[hamlesbettraves]

Merci!

Voici 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
body{
margin: 70px 150px 100px 100px;
padding: ;
text-align: left;
background-image:url(.jpg);
background-repeat:repeat-x;
background-position: top left;
background-color: white;
  }
 
.lien{
color:black;
text-decoration:none;
 
}
 
A:hover.lien
{
color:red;
 
}
 
p{
color: black ;
font-size: 17pt ;
font-family:"Times New Roman", Times, serif;
font-style:"Times New Roman";
}
 
#pre {
position:relative;
top: 20px;
left: 0px;
}
 
.for {
position:relative;
top: 80px;
left: 0px;
}
 
.exp {
position:relative;
top: 80px;
left: 0px;
}
 
.inf {
position:relative;
top: 80px;
left: 0px;
}
 
.pou {
position:relative;
top: 80px;
left: 0px;
}

Et le 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
<SPAN 
style="position: absolute; top: 55px; left: 650px;">
<img src="monde.gif" height="100" width="200" >
</SPAN>
 
<SPAN 
style="position: absolute; top: 215px; left: 100px;">
<img src="barre.jpg" height="1" width="950" >
</SPAN>
 
<SPAN 
style="position: absolute; top: 215px; left:100px;">
<img src="barre.jpg" height="300" width="1" >
</SPAN>
 
<div id="pre" <a href="index.htm" class="lien"><font size="6" face="arial">Thomas Rudel | Allons à l'essentiel.</font></a></div>
<span class="for" <a href="formatio.htm" class="lien"><font size="5" face="arial">Formation /</font></a></span>
<span class="exp" <a href="exp.htm" class="lien"><font size="5" face="arial">Expérience professionnelle /</font></a></span>
<span class="inf" <a href="informat.htm" class="lien"><font size="5" face="arial">Informations complémentaires /</font></a></span>
<span class="pou" <a href="pourquoi.htm" class="lien"><font size="5" face="arial">Pourquoi moi ?</font></a></span>
 
<p><span style="position: absolute; top: 250px; left:110px;"><font size="3" face="arial">Voici pour l'instant mon <a href="RUDEL Thomas CV.pdf">C.V</a> au format PDF, le reste viendra dans peu de temps...</font></p>
 
 
</body>
</html>

Je tiens à rappeler que j'essaye d'apprendre ces langages depuis 2 semaines... Pardonnez-moi si c'est "sale"!

Merci beaucoup!

[e-fitz]

Bonsoir,

ne t'inquiete pas on ne mort pas (enfin je crois )

Donc regarde la première chose est de bien penser à fermer tes balises, ici tes span ne sont pas fermés.
Après la deuxième chose est de penser aussi à fermer les balises qu'on appelle autofermante (<img />).

Quand tu oublies de fermer les balises ou que tu fais une erreur dans ton code, le navigateur essaye de la corriger pour afficher quelque chose à l'écran de l'utilisateur, donc tu peux tomber sur des choses très bizares.

Enfin pour ne pas trop modifier ton code je te propose "d'encadrer" ton menu avec un div auquel tu donnes une dimensions, ce qui te permettra d'obtenir un menu qui ne "bougera" pas et donc tu auras bien une barre de défilement.

Voici le code corrigé :

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
 
<body > 
<SPAN style="position: absolute; top: 55px; left: 650px;">
<img src="monde.gif" height="100" width="200" />
</SPAN>
 
<SPAN style="position: absolute; top: 215px; left: 100px;">
<img src="barre.jpg" height="1" width="950" />
</SPAN>
 
<SPAN style="position: absolute; top: 215px; left:100px;">
<img src="barre.jpg" height="300" width="1" />
</SPAN>
 
 <div class="menu">
<div id="pre"> <a href="index.htm" class="lien"><font size="6" face="arial">Thomas Rudel | Allons à l'essentiel.</font></a></div>
<span class="for" ><a href="formatio.htm" class="lien"><font size="5" face="arial">Formation /</font></a></span>
<span class="exp" ><a href="exp.htm" class="lien"><font size="5" face="arial">Expérience professionnelle /</font></a></span>
<span class="inf" ><a href="informat.htm" class="lien"><font size="5" face="arial">Informations complémentaires /</font></a></span>
<span class="pou"> <a href="pourquoi.htm" class="lien"><font size="5" face="arial">Pourquoi moi ?</font></a></span>
 </div>
<p><span style="position: absolute; top: 250px; left:110px;"><font size="3" face="arial">Voici pour l'instant mon <a href="RUDEL Thomas CV.pdf">C.V</a> au format PDF, le reste viendra dans peu de temps...</font></p>
 
 
</body>

Et le bout de css que j'ai rajouté

Code :

1
2
3
4
 
.menu{
	width:1000px;
}

Bonne soirée

[hamlesbettraves]

Tu es mon dieu. Non très sérieusement, c'est parfait merci!
Mais donc le problème venait de ou? Les balises qui n'étaient pas fermées?

Merci!

[e-fitz]

Bonsoir,

non en faite les balises non fermées posent problèmes mais pas sur ton menu.

C'est juste le div qui change tout, ce div dis qu'il fait 1000px de large,
donc quoi que fasse ton navigateur il fera 1000px de large.
Par conséquent, quand tu redimensionnes il fait toujours 1000px de large ce qui déborde de la page et créé une barre de défilement.

Avant tu n'avais pas taille fixe autour du menu, donc en redimensionnant le menu etait décalé car la page rétrécissait.

Je ne suis pas sur d'être clair.

Bonne soirée