souci mise en page css viable sous ie et plus sous firefox et inversement

**zepokpok** · 26/10/2007, 16h11

salut à tous !

voilà mon petit souci, je suis encore dans les bases.

voici la page qui pose probleme : http://makrea.free.fr/testcompo.html
et la feuille css qui s'y rapporte : http://makrea.free.fr/testcompo.css

mon probleme :

en gros si je mets pas un float left sur mon contenu sous firefox il se superpose avec mon menu principal. mais par contre mon footer enbas de page se barre completement sous IE, à droite du contenu.

si j'enleve le float:left mon footer se comporte bien dans les deux navigateurs mais mon contenu se superpose dans firefox avec mon menu prinicipal. (oui je me repete

)

si vous voyez la soluce... c'est p'tete pas très compliqué mais là je seche depuis plusieurs jours...

**spitou_77** · 27/10/2007, 23h53

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Exemple 2 : Positionner un footer avec CSS - étape 2</title>
 
 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="testcompo.css" type="text/css" />
<head>
	<style type="text/css" media="screen">
			body {			margin: 0;
							padding: 0;
							font: 100% "Trebuchet MS", sans-serif;
							background: #333333;
			}
			a:link, a:visited, a:hover {
				color: #82A5CA;
				text-decoration: none;
			}
			a:hover {
				color: #FEA63F;
			}
 
			#conteneur {
							position: relative;
							width: 720px;
			       			margin:0 auto;
							height: 100%;
							background: #22222;			
						}					
			#globalNav{
							float: left;
							color: #000000;
							padding: 0px 0px 0px 0px;
							height: 29 ;
							line-height: 1.8;
							text-align: center ;
							background-image:url(images/fonglobalnav.gif);
							position: relative;
						}
 
			#globalNav a {
							font: bold 80% "Trebuchet MS", sans-serif;
							color: #82A5CA;
							padding: 0px 0px 0px 0px; 
			}
 
			#globalNav a:hover {
							color: #FEA63F;
						}
			#contenu {
							float: left;
							background-color: #fff;
							padding: 0 0 0 0;
							position: relative;
							width: 100%;
						}
			#footercommun {
 
							margin:0;
							background-color: #0066b2;
						}
			#footercommun h1 {
							color: #fff;
							padding-bottom: 0;
						}
						h1, p {
							margin: 0;
							padding-bottom: 1em;
						}
						h1 {
							font-size: 12px;
							line-height: 1.5em;
						}
	</style>
</head>
<body>
		<div id="conteneur">
			<div id="globalNav"><a href="#">Actualit&eacute;s</a> | <a href="#">Vie locale </a> | <a href="#">Tourisme</a> | <a href="#">Vie &eacute;conomique</a> | <a href="#">Sant&eacute; Social </a> | <a href="#">Education</a> | <a href="#">Environnement</a></div>
 
			<div style="clear:both;"/>
			<div id="contenu">
				<h1>Content</h1>
				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre pied de page 100% CSS.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
					nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
					convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
					Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
					pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
					justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
					urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
					Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
					fermentum a, accumsan et, neque.</p>
			</div>
			<div style="clear:both;"/>			
			<div id="footercommun">
				<h1>Footer</h1>
			</div>
		</div>
	</body>
</html>

J'ai insérer un <div style="clear:both;"/> avant et après le div menu
J'ai enlevé dans le CSS (que j'ai inséré dans le head, pour tests) sur footercommun la position absolute et le bottom 0, il se collera directement en dessous du contenu...

**zepokpok** · 29/10/2007, 17h06

ha super super !

merci bcp !

par contre moi je tenais vraiment à ce que le footer soit en bas de page donc j'ai laissé la position et le bottom et ça marche nickel !

merci bcp à toi c'est super je galerais vraiment depuis quelques jours, je vais maintenant m'atteler à comprendre l'influence du clear both, merci à toi

**mael94420** · 30/10/2007, 23h59

Résolu s'il te plait

souci mise en page css viable sous ie et plus sous firefox et inversement

CSS

Discussions similaires

Partager

Partager