Discussion :

[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 :

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

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 :

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
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 :

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
<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 :

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
 
<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 :

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

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!