Problème de positionnement [Résolu]

[Twinkie97441]

Bonjours,
J'ai quelques problemes avec le positionnement en CSS3.
Je vais pas vous mentir, je suis encore un débutant

Voilà ce que ressemble une partie de mon site :
http://img11.hostingpics.net/pics/621489Cap.png

Je veux que l'encadrer "En ce moment au magasin" tombe en-dessous du menu déroulant et que l'image sois à coter de l'encadrer, mais je ni arrive pas...

Voilà le code de mon menu:

Code :

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
#menu, #menu ul                                            
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}
 
#menu a
{
 display : block;
 padding : 0;
 background : #cbeee5;
 text-decoration : none;
 width : 124px;
 }
 
 #menu li
 {
 float:left;
 border-right : 1px solid #fff;
 }
 
 #menu li ul
 {
 position: absolute;
 width: 144px; 
 left: -999em;
 }
 
 #menu a:hover
  {
  color: #000;
  background: #fff;
  }
 
  #menu li:hover ul ul, #menu li.sfhover ul ul
  {
   left: -999em;
   }
 
   #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
   {
    left: auto;
     min-height: 0;
   }

Et le code pour l'encadrer et l'image:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#en_ce_moment, .pub
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
 
#en_ce_moment
{
width: 300px;
border: 1px solid;
padding: 5px;
 
}
 
.pub
{
position: relative;
}

J'ai pensé à mettre en absolute,mais sa vas pas le faire....

Un grand merci pour votre aide

[aeroth]

Donne ton code html aussi s'il te plait.

sinon je pense qu'en te donnant simplement {position: relative; width: width de tes blocs; height: height de tes bloc; float: left;} sur tes blocs et une width fixe sur le conteneur, donc un peu de recherche sur la règle float sur google, tu trouveras...

[Ctesias]

UN petit conseil esthetique si ce n'est deja fait. Pour ton menu, fait un :

Code :

1
2
margin-left: auto;
margin-right: auto;

Ca va te permettre de la centrer completement sur ta page.

Sinon, ton encadré doit se trouver au milieu? Sous ton menu c'est cela?
En tout cas, ca peut venir de ton code html, donc il faudrait que tu nous le mette. Ensuite, si tu veux que ton encadre soit a coté de ton image, il faut que tu les mette tous les deux en float left:

Code :

1
2
3
4
5
6
7
8
#en_ce_moment
{
width: 300px;
border: 1px solid;
padding: 5px;
float:left;
 
}

Et dans ton code html, avec ton image:

Code :

<img src="mon_chemin" style="float:left;" />

Cela va deja tout te mettre sur la gauche.

Ensuite, utilise tu une div global avec tous le contenu dedans? Car dans ce cas, je te conseil de faire ton menu de la largeur de ton conteneur global, Collé en top, tous ce mettra en dessous.

Cordialement,

Ctesias

[Twinkie97441]

Voilà le code HTML:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article id="en_ce_moment">                        <!-- l'article "en ce moment" -->
	<h1>En ce moment au magazin </h1>
	<p>
	Mercredi 18 Janvier 2012. Bonne Année 2012 à tous les joueurs
	de JEUX VIDEO et aux amis facebook de la planète. retrouvez-nous 
	sur notre lien social 24h/24 (Facebook de VIDEODRIVE) pour des CADEAUX 
	etc... Jouez & gagnez des JEUX VIDEO / CONSOLES ! Du 24 Décembre 2011 
	au 21 Janvier 2012 avec VIDEODRIVE et le journal QUOTIDIEN envoyez VIDEODRIVE
	au 7974 SMS 0,50 € par envoi + coût d'un SMS.
	</p>
	</article>
 
	 <div class="pub">                          
	<img src="codmw31.jpg" alt="call_of_duty"   />
	</div>

@Ctesias, j'ai essayer avec la position float, mais toujours le même problème.

Merci

[Ctesias]

Bonjour,

Il y a une solution simple, c'est que tu mette a ton cadre un margin-top equivalent a la height de ton menu.

Cordialement,

Ctesias

[Twinkie97441]

J'ai rajouté height au à "#menu, #menu ul" et au cadre, mais toujours le même problème sauf que le cadre est un peu plus bas.

Merci

[Ctesias]

Normal, le height est la hauteur de ton objet. Donc si à ton menu, tu met un

Code :

height:50px;

ton menu aura une hauteur de 50px. Maintenant, si tu veux, tu met à ton :

Code :

1
2
3
4
5
6
7
8
#en_ce_moment
{
width: 300px;
border: 1px solid;
padding: 5px;
float:left;
margin-top: 50px;
}

Tu aura un encadré qui sera décallé du top de 50px.

[Twinkie97441]

C'est bon, sa fonctionne, le cadre est venu en dessous, et pour l'image, je l'ai mis à coter en le transformant en inline-block.

Merci à toi Ctesias

[Ctesias]

Pas de problème!

Un petit "Résolu" ?