probleme de centrage

**aztec** · 22/09/2007, 21h41

bonjour,

j'ai le code CSS suivant :

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
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
}
 
div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
}
 
div#header{ width: 770px ;
	margin: 0 auto ;
	text-align: left ;
}
 
div#pub {
 float:right;
}

je souhaite positionner mon bloc pub à droite du logo ; je pensais qu'avec un float à droite, j'y arriverais mais il positionne le bloc "en dessous"

vous pouvez voir le résultat sur :
http://www.multimedia-net.com/index_test_css.php

merci d'avance pour l'aide

**onirisme** · 22/09/2007, 21h52

Bonsoir,

Edit :

place ton logo dans un div :
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
 
div id="conteneur">
 
<div id="header">
    <div id="logo">
        <img alt="logo" src="images/logo-multimedia_net.gif" width="319" height="81"/>
    </div>
<div id="pub">
<script language="JavaScript" type="text/javascript" src="http://adserver.click-fr.com/print.js?l=8334&amp;s=8493&amp;w=468&amp;h=60&amp;r=20&amp;t=0"></script>
<noscript><a href="http://adserver.click-fr.com/click.htm?l=8334&amp;s=8493&amp;b=auto&amp;nbre=123" target="_blank"><img border="0" width="468" height="60" src="http://adserver.click-fr.com/print.js?l=8334&amp;s=8493&amp;w=468&amp;h=60&amp;nbre=123&amp;t=4" alt="*** Visitez notre Sponsor ! ***" /></a></noscript>
<font size="1"><br /><a href="http://www.click-fr.com" target="_blank">Membre de Click-FR®, Réseau francophone Paie-Par-Click</a></font>
</div>
</div>
</div>

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
 
body
{
	padding: 0 ;
	text-align: center ;
}
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, 
c'est la seule façon de centrer les éléments de type block avec ce navigateur */
 
#conteneur
{	width: 100% ;
	margin: 0 auto ;
	text-align: left ;
        display : block ;
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type
 block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
 
#header{
    width: 100% ;
    text-align: left ;
 
}
#logo{
    display : block ;
    float : left ;
 
}
#pub {
float : right ;
display : block ;
height : 140px ;
width : 460px ;
}

ATTENTION -> Pour le test j'ai modifier le width, tu corrigeras de toi même.

**aztec** · 22/09/2007, 22h23

bonjour,
c'est bien ce que j'ai fait, comme tu peux voir dans le code HTML ci-dessous .. si tu as une autre idée je suis preneur

Code html :

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Resource-Type" content="Database" />
<meta http-equiv="Content-Language" content="fr-FR" />
<meta http-equiv="Site-Enter" content="Revealtrans(Duration=4,Transition=14)" />
<title>Multimedia-net : votre médiathèque personnelle en ligne!</title>
<meta name="robots" content="index, follow" />
<meta name="rating" content="General" />
<meta name="category" content="internet" />
<meta name="distribution" content="Global" />
<meta name="Date-Creation-yyyymmdd" content="20010601" />
<meta name="Date-Revision-yyyymmdd" content="20071207" />
<meta name="revisit-after" content="15 days" />
<meta name="keywords" content="livre livres roman romans disque disques cd bande-dessinée bd multimedia bibliothèque discothèque médiathèque bdthèque" />
<meta name="author" content="L'équipe Multimedia-net" />
<meta name="reply-to" content="info@multimedia-net.com" />
<meta name="owner" content="info@multimedia-net.com" />
<meta name="copyright" content="2001-2007 Tous droits réservés." />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href="styles_test_css.css" rel="stylesheet" type="text/css" />
<script src="inlinemod_global.js" type="text/javascript"></script>
<script src="ajax_functions.js" type="text/javascript"></script>
<script type="text/javascript">
  //<![CDATA[
  function PopupCentrer(page,largeur,hauteur,options) {
  var top=(screen.height-hauteur)/2;
  var left=(screen.width-largeur)/2;
  window.document.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);}
//]]>
</script> 
</head> 
<body>
 
