affichage sur une mise en page 3 colonnes

**lou64** · 06/10/2008, 13h39

Bonjour,

J'ai effectué une mise en page avec trois colonnes.
Il s'agit d'une largeur fixe de 780 px avec un positionnement en float à dte et à gche. Le div central est fluide.
Et j'ai un problème avec les colonnes de droite et de gauche qui ne commencent pas au même niveau que ma colonne centrale. Elles sont décalées en haut.

voici le code :

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
 
<head>
 
		<title>Document sans nom</title>
 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
        /*<link rel="stylesheet" type="text/css" href="../css/layout.css" />*/
 
        <style type="text/css">
 
			html { background: #FED6FE; }
 
			body { font: 100% Verdana, Arial, Helvetica, sans-serif; color: #993399; text-align: center; }
 
			div#container { width: 780px; /*background-color: #FFFFFF;*/ margin: 0 auto; padding: 0; text-align: left; }
 
			div#branding { margin: 0; padding: 0; background-color: #CCCCFF; }
 
			div#content { width: 100%; margin: 0; padding: 0; }
 
			div#pathway { margin: 0; padding: 0; background-color: #CCCCFF; }
 
			div#content_menu { float: left; width: 150px; background-color: #CC99CC; }
 
			div#content_sub { float: right; width: 150px; background-color: #CCFFFF; }
 
			div#content_main { margin-left: 160px; 	margin-right: 160px; padding: 0; background-color: #FFCCCC; }
 
			div#site_info { margin: 0; padding: 0; clear: both; background-color: #CC00CC; }
 
 
 
		</style> 		
 
	</head>

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
<body>    
 
    	<div id="container">
 
        	<div id="branding">Branding</div>
 
            ...
 
            <div id="content">
 
            	<div id="pathway">Pathway line</div>
 
            	<div id="content_menu">
 
                	<h3>Left column</h3>
 
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
 
                </div>
 
                <div id="content_sub">
 
                	<h3>Right column</h3>
 
                    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
 
                </div>
 
                <div id="content_main">
 
                	<h3>Central column</h3>
 
                    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
 
            </div>
 
            ...
 
            <div id="site_info">
 
            	<h3>Footer</h3>
 
            </div>
 
        </div>       
 
	</body>

Merci d'avance,

**pop_up** · 06/10/2008, 16h41

Si ton site a une largeur fixe, pourquoi ne fait tu pas une mise en page plus simple et ordonnée ? de ce style par exemple :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>untitled</title>
	<style TYPE="text/css">
		html { background: #FED6FE; }
		body { font: 100% Verdana, Arial, Helvetica, sans-serif; color: #993399; text-align: center; }
		div#container { width: 780px; /*background-color: #FFFFFF;*/ margin: 0 auto; padding: 0; text-align: left; }
		div#branding { margin: 0; padding: 0; background-color: #CCCCFF; }
		div#content { width: 100%; margin: 0; padding: 0; }
		div#pathway { margin: 0; padding: 0; background-color: #CCCCFF; }
		div#content_menu { float: left; width: 150px; background-color: #CC99CC; margin: 0; padding: 0;}
		div#content_sub { float: left; width: 150px; background-color: #CCFFFF; margin: 0; padding: 0;}
		div#content_main { width: 460px; float: left; padding: 0; margin: 0 10px 0 10px; background-color: #FFCCCC; }
		div#site_info { margin: 0; padding: 0; clear: both; background-color: #CC00CC; }
	</style>
</head>
<body>    
	<div id="container">
		<div id="branding">Branding</div>
            ...
		<div id="content">
 			<div id="pathway">Pathway line</div>
			<div id="content_menu">
				<h3>Left column</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
			</div>
 
			<div id="content_main">
				<h3>Central column</h3>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
			</div>
			<div id="content_sub">
				<h3>Right column</h3>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
			</div>
			<div id="site_info">
				<h3>Footer</h3>
			</div>
		</div>
	</div>
</body>
</html>

PS: il me semble que tu avais oublié de fermer un div dans ton code. Mais ça ne changeait rien au problème.

**lou64** · 07/10/2008, 15h06

Merci pop_up.
C'est amusant mais on est arrivé à la même solution. Sauf que que j'ai un train de retard à poster

Comme il s'agit d'un design à largeur fixe, je pense que je vais essayer de retirer maintenant tous les floats et donc ... d'utiliser la définition de marges latérales pour le conteneur div#content_main.

Je reposte si j'ai un problème ...

Encore une fois merci

Ah j'oublié le code :

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
<head>
		<title>Document sans nom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/layout.css" />
        <style type="text/css">
			html { background-color: #FED6FE; }
			body { font: 100% Verdana, Arial, Helvetica, sans-serif; color: #993399; text-align: center; }
 
			div#container { width: 780px; margin: 0 auto; padding: 0; text-align: left; }
			div#branding { margin: 0; padding: 0; background-color: #CCCCFF; }
			div#content { width: 100%; margin: 0; padding: 0; overflow: hidden; }
			div#pathway { margin: 0; padding: 0; background-color: #CCCCFF;  }
			div#content_menu { float: left; width: 150px; margin: 3px 3px 3px 0; padding: 0; background-color: #CC99CC; }
			div#content_sub { float: right; width: 150px; margin: 3px 0 3px 3px; padding: 0; background-color: #CCFFFF; }
			div#content_main { float: left; width: 466px; margin: 3px 0 3px 0; padding: 0; background-color: #FFCCCC; }
			div#site_info { margin: 0; padding: 0; clear: both; background-color: #CC00CC; }
 
			div#content_menu, div#content_sub, div#content_main h3 { padding: 2px; }
			div#content_main p { padding: 2px; }			
		</style> 		
	</head>
 
	<body>    
    	<div id="container">
        	<div id="branding">Branding</div>
            ...
            <div id="content">
            	<div id="pathway">Pathway line</div>
            	<div id="content_menu">
                	<h3>Left column</h3>
                    <ul>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
   				    </ul>
                </div>
                <div id="content_sub">
                	<h3>Right column</h3>
                    <ul>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
   				    </ul>
                </div>
                <div id="content_main">
                	<h3>Central column</h3>
                    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
                </div>                   
            </div>
            ...
            <div id="site_info">Footer</div>
        </div>       
	</body>
 
</html>

et le résultat :

http://img391.imageshack.us/my.php?i...olfloatfc8.jpg

**lou64** · 13/10/2008, 13h08

Bonjour,

J'ai refait la mise en page en testant l'autre solution : positions absolute et relative + marges latérales pour le conteneur div#content_main.

Et je retombe sur le même problème : il y a fusion des marges verticales des conteneurs div#content et div#content_main ...

Quelqu'un aurait une solution?

Merci,

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
 
<style type="text/css">
			html { background-color: #FED6FE; }
			body { font: 100% Verdana, Arial, Helvetica, sans-serif; color: #993399; text-align: center; }
 
			div#container { position: relative; width: 780px; margin: 0 auto; padding: 0; text-align: left; }
			div#branding { margin: 0; padding: 0; background-color: #CCCCFF; }
			div#content { width: 100%; margin: 0; padding: 1px 0; overflow: hidden; }
			div#pathway { margin: 0; padding: 0; background-color: #CCCCFF; }
			div#content_menu { position: absolute; width: 150px; left: 0; margin: 3px 3px 0 0; padding: 0; background-color: #CC99CC; }
			div#content_sub { position: absolute; width: 150px; right: 0; margin: 3px 0 0 3px; padding: 0; background-color: #CCFFFF; }
			div#content_main { margin-left: 156px; margin-right: 156px; margin-top: 0px; padding: 0; background-color: #FFCCCC; }
			div#site_info { margin: 0; padding: 0; clear: both; background-color: #CC00CC; }
 
			div#content_menu, div#content_sub, div#content_main h3 { padding: 2px; }
			div#content_main p { padding: 2px; }	
		</style> 		
	</head>
 
	<body>    
    	<div id="container">
        	<div id="branding">Branding</div>
            ...
            <div id="content">
            	<div id="pathway">Pathway line</div>
            	<div id="content_menu">
                	<h3>Left column</h3>
                    <ul>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
   				    </ul>
                </div>
                <div id="content_sub">
                	<h3>Right column</h3>
                    <ul>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
        				<li>Lorem ipsum dolor sit amet</li>
   				    </ul>
                </div>
                <div id="content_main">
                	<h3>Central column</h3> 
                    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eu urna non ipsum malesuada congue. Nunc eu ligula non nisl faucibus dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem. Curabitur fringilla dolor eget massa. Vestibulum feugiat, tellus at rutrum tempor, sapien mi condimentum metus, at blandit lorem ligula eget quam. Fusce commodo tortor eget metus. Cras ut mauris. Suspendisse quam. Donec varius libero ut purus. Aliquam erat volutpat. Praesent eu felis. Curabitur eu erat in enim euismod faucibus. Duis a tortor sed arcu scelerisque bibendum. Suspendisse suscipit egestas nunc. Nullam nulla lorem, convallis at, adipiscing vitae, rhoncus et, sem. Ut vulputate. Duis at ipsum. Maecenas in lectus sed lacus malesuada laoreet.</p>
                </div>                   
            </div>
            ...
            <div id="site_info">Footer</div>
        </div>       
	</body>
 
</html>

**lou64** · 13/10/2008, 22h37

Bonsoir,

Problème résolu lol

La fusion des marges latérales concernait le conteneur div#content_main et des éléments enfants et non pas le conteneur div#content_main et son élément parent.

A partir de là, j'ai pu employé les méthodes suivantes sans problème pour aligner mon conteneur : overflow ou padding-top ou border-top.

Bonne soirée.

affichage sur une mise en page 3 colonnes

Tableau en CSS

Discussions similaires

Partager

Partager