Ajuster des largeurs ou des hauteurs

**JeanMarc_T2k** · 11/03/2008, 00h15

Bonjour,

Sur mon site, j'ai un bandeau horizontal en haut, et une marge à gauche.

L'intersection entre ces deux bandes est occupée par une image carrée. La hauteur du bandeau de haut est égale à la largeur de la marge de gauche.

J'espère que je suis clair jusque là.

En exprimant la largeur de la marge de gauche en pourcentage, cela implique que lorsque je diminue la largeur de ma fenêtre du navigateur, la marge se retrécit. L'image carrée qui est à l'intérieur de la marge diminue aussi de largeur, et donc également en hauteur.

Je voudrais que le bandeau du haut retrécisse également dans sa hauteur, de façon a avoir la même hauteur que l'image carrée.

Comment suggérez-vous de réaliser tout cela ?

**Cornholio** · 11/03/2008, 12h23

Bonjour,

Si j'ai bien compris (c'est pas sur), tu voudrais faire un truc dans ce style la ?

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
<html> 
<head> 
<title>Untitled</title> 
<style type="text/css"> 
#carre{
	height: 10%;
	width: 10%;
	float: left;
}
#carre img{
	height: 100%;
	width: 100%;
}
#bandeau{
	background-color: green;
	height: 10%;
	width: 100%;
}
#marge{
	background-color: orange;
	height: 100%;
	width: 10%;
}
</style> 
</head> 
<body> 
	<div id="carre">
	<img src="tonImage.jpg" alt="Image"/>
	</div>
 
	<div id="bandeau"> 
	</div> 
 
	<div id="marge"> 
	</div> 
</body> 
</html>

**remixxl** · 11/03/2008, 15h05

Salut,

C'est un truc dans ce genre que tu veux faire ?

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
 
<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
}
#bandeau{
	position: absolute;
	background-color: green;
	height: 10%;
	width: 100%;
}
#bandeau img {
	height: 100%;
	width: 10%;
	background: #FF0000;
}
#marge{
	background-color: orange;
	height: 100%;
	width: 10%;
}
</style>
</head>
<body>
             <div id="bandeau">
		<img src="tonImage.jpg" />
	</div>
 
	<div id="marge">
	</div>
</body>
</html>

edit: je viens de relire et finallement mon code colle pas. le but du jeux pour toi c'est que le carré reste carré ? Donc que largeur marge et hauteur bandeau soient égaux.

à part fixer une taille minimal pour l'image en plus du code au dessus et d'accepter que l'image ne remplisse pas tout le carré je crois que CSS seul ne suffira pas.

**JeanMarc_T2k** · 12/03/2008, 18h36

non, en effet, ces deux propositions ne marchent pas tout à fait. Je veux que l'image reste carrée.

En refaisant des tests, je m'aperçois que le seul interêt est sur la variation de la largeur de la fenêtre. En hauteur, ce n'est pas nécessaire que ça bouge.

Merci en tout cas de votre aide

**Cornholio** · 13/03/2008, 12h16

Bonjour,

En modifiant le code de remixxl comme ceci j'ai réussi à faire que l'image reste carré :

Code :

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

1
2
3
4
5
#bandeau img {
	height: 100%;
	width:expression(height); 
	background: #FF0000;
}

Je viens seulement de découvrir les expressions en CSS donc je ne maitrise pas du tout mais je pense que dans ton cas ça peut être une piste a suivre.

PS : cela fonctionne sur IE 6 (pas testé sur les autres versions d'IE) mais je ne sais pas comment faire la même chose sur FireFox

Ajuster des largeurs ou des hauteurs

Dimensionnement en CSS

Discussions similaires

Partager

Partager