Placer une div a droite

**nestam** · 09/10/2009, 11h45

cela fait trois heures que je suis en train de voir comment mettre cette div(rouge) a droite et en bas du menu du site suivant pour FF
Etonnant de voir que sous IE cela fonctionne tres bien meme.

http://www.ae2l.fr
Voici le code css

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
body,
html{
 
    margin:3% 10% 0 10%;
    margin:3% 10% 0 10% !important;
    background-color:#C8C8C8;
    font-family:Bauhaus,Verdana,"Lucida Consol";
 
    }
 
#conteneur
  {
    width:800px;
    height:588px;
    background-color:#FFFFFF;
 
  }
#haut
  {
 
    width:800px;
    height:24px;
    padding:0px;
    color:#649226;
    font-size:18pt;
  }
#infos
  {
    width:430px;
    height:295px;
    float:left;
    margin:38px 5px 5px 30px;
    color:#8B7E5B;
 
 
  }
#pied
  {
    clear:both;
    width:800px;
    height:140px; 
    padding-top:60px !important;
  }
#logo
  {
    width:385px;
    height:69px;
    background-image:url(../img/logo1.gif) ;
    background-repeat:no-repeat;
    float:left;
    margin-top:-165px;
    margin-left:26px !important;
    z-index: 25;
  } 
#footer_afaq
    {
    width:395px;
    margin-top:-120px;
    margin-left:390px !important;
    float:right;
    z-index:2;
 
    }
#afaq
  {
    width:76px;
    height:92px !important;
    background-color:blue;  
    float:right;
    margin-top:0px;
    padding-right:30px important;
    background-image: url(../img/afaq.gif);
    background-repeat: no-repeat;
    z-index:5;
  }
#droite_menu
  {
    width:183px;
    height:auto;
    float: right;
    margin-top:35px;
    margin-right:50px;
 
  }
#centre
  {
 
    width:487px;
    height:370px;
    margin-left:35px;
    margin-top:30px;
    float:left;
    background-image:url(../img/trans_centre.gif);
    background-repeat: no-repeat;
  }
 
 
 
 
#image_footer
  {
    width:800px;
    height:120px; 
    background-image:url(../img/fond_footer.gif);   
    background-repeat:no-repeat;
    float:left;
    margin-top:0px !important;
    z-index:-3; 
  }
#slogan
  {
  margin-top:20px !important;
  margin-left:5px !important;
  color:#776B4D;
  font-size:14pt;  
  }
#slogan1
  {
  clear:both;
  float:right;
  padding-right:0px !important;
  color:#A89E83;
  width:275px;
  background-color:red;
 
  }
#slogAd
  {
    width:455px;
  }
#bas
  {
  width:200px;
  height:auto;
  float:right;
  margin-top:94px !important;
  margin-right:-80px;
  font-size:8pt;
  font-weight:bold;
  color:#000;
  text-align:right;
  font-family:Arial, Verdana;
 
  }

J espere que cela donnera une idee a quelqu un
j ai pas voulu mettre le code XHTML
pour eviter de faire long
je suis dispo en cas de besoin
merci

**ledisciple** · 09/10/2009, 13h48

Bonjour

il n'y aurait pas une histoire de

Code :

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

overflow:hidden;

Ca ressemble beaucoup à ce que j'ai connu

Je ne sais pas si ça peut t'aider :

http://www.developpez.net/forums/d73...cs-meme-ligne/

**tzilliox** · 09/10/2009, 15h02

Bonjour ledisciple,

il faudrait mettre ton #slogan1 dans le #droite_menu au lieu de #centre.

En dehors de ça, ton code HTML et CSS est beaucoup trop compliqué et tu utilises des hacks IE. Deux raisons qui font que le rendu puisse être totalement différent entre les différents navigateurs.

Si tu le permet je vuex bien te simplifier ton code, afin que tu comprennes mieux comment le structure !

Bon courage,
Thomas.

**tzilliox** · 09/10/2009, 15h54

Bonjour nestam !

Il y a beaucoup de choses à modifier dans ton code pour qu'il soit plus simple. Comme il y en a beaucoup, je me propose de te montrer comment j'aurais fait cette intégration. C'est donc une vision personnelle de ta page. Mais j'espère que ça pourra te donner des idées

J'ai validé le bon fonctionnement sous IE6, IE7 et FF3 et il n'y a aucun hack !
Si tu as besoin d'explications, n'hésite pas à demander.

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
  <meta name="author" content="Amadoune Kane" />
  <meta name="keywords" content="diagnostic immobilier, amiante,dpe,carrez,gaz,plomb,ptz,eco,eco-carrez,boutin,saumure,maine et loire, immobilier, renovation"/>
  <link  href="style.css" rel="stylesheet" type="text/css"/>
  <title>Diagnostic Immobilier AE2L</title>
