28221 sujets

CSS et mise en forme, CSS3

Bonjour,

je viens de m'apercevoir d'un probleme tres genant sur mon site, j'utilise un block div comme conteneur et il contient plusieurs block div avec comme position "absolute" et des width et height fixe en px.
Je viens de m'apercevoir que le dernier div contenu dans le conteneur n'a pas la taille que je lui applique....... c vraiment Smiley confus .
J'ai creer une page exemple pour que ca soit plus court (et plus clair surtout je crois que je le suis pas...... Smiley confused ), elle a les memes proprietes que celles de mon site sauf que j'utilise normalement une css externe (mais ca ne change rien............)
Voici le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.conteneurNoir{
width:100px; height:100px; position:absolute; left:50px; top:50px; background-color:#333333}
.jaune{
width:45px; height:45px; position:absolute; left:0px; top:0px; background-color:#FFCC00}
.roseNormal{
width:5px; height:5px; position:absolute; left:0px; top:45px; background-color:#FF00FF}
.bleu{
width:45px; height:45px; position:absolute; left:0px; top:50px; background-color:#0099FF}
.roseProbleme{
width:5px; height:5px; position:absolute; left:0px; top:95px; background-color:#FF00FF}
</style>
</head>
<body>
<div class="conteneurNoir">
	<div class="jaune"></div>
	<div class="roseNormal"></div>
	<div class="bleu"></div>
	<div class="roseProbleme"></div>
</div>
</body>
</html>


Voici le resultat que j'obtient:
upload/750-test.jpg

Si quelqu'un peu m'aider merci d'avance!!!!!!!!!!!
Modifié par nata (23 Feb 2005 - 18:44)
le problème est logique, et apparait aussi avec ton premier "roseNormal" quand tu caches les 2 calques justes après. Le problèm est que malgré que le DIV soit vide, sous IE il persiste une taille minimale persistente. Pour résoudre le problème, il suffit de rajouter dans la classe concernée :

line-height: 1px;

cela à pour effet de forcer la taille d'affichage d'une ligne à 1px. Ce qui est suffisant pour afficher tes 5px de hauteur.
EDIT: Redondant avec Anthony, mais cohérent tout de même Smiley lol

Essaie en mettant un peu de texte, parce que visiblement, selon moi, c'est une cause possible. D'ailleurs, est-tu certain que ton ".roseNormal" fait bien la taille que tu lui appliques et qu'il n'est pas "dessous" ton ".bleu" ?

À vérifier !

@+, bonne chance, HoPHP

Modifié par HoPHP (23 Feb 2005 - 17:45)
Merci j'ai simplement mis un espace "&nbsp" et ca marche!!!!!!
c vraiment bizarre...... et pas logique, car si le block n'est pas en derniere position et qu'il n'y a aps de texte a l'interieur il n'y a pas de probleme. Mais merci quand meme ca fonctionne c l'essentiel...
Modifié par nata (23 Feb 2005 - 18:19)
si ton problème est résolu, pense à rajouter un [Résolu] dans le titre de ton premier post. Merci.
Modifié par anthony (23 Feb 2005 - 18:15)
Bonjour nata,

Serait-il possible pour toi d'enlever quelques points d'exclamation dans ton titre parce que c'est un peu comment dirais-je... agressant. Smiley cligne

Merci Smiley confused
Administrateur
"Probleme tres genant sur IE6!!!!!!!!!!!!!!!!!!!"

>> Y'a des réductions sur les points d'exclamation sur les claviers actuels ? Ça coûte moins chèr ?

EDIT : ben grillé Smiley smile
Modifié par Raphael (23 Feb 2005 - 18:29)