Discussion :

[Orangina]

Bonjour

J'ai un problème avec les css, que je n'arrive pas à résoudre.
Pour le bandeau d'un site, j'ai 2 images que j'ai mis dans des div. Je veux qu'elles soient côte à côte et qu'elles y restent, même si celle de droite est en partie coupée lorsque la fenêtre du navigateur est moins large.

Cela marche comme je veux avec Firefox 2.0, mais impossible avec IE 6.0, là la 2ème image passe à la ligne et est masquée.

Vous pouvez constater la différence sur ce site : cnik49.free.fr

Voilà le code HTML

Code :

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

1
2
3
4
5
6
7
8
9
<div id="page">  <!-- pagewrapper : le contour entier de la page -->
    <div id="header">
        <!-- header : le bandeau d'en-tête de la page -->
	    <div class="logo"> <img src="logosite.jpg"  /></div>
        <div class="bandeau"><img src="bandeau.jpg" /></div>
    </div>
    <div class="clearb">
    </div>	
</div>

Voici la partie correspondante de la 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
div#page					/* pagewrapper = contour de la page; La page est centrée, largeur minimale et maximale définies */
{
	border: 1px solid black;
   	font-size: 100.01%;
	color: black;
	margin: 0px auto;				
	min-width: 720px;				
	max-width: 1020px;				
	background-color: #eCeCeC;	
 
div#header {
	height: 130px;
	display: block;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #333333;
	background: #000000;
	overflow: hidden;
 
}
div#header .logo 
{
	visibility: visible;
	height: 109px;
	width: 49px;
	float: left;
	padding: 10px;
}
 
div#header .bandeau 
{
	overflow: auto;
	left: 70px;
	margin-left: 7px;
 
}

Comme je commence à en avoir marre, j'ai résolu le problème en mettant les images dans un tableau.
Mais je suis quand même intéressé de savoir s'il y a une solution en css.

Merci.

[FraK]

Si tu connais les dimensions de tes 2 images, tu peux renseigner dans #header

Code :

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

1
2
height: **px; 
width: **px;

de même que pour le .bandeau et .logo, auxquels tu ajoutes dans chacun

Code :

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

float: left;

[Orangina]

Bonjour

J'ai rajouté :

dans #header

Code :

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

width: 1020px;

Ce n'est pas la largeur des images mais la largeur maximale de la page (car l'image de gauche peut changer et sa largeur aussi).

et dans #page

Code :

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

overflow: hidden;

Et là enfin ça à l'air d'être bon sous Firefox et IE 6.0.

Merci beaucoup Frak.

[FraK]

Aucuns soucis, toujours un plaisir d'aider ou d'aiguiller les gens =)