[CSS] problème de redimensionnement

**cootchy** · 14/02/2006, 12h05

bonjour,

J'ai un problème avec IE 6. Je vous explique. lorsque je passe sur lien, j'ai un effet qui met le lien en gras. Et lorsque je passe sur le lien, IE me redimensionne mon div conteneur et me coupe le contenu.

Voici le code de ma page :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<html>
<head>
    <style>
    .txtjustify {
        text-align : justify;
    }
 
    .container {
        overflow : hidden;
        background:red;
        width : 438px;
    }
 
    .bodytext {
    	font-family: Verdana;
    	font-size: 11px;
    	color: #484848;
    }
 
    .spaceitem {
    	margin-top:15px;
    }
 
    .linkoff {
    	font-family: Verdana;
    	font-size: 11px;
    }
 
    .linkoff a {
    	text-decoration:underline;
    }
 
    .linkoff a:hover {
    	text-decoration:none;
    	font-weight:bold;   	
    }
 
    .containerbody {
        background:green;
    }
 
    .spanright {
	    float 		: right;
    }
 
    .spanright img {
    	margin-left : 5px;
    	border      : 1px solid black;
    	float       : left;
    	margin-bottom  : 15px;
    	clear		: both;
    }
 
    .newscontainer {
    	overflow:hidden;
    	width:438px;
        background:pink;
    	padding-bottom : 10px;
    }
 
    h2 {
        font-size:13px;
        margin:0px;
        padding:0px;
        display:inline;
    }
    </style>
</head>
<body>
    <div class="newscontainer">                  
        <div class="container bodytext spaceitem">
            <div class="spanright">
                <img src="image.jpg" alt="image" />
            </div>
 
            <div class="containerbody">
                <div>
                    <h2>Titre de la publication</h2>
                </div>
                <div class="txtjustify">
                    lorem ipsum dolor sin amet.
                </div>
                <p class="linkoff">
                    <a href="#">Wysiwyg</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Pour faire le test il vous faut une image nommée image.jpg au même endroit que votre page html. il faut aussi que l'image fasse une certaine hauteur (genre 200 pixels).

Merci d'avance pour votre aide.

**ilood** · 14/02/2006, 13h40

Salut

Le problème se situe à cet endroit

Code :

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

1
2
3
4
5
6
7
8
    .spanright { 
       float       : right; 
    } 
 
    .spanright img { 
...
       clear      : both; 
    }

Tu définis un clear:both dans un bloque en float: left.
Alorsque le but du clear: both est d'anuler l'effet du float pour le reste du flux.
IE s'emmêle les pinceaux.

nb : c'est bien d'utiliser les div pour le positionnement mais je pense que tu en utilises beaucoup pour l'effet recherché.
Un exemple flagrant

Code :

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

<div><h2>Titre de la publication</h2></div>

Pas besoin d'utiliser de div dans ce cas. Tu peux styler le h2 directement dans le css, ce que tu as fait d'ailleurs.

**cootchy** · 14/02/2006, 13h50

Le fait d'enlever le clear:both sur le .spanright img ne règle en rien le problème.

Ca fait presque une journée qu'on est dessus et on arriver pas à trouver la solution.

J'ai aussi enlever les div autour du h2 qui effectivement ne sert à rien...

je vous laisse les apercus d'écrans pour une meilleure compréhension.

affichage correct

affichage incorrect

**ilood** · 14/02/2006, 16h44

Ce code devrait mieux fonctionner. Je n'ai mis que les parties modifiées (css et html)

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
<style type="text/css"> 
/*
 *  autres selcteurs...
 */
 
.spanright img { 
       margin-left : 5px; 
       border      : 1px solid black; 
       float       : left; 
       margin-bottom  : 15px; 
/* clear: both supprimé */
} 
 
h2 { 
        font-size:13px; 
        margin:0px; 
        padding:0px;
/* display: inline supprimé */
} 
 
hr.separe { clear: both; visibility: hidden; }
</style> 
</head> 
<body> 
    <div class="newscontainer">                  
        <div class="container bodytext spaceitem"> 
            <div class="spanright"><img src="dl_flower3.jpg" alt="image" width="100" height="100" /></div> 
 
            <div class="containerbody"> 
                <h2>Titre de la publication</h2><!-- suppression des div et du display: inline dans le css -->
                <div class="txtjustify">lorem ipsum dolor sin amet.</div> 
                <p class="linkoff"><a href="#">Wysiwyg</a></p> 
            </div>
 
			<!-- annuler l'effet flottant pour le reste du flux -->
			<hr class="separe" />
 
		</div> 
    </div>

**cootchy** · 14/02/2006, 17h42

Ca marche nickel. Merci beaucoup.

[CSS] problème de redimensionnement

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager