Maitriser la taille d'un div

Bonjour!

L'index de mon site, http://www.karlotta.com, est construit (en gros!) sur 3 divs principaux:

1. le premier, #menubottom, avec une hauteur de 150px, consiste en un menu qui est collé au bas de la page,

#menubottom {
	position: absolute;
	height: 150px;
	width: 1000px;
	bottom: 0px;
}

2. le deuxième, #index-background, situé au-dessus de #menubottom, sans hauteur définie, contient une image en background alignée au centre, et

#index-background {
	background-position:center;
	background-repeat:no-repeat;	
	overflow: auto;
	width: 1000px;
	height:auto;
	position: absolute;
	top: 0px;
	bottom: 150px;
}
}

3. le troisième, #index-transparent, est un div transparent de 150px de haut qui se colle au bas du div #index-background, à travers lequel on voit la photo.

#index-transparent {
	position:absolute;
	bottom:0px;
	left:0px;
 	width:1000px;
 	height:150px;
  	background-color:#ffffff;
  	/* for IE */
  	filter:alpha(opacity=60);
  	/* CSS3 standard */
  	opacity:0.6;
	z-index:90;
  }
}

Le but était que le design s'adapte à la taille du navigateur sans une trop grosse perte d'esthétisme. Ca marche plutôt bien, sauf lorsqu'on arrive à des résolutions d'écran importantes.

Voilà le problème : lorsque la fenêtre du navigateur est plus haute que #menubottom + la hauteur de l'image dans #index-background (qui fait généralement dans les 800px), le bandeau transparent #index-transparent se retrouve soit à cheval entre l'image et le blanc en dessous, soit carrément dans le blanc. C'est pas beau du tout!

Est-ce que quelqu'un aurait une idée pour parer à ça? Je me rends compte que peu de gens ont des écrans avec des résolutions de plus de 950px de haut, mais je voudrais éviter que ceux-là (qui risquent justement être des professionnels de l'image, milieu dans lequel je travaille), voient une page d'index toute pourrie!

Je vous remercie par avance de vos suggestions!

PS :
Pour voir mon vrai css (celui que je vous ai collé là est simplifié pour votre compréhension), vous pouvez aller jeter un coup d'oeil à http://www.karlotta.com/css/karlotta.css
Aussi, encore pour simplifier, je vous ai expliqué la mise en page avec une seule image en background, mais c'est en fait un slideshow, ce qui ne change rien à mon problème (mais ne soyez pas surpris en voyant mon code!)

Merci encore!
Modifié par Princesskarlotta (09 Apr 2010 - 09:15)

Est-ce que ma question est trop compliquée ou pas assez claire? Si vous avez besoin que j'explique mieux, je peux reformuler!

Merci

Salut,

bon d'abord moi je suis dev et la question est peut-être trop intégration pour moi.

sinon j'aurais bien essayé une grosse bêtise du genre pourquoi pas placer le transparent
de façon relative au lieu de absolute avec firebug.

ceci dit je n'arrives de toute façon pas à constater le problème.
et donc je ne peux faire aucun test pour le corriger.

je suis sur un écran 1680x1050. rien de flagrant a ce niveau sur http://www.karlotta.com

?

pascal
Modifié par CPascal (11 Apr 2010 - 17:31)

Merci pour ta réponse! J'ai le même problème - et la même résolution que toi! - je ne vois pas le div plus bas que ce qu'il doit être. C'est mon copain qui a un ordinateur avec une résolution plus élevée qui l'a remarqué. C'est donc dur de bosser sur des solutions alors que je ne vois pas le résultat! Il faudrait que je l'appelle à chaque manipulation pour lui dire "et maintenant?"

C'est quoi firebug?

Re,

Firebug c'est un plugin de firefox, surement le plus apprécié des intégrateurs.

Il te permet d'analyser chaque element div , span, etc... que tu selectionnes avec ton curseur,
sur l'image ou dans le code et de voir quels css si appliquent, y compris ceux qui sont herités, et de modifier les valeurs en direct sans avoir à changer le code source.

et ce n'est qu'une des multiples possibilités de cet outils de débugage. il recoupe un peu ce que fait le plugin web developper si tu connais mieux.

d'une façon moins glamour, c'est aussi le cancrelat que beaucoup d'utilisateur de FF ont en bas a droite de leur navigateur
Modifié par CPascal (11 Apr 2010 - 18:04)

Ah génial! Il y a quelques années je bossais mon css comme ça, et quand j'ai changé d'ordi j'ai perdu le plugin. J'ai jamais réussi à le retrouver (je ne crois pas que c'était firebug... me souviens plus.)

Merci, je vais y jeter un coup d'oeil!

Et si quelqu'un a un écran à haute résolution et une bonne connaissance de css... n'hésitez pas à me filer un coup de main avec mon petit problème!

Merci!