<div id="conteneur">
<div id="header"><img alt="logo" src="images/logo-multimedia_net.gif" width="319" height="81" usemap="#Map" border="0" /><div id="pub">
<script language="JavaScript" type="text/javascript" src="http://adserver.click-fr.com/print.js?l=8334&amp;s=8493&amp;w=468&amp;h=60&amp;r=20&amp;t=0"></script>
<noscript><a href="http://adserver.click-fr.com/click.htm?l=8334&amp;s=8493&amp;b=auto&amp;nbre=123" target="_blank"><img border="0" width="468" height="60" src="http://adserver.click-fr.com/print.js?l=8334&amp;s=8493&amp;w=468&amp;h=60&amp;nbre=123&amp;t=4" alt="*** Visitez notre Sponsor ! ***" /></a></noscript>
<font size="1"><br /><a href="http://www.click-fr.com" target="_blank">Membre de Click-FR®, Réseau francophone Paie-Par-Click</a></font>
</div></div>
<div class="separ_haut"><img alt="separator" src="images/FF992B_805px.gif" /></div>
<div class="navigation"><div align="center"><a href="?" class="liennav"> 
 
  Accueil 
 
  </a> &middot; <a href="?go=register" class="liennav"> 
 
  Inscrivez-vous ! 
 
  </a> &middot; <a href="?go=contact" class="liennav"> 
 
  Contactez-nous 
 
  </a> &middot; <a href="?go=team" class="liennav"> 
 
  Notre équipe 
 
  </a> &middot; <a href="?go=references" class="liennav"> 
 
  Ils parlent de nous 
 
  </a> &middot; <a href="?go=tour" class="liennav"> 
 
  Visite guidée 
 
  </a> &middot;<a href="?go=help" class="liennav">
 
  </a> <a href="?go=charte" class="liennav"> Charte</a><a href="?go=help" class="liennav"> 
 
  </a> &middot;<a href="?go=help" class="liennav"> 
 
  Aide 
 
  </a></div></div>
<div class="separ_hautb"><img alt="separator" src="images/FF992B_805px.gif" /></div>
<div class="menu">
 <div class="fond_menu_haut"><img src="images/search_f7941d.gif" width="26" height="24" alt="search" />Recherche</div>
<div class="fond_menu">
 <form name="form1" method="post" action="?go=search&mot=$mot">
              <table width="100%">
                <tr> 
                  <td width="38%"><span class="violet10px"> <br>
                    Mot(s)-cl&eacute;(s) : </span></td>
                  <td width="62%"> 
                    <div align="center"><br />
                      <input type="text" name="mot" size="14" class="menutxtfield" />
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td colspan="2"> 
                    <div align="center"><br />
                      <input type="submit" name="connecter" value="Go!" class="menubouton" />
                      <br />
                      <br />
                    </div>
                  </td>
                </tr>
              </table>
   </form>
</div>			
 <div class="fond_menu_haut"><img src="images/membres_f7941d.gif" width="25" height="24" alt="no title - source : membres_f7941d.gif" border='0'  >Membres</div>
<div class="fond_menu">
<br />
<form name="form_login" method="post" action="?go=login">
              <table width="100%" border="0" cellspacing="2" cellpadding="0">
                <tr><font color="#ff0000" size="1"></font>
                  <td width="40%">
                  <span class="violet10px">Pseudo 
                    :</span></td>
                  <td width="60%"> 
                    <div align="center"> 
                      <input type="text" name="pseudo" value=""   size="13" class="menutxtfield">
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td width="40%"><span class="violet10px">Mot de passe :</span></td>
                  <td width="60%"> 
                    <div align="center"> 
                      <input type="password" name="passw" value=""   size="13" class="menutxtfield">
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td colspan="2">
                    <div align="center"><br /> 
                      <input type="submit" name="connecter" value="Connecter" class="menubouton" />
                      <input type="hidden" name="frm_login" value="OK" />
                      <br />
                      <br />
                      <a href="?go=passlost" class="lien09px">Mot de passe oubli&eacute;?</a><br />
                    </div>
                  </td>
                </tr>
              </table>
    </form>
</div>        
 <div class="fond_menu_haut"><img src="images/themes_f7941d.gif" width="42" height="22" alt="no title - source : themes_f7941d.gif" border='0'  >Médias...</div>
<div class="fond_menu">
<br /><img src='images/puce1.gif' width='8' height='8'> <a href='?go=bd_serie&j=1' class='lien11px'>Bd-thèque (542)</a><br><img src='images/puce1.gif' width='8' height='8'> <a href='?go=biblio&j=1' class='lien11px'>Bibliothèque (3215)</a><br><img src='images/puce1.gif' width='8' height='8'> <a href='?go=disco&j=1' class='lien11px'>Discothèque (195)</a><br><img src='images/puce1.gif' width='8' height='8'> <a href='?go=magazine&j=1' class='lien11px'>Magazines (356)</a><br><img src='images/puce1.gif' width='8' height='8'> <a href='?go=video&j=1' class='lien11px'>Vidéothèque (1235)</a><br><br />
</div>  
 <div class="fond_menu_haut"><img src="images/newsletter_f7941d.gif" width="26" height="24" alt="no title - source : newsletter_f7941d.gif" border='0' >Newsletter</div>
