Problème habillage / fixer image

**Greatz** · 09/05/2008, 10h11

Bonjour,

1) Je sais que ce n'est peut-être pas un gros problème mais je suis la dessus depuis un assez bon moment (débute en css). En fait, premièrement, lorsque j'ai mis un habillage autour de mon image, tout allait bien sur IE7 mais lorsque je regarde sur firefox, on dirait que mon espace entre l'image et le paragraphe disparait complètement...

2) lorsque je place mes images, je remarque qu'elles ne sont pas au même endroit sur IE7 et Firefox. Y a t-il une méthode pour que les images restent fixes que ce soit sur IE7 ou sur Firefox ? (j'ai deja mis position: absolute en css) mais ça ne tient pas en place... même lorsque j'agrandis ma page, certaines choses changent de place... Pouvez-vous un peu m'aider svp.

Merci à l'avance

**Er3van** · 09/05/2008, 10h55

Avec un bout de code ça serait plus simple....

Et qu'entends-tu par habillage ?

**Greatz** · 09/05/2008, 11h28

L'habillage = distance entre l'image et le texte pour une meilleure présentation. Donc en fait on ne voit pas la même chose dans IE7 et FireFox et je voudrais savoir ce qu'il faudrait faire pour ça, ou de quoi cela dépend.

Concernant la fixation de l'image j'ai mis :

#Layer1 {
position:absolute;
width:300px;
height : 127px ;
z-index:1;
left: 525px;
top: 2px;
display:block;
}
Mais quand je regarde sous FF ce n'est plus la même place et quand j'agrandis ma page au max ce n'est plu pareil non plus...

**Er3van** · 09/05/2008, 11h46

Si tu mets l'image en absolu normalment le texte devrait passer dessus, pas autour....

Dans ce cas l'habillage correspond à un padding

Normalement avec qqchose comme ça :

Code html :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<style type="text/css">
#conteneur
{
position : relative ;
background : blue ;
color:white;
float:left;
height : 500px ;
width : 800px ;
}
 
.bloc
{
float: right ;
background : yellow ;
color:black;
border : 3px solid red ;
padding : 5px ;
width : auto ;
}
</style>
<body>
	<div id='conteneur'>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mauris dui, rhoncus a, tempor sed, dapibus non, magna. Suspendisse tincidunt luctus erat. Morbi convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin in dolor non est posuere tristique. Sed urna enim, venenatis eu, convallis ut, rutrum eleifend, quam. Nunc non metus non velit adipiscing venenatis. Integer pulvinar mi at nisi. Vestibulum volutpat aliquet massa. Suspendisse egestas, arcu ac ornare sagittis, massa erat tincidunt dolor, in condimentum ligula erat eget orci. 
 
		<div class='bloc'>
			Ici je n'ecris que des trucs censés, évidement !<br />
			<img src='test.jpg' />
		</div>
		Phasellus lacus lacus, cursus a, lobortis nec, pellentesque semper, diam. Suspendisse sed mi. Mauris ac ligula facilisis velit ornare posuere. Fusce nec mauris in odio aliquam tempor. Phasellus sem. Sed congue vehicula turpis. Integer sem odio, sagittis ac, tincidunt in, elementum vel, mi. Duis quam dolor, varius eget, adipiscing ut, ullamcorper eget, turpis. Nam metus. Nullam lacinia. Nam facilisis. Curabitur scelerisque risus id felis. Phasellus venenatis ipsum eu enim. Sed id turpis. Nullam id quam. Aliquam erat volutpat. Proin felis est, consectetuer ut, tempus eget, accumsan eu, erat. Nunc non massa ac leo consectetuer aliquam. Nullam semper ante et libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		Phasellus lacus lacus, cursus a, lobortis nec, pellentesque semper, diam. Suspendisse sed mi. Mauris ac ligula facilisis velit ornare posuere. Fusce nec mauris in odio aliquam tempor. Phasellus sem. Sed congue vehicula turpis. Integer sem odio, sagittis ac, tincidunt in, elementum vel, mi. Duis quam dolor, varius eget, adipiscing ut, ullamcorper eget, turpis. Nam metus. Nullam lacinia. Nam facilisis. Curabitur scelerisque risus id felis. Phasellus venenatis ipsum eu enim. Sed id turpis. Nullam id quam. Aliquam erat volutpat. Proin felis est, consectetuer ut, tempus eget, accumsan eu, erat. Nunc non massa ac leo consectetuer aliquam. Nullam semper ante et libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	</div>
</body>
</html>

C'est l'effet que tu souhaite obtenir ?

**Greatz** · 09/05/2008, 12h27

C'est surtout le fait que l'image est bonne en IE7 mais pas sur firefox... ca concerne pas toujours une image, ca peut être un texte ou autre chose que j'aurais mis dans un calque par exemple... ca ne veut pas rester en place...

(Pour l'habillage c'est bon

)

Problème habillage / fixer image

CSS

Vue hybride

Discussions similaires

Partager

Partager