Extension d'un bloc vers la droite [Résolu]

JCD21 · 07/06/2011, 14h46

Bonjour.
J'ai créé un bloc dont j'ai fixé la largeur à 1240px et qui est centré à l'écran avec margin-left:auto;margin-right:auto;
Tout se passe bien sauf quand le contenu de ce bloc s'agrandit (il contient un tableau dont la largeur peut être très grande): j'aimerais que le bloc soit étendu vers la droite (pour que la partie gauche reste fixe) au lieu d'être centré.
Pour résumer: si la largeur ne dépasse pas 1240px, le bloc doit être centré à l'écran, et si la largeur dépasse 1240px, j'aimerais qu'il soit étendu vers la droite pour que la gauche ne bouge pas.
comment faire ?
J'espère avoir été assez clair.

Merci.

kéraunos · 08/06/2011, 21h06

Salut.

Essaie ce code :
Ici 1240px a été remplacé par 500px.
Ton bloc, c'est .content.
Tu peux faire varier la width de .large (le tableau). Normalement ça fonctionne.

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
 
<?xml version="1.0" encoding="utf-8" ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		.main {
			margin: auto;
			width: 500px;
		}
		.content {
			float: left;
			padding: 10px;
			min-width: 480px; /* 500 - 2*padding */
			background: #ddd;
		}
		.large {
			border: 1px solid #000;
			width: 600px;
		}
	</style>
</head>
 
<body>
	<div class="main">
		<div class="content">
			<p>Tableau :</p>
			<table class="large">
				<tr>
					<td>text 11</td>
					<td>text 12</td>
				</tr>
				<tr>
					<td>text 21</td>
					<td>text 22</td>
				</tr>
			</table>
		</div>
	</div>
 
</body>
</html>

JCD21 · 10/06/2011, 11h35

Bonjour.
J'ai testé ton code et ça marche bien sur Firefox, mais pas sur Internet Explorer.
Le problème , c'est qu'il faut que ça marche sur les deux.
C'est possible ?

kéraunos · 11/06/2011, 00h28

J'ai testé ce code sous Firefox 4 (OS X 10.6) et 3.6 (Windows 7) et IE 8 (Windows 7).
Dans les trois cas il fonctionne.

JCD21 · 14/06/2011, 13h21

Ok. Merci pour ta réponse.
Moi, j'ai testé sur IE6.0 (ça doit être trop vieux).

07/06/2011, 14h46	#1
JCD21 Membre du Club Inscription : mars 2008 Messages : 227 Détails du profil Informations forums : Inscription : mars 2008 Messages : 227 Points : 44 Points : 44	Extension d'un bloc vers la droite Bonjour. J'ai créé un bloc dont j'ai fixé la largeur à 1240px et qui est centré à l'écran avec margin-left:auto;margin-right:auto; Tout se passe bien sauf quand le contenu de ce bloc s'agrandit (il contient un tableau dont la largeur peut être très grande): j'aimerais que le bloc soit étendu vers la droite (pour que la partie gauche reste fixe) au lieu d'être centré. Pour résumer: si la largeur ne dépasse pas 1240px, le bloc doit être centré à l'écran, et si la largeur dépasse 1240px, j'aimerais qu'il soit étendu vers la droite pour que la gauche ne bouge pas. comment faire ? J'espère avoir été assez clair. Merci.
	00

10/06/2011, 11h35	#3
JCD21 Membre du Club Inscription : mars 2008 Messages : 227 Détails du profil Informations forums : Inscription : mars 2008 Messages : 227 Points : 44 Points : 44	Bonjour. J'ai testé ton code et ça marche bien sur Firefox, mais pas sur Internet Explorer. Le problème , c'est qu'il faut que ça marche sur les deux. C'est possible ?
	00

11/06/2011, 00h28	#4
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	J'ai testé ce code sous Firefox 4 (OS X 10.6) et 3.6 (Windows 7) et IE 8 (Windows 7). Dans les trois cas il fonctionne.
	00

14/06/2011, 13h21	#5
JCD21 Membre du Club Inscription : mars 2008 Messages : 227 Détails du profil Informations forums : Inscription : mars 2008 Messages : 227 Points : 44 Points : 44	Ok. Merci pour ta réponse. Moi, j'ai testé sur IE6.0 (ça doit être trop vieux).
	00

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