<div class="fond_menu">
<br />
<form name="sub" method="post" action="?go=newsletter">
              <table width="100%" border="0" cellspacing="2" cellpadding="0">
                <tr> 
                  <td width="23%" valign="middle"><span class="violet10px">E-mail 
                    :</span></td>
                  <td width="77%"> 
                    <div align="center"> 
                      <input type="text" name="email" class="menutxtfield" size="18" />
                    </div>
                  </td>
                </tr>
                <tr valign="middle"> 
                  <td colspan="2"> 
                    <div align="center">
                      <input type="radio" name="radio_register" value="radiobutton" />
                      <span class="violet10px">S'inscrire</span> 
                      <input type="radio" name="radio_unregister" value="radiobutton" />
                      <span class="violet10px">Se retirer</span></div>
                  </td>
                </tr>
                <tr> 
                  <td colspan="2">
                    <div align="center" class="violet11px"> 
                      <p> 
                        <input type="Submit" name="envoyer" value="Envoyer" class="menubouton">
                        <br />
                        <br />
                        <a href="newsletter/Newsletter3-fr.php" target="popup">Lettre 
                        n°3 (16/01/05)</a> </div>
                    <br />
                      <div align=center class="violet11px">
                        Déjà 
                        126
                        inscrits 
                        </div>			 
                  </td>
                </tr>
      </table>
</form>
</div>
 <div class="fond_menu_haut"><img src="images/langues_f7941d.gif" width="27" height="26" alt="no title - source : langues_f7941d.gif" border='0' >Langue</div>
<div class="fond_menu">
<form name="form_langues" method="post">
              <table width="100%" border="0" cellspacing="2" cellpadding="0">
                <tr> 
                  <td valign="middle"> 
                    <div align="center"><br> 
                      <select name="sel_langue" SIZE="1" class="menulist">
                        <OPTION VALUE='fr'SELECTED>Français</OPTION>
<OPTION VALUE='en'>English</OPTION>
<OPTION VALUE='de'>Deutsh</OPTION>
<OPTION VALUE='es'>Español</OPTION>
<OPTION VALUE='it'>Italiano</OPTION>
 
                      </select><br>
                    </div>
                  </td>
                </tr>
                <tr> 
                  <td> 
                    <div align="center"><br>
                      <input type="submit" name="valid_langue" value="Changer" class="menubouton">
                    </div>
                  </td>
                </tr>
              </table>
</form>
</div>
<div class="fond_menu">&nbsp;</div>    
</div>
<mx:inclusion id="colonne_c0"/>
</div>
 
<map name="Map" id="Map">
  <area shape="rect" coords="6,47,41,79" href="index.php?go=video" alt="Vidéothèque" />
  <area shape="rect" coords="52,47,83,78" href="index.php?go=biblio" alt="Bibliothèque" />
  <area shape="rect" coords="92,48,126,79" href="index.php?go=disco" alt="Discothèque" />
  <area shape="rect" coords="136,48,170,79" href="index.php?go=bd" alt="Bd-thèque" />
</map>
</body></html>

**onirisme** · 22/09/2007, 22h55

J'ai édité le post précédent ...

Mauvaise lecture...

**djoyeux** · 23/09/2007, 12h10

pourquoi tu ne met pas ton logo en background de ton header ? ça serait mieux. non ?

Comme ça près tu place ce que tu veux dans ta bannière.

@++

**Candygirl** · 23/09/2007, 18h32

Envoyé par aztec

je souhaite positionner mon bloc pub à droite du logo ; je pensais qu'avec un float à droite, j'y arriverais mais il positionne le bloc "en dessous"

Tu dois le placer avant le logo dans le html si tu souhaites qu'il soit à côté. Tu peux aussi attribuer un float left au logo plutôt qu'un float right à la pub pour garder l'ordre logique dans le html.

Le div autour de ton logo est inutile et le alt mal renseigné.

**aztec** · 25/09/2007, 22h07

bonjour,
merci pour vos contributions, car je ne suis pas très doué

j'ai donc mis la pub avant dans le html, mais alors du coup c'est le logo qui s'affiche en dessous au lieu d'être a coté de la pub ...

je n'ai pas bien compris l'idée de mettre le logo en background (voir dans les reponses plus haut), quelqu'un peux m'expliquer plus en détail ?

merci

**djoyeux** · 26/09/2007, 00h51

Dans le CSS de ton header tu met

Code :

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

  background-image: url('../images/logo.jpg');

il sera aini incorporé dans le header et tu place apres ta pub a droite.

a toi de voir apres pour ton chemin d'accès à l'image.

**aztec** · 26/09/2007, 22h26

ça ne fonctionne toujours pas, le logo semble se répéter maintenant plusieurs fois

voici la construction que j'ai utilisée

<div id="header"><div id="pub">le html de la pub</div></div>

a+

**djoyeux** · 27/09/2007, 00h11

oui pour pas qu'il se répéte il faut que tu mettes

Code :

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

background-image: url('../images/logo.jpg') no-repeat left top;

il me semble.

probleme de centrage

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager