Avoir deux blocs principaux, un de taille fixe à droite, celui de gauche qui s'adapte [Résolu]

estmars · 15/09/2011, 13h37

Bonjour, j'ai l'image "one" en pièce jointe, je voudrais avoir la "two".

En français, j'ai un bloc général (en vert mais on s'en fout de lui)

j'ai deux blocs principaux, le rouge, et le bleu.

Le bleu est à droite est a une taille fixe, j'ai mis par exemple, 300px.

Le rouge contient des vignettes, et il doit selon le nombre aléatoire de vignettes (et selon les différentes résolutions d'écrans), occuper toute la largeur restante, c'est à dire la largeur totale de l'écran moins les 300px du bloc bleu.

Il faut qu'ils soient à coté, et là j'ai le bloc bleu qui redescend. :/

je vous ai laissé des captures d'écran de ce que j'ai et ce que je voudrais, et voici le code que vous pouvez directement intégrer dans une page html pour y voir avec plus d'aisance.

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
<html><head></head>
 
<body>
 
<style>
 
	#main_content{float:left;width:100%;background-color:green;}
 
	#content1{
		float:left;
		background-color:red;
		min-height:400px;
	}
 
	#content2{
		float:left;
		width:300px;
		height:400px;
		background-color:blue;
	}
	.images{
		float:left;
		width:160px;
		height:120px;
		background-color:yellow;
		border:1px solid;
	}
 
</style>
 
<div id="main_content">
 
	<div id="content1">
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
	</div>
	<div id="content2"></div>
 
</div>
 
</body>
 
</html>

En vous remerciant.

jreaux62 · 15/09/2011, 19h37

Bonjour,
le plus simple : mettre content2 DANS content1, et en float:right;

Code :

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

1
2
3
4
5
6
	#content2{
		float:right;
		width:300px;
		height:400px;
		background-color:blue;
	}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<div id="content1">
		<div id="content2"></div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
	</div>

estmars · 16/09/2011, 10h11

Merci !

ça produit bien le résultat escompté.

Par contre, j'aurais eu tendance à mettre le div #content2 à la fin des images vu que dans notre logique humaine, on le met à droite, comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="content1">
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div id="content2"></div>
	</div>

Eh bien apparemment ça ne marche pas, donc je reprends ton exemple. On dirait que le premier élément en float réserve la ligne.

Bonne journée et merci !

jreaux62 · 16/09/2011, 10h15

Bonjour,
en tout cas tu as essayé, c'est bien.
Ca prouve que tu es curieux. Et la curiosité aide à progresser !

estmars · 16/09/2011, 14h37

Merci

16/09/2011, 10h15	#4
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, en tout cas tu as essayé, c'est bien. Ca prouve que tu es curieux. Et la curiosité aide à progresser ! __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

16/09/2011, 14h37	#5
estmars Membre à l'essai Inscription : juin 2011 Messages : 44 Détails du profil Informations personnelles : Sexe : Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : juin 2011 Messages : 44 Points : 22 Points : 22	Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email