flux qui sort/ repeat-y incorrect

**pop_up** · 29/08/2008, 14h06

Bonjour,

Je n'arrive pas à gérer le flux qui est dans mes balises <a>.

J'ai une image de 30px environ qui se repete à gauche.

le probleme est que lorsqu'on zoom, le texte se remet en forme, s'agrandi mais du coup il sort de mon bloc #menuHautGauche

Pourriez vous me dire comment gérer ceci ?

EDIT : le "height: 3.5em;" sur les balises <a> me sert à uniformiser la hauteur de mes cases de manière à ce qu'elles soient de la meme hauteur. Je ne vois pas comment faire autrement

voici le code ( il vous faudra une image fond.gif au meme endroit que la page pour tester):

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>untitled</title>
	<style>
	body {
		margin: 0 auto;
		padding: 0;
		width: 990px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;															/* important pour que ie gere bien l'unite em */
	}
	#menuHaut {
		width: 100%;
		font-size: 0.63em;
		font-weight: bold;
	}

	#menuHautGauche {
		float:left;
		width: 786px;
		padding-left: 34px;
		background-image: url("./fond.gif");
		background-repeat: repeat-y;
		background-position: left;
	}

	#menuHautGauche a {
		display: block;
		background-color: yellow;
		width: 130px;
		height: 3.5em;
		border-right: 1px solid #ABAAAD;
		float: left;
		text-align: center;
	}
	#menuHautGauche a.sansBordure {
		border-right: none;
	}
	</style>
</head>
<body>
    <div id="menuHaut">
		<div id="menuHautGauche">
			<a href="#">jdfg df df mhdfj</a>
			<a href="#" class="large">fg dfgsdfdfgffdsggfs : abcdef fg abcdefghijk</a>
			<a href="#">dfsg gfdsg sd</a>
			<a href="#">fdg gf dgfgfsdg gfdg fg</a>
			<a href="#">gf gfdsgsdfgff gfdsfgsdfgdf</a>
			<a href="#" class="sansBordure">fddsfg fds</a>
		</div>
		<div>
			sdf
		</div>
	</div>
</body>
</html>

J'ai essayé de mettre des overflow un peu partout mais rein y fait. Si quelqu'un pouvait m'expliquer.

merci

**Orgied** · 29/08/2008, 15h19

Salut,

si tu parles du fait d'agrandir la taille de la font via le navigateur pour le zoom, je ne pense pas qu'il existe d'alternatives à ton problème. Le texte sortira toujours du cadre.

ta seule possibilité serait de fixer la taille (en px ou en pt) pour que l'on ne puisse plus agrandir tes textes, mais c'est

**pop_up** · 02/09/2008, 12h20

bon je suis reparti sur quelque chose de plus simple.

Mais j'ai toujours un problème avec IE6.

le fond ne s'affiche pas.

j'ai essayé de mettre des zoom:1; des overflow, mais pas de fond.

quelqu'un peut t'il m'expliquer la solution ?

merci

voici un bout de code pour tester

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>untitled</title>
	<style>
	body {
		margin: 0 auto;
		padding: 0;
		width: 990px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;															/* important pour que ie gere bien l'unite em */
	}
	/* menu haut */
	#menuHaut {
		background-image: url("./fond-menu-haut.gif");
		background-repeat: repeat-y;
		background-position: left;
		background-color: #E5EFF1;
		font-size: 0.69em;
		font-weight: bold;
		padding-left: 34px;
		overflow: auto;
	}

	#menuHaut a {
		display: block;
		width: 120px;
		float: left;
		text-align: center; zoom:1;
	}

	#menuHaut a.large {
		width: 150px;
	}

	#menuHaut a.sansBordure {
		border-right: none;
	}
	</style>
</head>
<body>
    <div id="menuHaut">
		<a href="#">jdfg df df mhdfj</a>
		<a href="#" class="large">fg dfgsdfdfgffdsggfs : abcdef fg abcdefghijk</a>
		<a href="#">dfsg gfdsg sd</a>
		<a href="#">fdg gf dgfgfsdg gfdg fg</a>
		<a href="#">gf gfdsgsdfgff gfdsfgsdfgdf</a>
		<a href="#" class="sansBordure">fddsfg fds</a>
	</div>
</body>
</html>

flux qui sort/ repeat-y incorrect

CSS

Discussions similaires

Partager

Partager