Discussion :

[testicool]

Bonjour à tous, j'ai un chti pepin avec 2 images.
J'aimerai affiché 2 images qui se suive sur toute la longueur du bord superieur d'une page. La deuxieme image (celle de droite) doit pouvoir s'adapter à toutes les resolution d'écran.
Les tailles sont respectivement de 727 px/135 px et 3 px / 135px.

Aprés pas mal de test en tout genre, j'arrive a mettre mais 2 images une à la suite de l'autre. Le problème provient (d'apres mais recherche) de width:100%; dans "avatar2". IE met avatar 2 a la taille de 1024 px à coter de avatar1 (soit 727px+1024px et donc appartition d'une scroll bar horizontal ). Chui bloquer, si quelqu'un a une idée ...

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
 
#masthead{
	margin: 0;
	padding: 0px 0px;
	border-bottom: 1px solid #990066;
	width: 100%;
}
#avatar1 {
               float: left;
               position:absolute
               padding: 0px 0px 0px 0px;
               margin: 0 0px 0px 0;
               background-image:url(image/LogoFr.jpg);
               background-repeat: no-repeat;
               width: 727px;
               height: 135px;
               padding: 0;
}
#avatar2 {
	float: right;
	padding: 0px 0px 0px 0px;
	margin: 0 0px 0px 0;
	background-image:url(image/LogoDrt.jpg);
	background-repeat:repeat-x;
	width:100%;
	height:135px;
	padding: 0;
	position:absolute;
	top:0px;
	left: 727px;
 
}

HTML

Code :

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

1
2
3
4
5
 
<div id="masthead">
<div id="avatar1"></div>
<div id="avatar2"></div>
</div>

merci pour ton aide

[Linaa]

Pour mettre 2 'blocs' l'un à la suite de l'autre, utilises <span> au lieu de <div>

Code :

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

1
2
3
4
<div id="masthead">
<span id="avatar1"></span>
<span id="avatar2"></span>
</div>

[testicool]

span ne change rien il y a toujours le debordement et la scroll bar horizontal (les 2 blocs sont tjs l'un à coté de l'autre). Le prob c'est la taille de avatar2 (width:100%).

[Linaa]

Le prob c'est la taille de avatar2 (width:100%).

Alors, supprimes-le

[Leviathan_72]

je te rassure j'ai le même problème que toi je m'explique
j'ai dans mon code HTML un truc du genre :
<td><img src='image.jpg' width='100%'></img></td>
avec Firefox, l'image se redimensionne bien pour remplir la page même si l'image est plus grande que la fenêtre du navigateur. L'image se redimensionne toute seule pour avoir une largeur à 100%.
Avec IE 100% veut dire image en taille réel sans redimensionnement !

j'ai esayé plein de méthode pour ce problème et je n'ai pas trouvé de moyen avec les css.
saleté d'IE toujours obligé de "tricher" pour obtenir ce que l'on veut

voir ce post :
http://www.developpez.net/forums/viewtopic.php?t=443364