</head>
<body>  
	<div id="conteneur">
		<div id="haut">
			<p>Amiante, DPE, Termite, Electricit&eacute;, Gaz, Plomb, PTZ, Carrez, Boutin, Eco-Carrez</p>
		</div><!-- fin haut -->
 
		<div id="menu">
			<ul id="tabnav">
				<li><a href="diagnostics.html">P&ocirc;le<br />Diagnostics<br />Immobiliers </a></li>
				<li><a href="eco-habitat.html">P&ocirc;le<br />Eco<br />Habitat</a></li>
				<li><a href="pro.html">Espace Pro</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
			<div id="slogan1">
				<p>le savoir faire, la qualit&eacute;, la proximit&eacute;...</p>
			</div>
		</div><!-- fin droite_menu -->
 
		<div id="centre">
			<p class="soustitre">AE2L, le diagnostic de votre habitat</p>
			<p>R&eacute;alise  tous vos diagnostics immobiliers:
				<ul>
					<li>VENTE</li>
					<li>LOCATION</li>
				</ul>
			</p>
			<p>Vous accompagne dans vos d&eacute;marches <span class="important">Eco</span> de votre <span class="important">Habitat</span> :
				<ul>
					<li>Economie d'&eacute;nergie (DPE +,PTZ)</li>
					<li>Analyse sant&eacute; (air,eau sol...)</li>
				</ul>
			</p>
			<p>
				<b>AE2L</b>, une soci&eacute;t&eacute; <span class="important">ind&eacute;pendante et impartiale</span> avec un personnel <span class="important">comp&eacute;tent et certifi&eacute;</span> &aacute; votre service.
			</p>
		</div><!-- fin centre -->
 
		<div id="pied">
			<div id="afaq">
			  <img src="http://www.ae2l.fr/img/afaq.gif" alt="logo AFAQ" />
			  <p>DIAGNOSTIQUEUR IMMOBILIER</p>
			</div>
			<div id="slogAd">
				<img src="http://www.ae2l.fr/img/logo1.gif" alt="logo AE2L" />
				<p id="slogan">Analyse et Expertise de logements et de lieux</p>
				<p id="adresse1">134 rue Hugues d'Allonnes, 49650 Allonnes&nbsp;Tel 02&nbsp;41&nbsp;67&nbsp;17&nbsp;34</p>
			</div>
		</div><!-- fin pied -->
	</div> 
</body>
</html>

Code CSS :

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
/* GENERAL */
html,
body {
	margin: 0;
	padding: 0;}
body {
    background-color:#C8C8C8;
    font-family:Bauhaus,Verdana,"Lucida Consol";
	text-align: center;}
 
#conteneur {
    width: 800px;
	margin: 0 auto;
    background-color: #FFFFFF;
	text-align: left;}
 
/* HAUT */
#haut {
    padding: 0;
    color: #649226;
    font-size:18pt;}
 
/* MENU */
#menu {
    width:233px;
    float: right;}
#tabnav {
    font-family:Bauhaus;
    font-size:18pt;
    color:#fff;}
	#tabnav li {
		width:164px;  
    	margin-bottom: 5px;
    	background-color:#8B7E5B;
    	-moz-border-radius: 7px 7px 7px 7px;
	    border-radius: 7px;
	    list-style-type: none;}
		#tabnav li a {
			display: block;
			padding: 2px;
			text-decoration: none; 
			color:#fff; }
#slogan1 {
  color:#A89E83;
  background-color:red;}
 
/* CENTRE */
#centre {
    width:430px;
    height:295px;
    padding:38px 29px;
	margin: 0 0 20px 40px;
	background-image: url(http://www.ae2l.fr/img/trans_centre.gif);
    color:#8B7E5B;}
	#centre p {
		margin: 0 10px 0.5em;}
	#centre .soustitre {
		font-weight: bold;}
 
/* PIED */
#pied {
    clear:both;
    height:155px; 
	background: url(http://www.ae2l.fr/img/fond_footer.gif) no-repeat left 45px;}
#afaq {
	float:right;
	text-align: right;
	padding-top: 46px;
    width:200px;
	font-family:Arial,Verdana;
	font-size:8pt;
	font-weight:bold;}
	#afaq p {
		margin: 0;
		padding:0;}
#slogAd {
	margin-right:200px;}
#slogAd img {
	margin-left: 26px;}
#slogan {
  color:#776B4D;
  font-size:14pt;}
#adresse1 {
  color:#649226;
  font-size:12pt;}
 
/* TEXT */
.important {
    text-decoration:underline;
    font-weight:bold; }

J'espère que ça t'aidera. J'insiste un peu, mais le but n'est pas que tu copie/colle, mais bien que tu le lises, que t'essayes de voir comment j'ai fait, et que tu me poses toutes les questions que tu veux !

Bon courage,
Thomas.

PS : désolé... erreur de copier/coller je t'ai appelé ledisciple le coup d'avant

**nestam** · 09/10/2009, 17h28

cela me parait bien
explication:
Pour les hacks tu as raison
j avais deja teste la feuille (conteneur.css)actuel qui est sur le site en local et elle marchait .
parce que j ai mis #slogan1 dans #droite_menu
Cest vrai que c est beaucoup plus simple que ca.
En fait je suis ubuntu donc je ne pouvais pas tester les trucs avec IE et sa famille c est un ami a qui j envoyer le code qui le testait .

Placer une div a droite

Positionnement en CSS

Discussions similaires

Partager

Partager