Discussion :

[bza88]

salut a vous. je suis confronté a un problème assez cocasse. en effet, j'ai une div qui change de position en fonction de l’écran. j'aimerai qu'elle occupe la même position qu'importe l’écran sur lequel il se trouve. sur mon écran, tout est correct mais sur d'autres elle occupe une autre position. comment faire pour qu'elle ne bouge pas en fonction de l’écran ? voici mon code :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="article">
<p><strong><span lang="EN-US">Dear fellow woman of African descent,</span></strong><br />If you are like me you must wish you had a cosmetic line and skin care line that:<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * Specializes in high-end and very high quality products made specifically for women of African descent like you<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * Is affordable, available and has variety<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * Exactly matches the color and tone of your skin<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * Is adapted to variations in climatic conditions<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * Last long on you when applied<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; * Trains you on how to apply your make-up to get a perfect finish every time<br />The list goes on.</p>
<p>Yes the African woman deserves just like any other woman in the world to be able to reveal her full beauty using the &ldquo;best in class&rdquo; products<br />&ldquo; As every African woman I had several challenges related to revealing my full beauty using available cosmetic and skin care products.&nbsp; Most poignant experiences were when I travelled and saw all the variety available which I did not have at home. In addition I would buy quite expensive cosmetic products for myself, sisters, friends and others back home that completely did not match when I returned. As you know good make up has to match not only the skin type and color but the climate, life style and environment in which one operates. We are often have to be exposed to very harsh climatic factors such as heat, humidity, dryness e.t.c.&nbsp; The challenge to achieving ideal make up therefore is to have products that can resist these factors. Most women would want...</p>
</div>
<div class="aside">
<p><strong>Dr Kate Kume</strong></p>
<img id="fleche_bulle" class="__mce_add_custom__" title="bulle.png" src="http://www-rmbibow-com.mybigcommerce.com/product_images/uploaded_images/bulle.png" alt="bulle.png" width="12" height="17" />
<p id="photo_kume"><img class="__mce_add_custom__" title="compressor.jpg" src="http://www-rmbibow-com.mybigcommerce.com/product_images/uploaded_images/compressor.jpg" alt="compressor.jpg" /></p>
</div>

mon fichier 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
  .article, .aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}
 
.article
{
    width: 810px;
    margin-right: 15px;
}
 
.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}
 
.article p
{
    font-size: 10em;
}
 
.aside
{
    width:215px;
    margin-left: 115px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: ;
}
 
#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}
 
#photo_kume
{
    text-align: center;
}
 
#photo_kume img
{
    border: 1px solid #181818;
}
 
.aside img
{
    margin-right: 5px;
}

[NoSmoking]

Bonjour,

j'ai une div qui change de position en fonction de l’écran.

est ce que cela ne serait pas simplement lié à l’apparition d'une scrollbar sur la page suivant la taille de la fenêtre ?

- Si tu avais une adresse en ligne on pourrait voir en live.

[Invité]

Bonjour,

...j'ai une div qui change de position en fonction de l’écran...

C'est bien... mais encore ?

=> Montre-nous au moins des copies d'écran (ou mieux : une page en ligne).

1/ Ajouter :

Code css :

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

1
2
3
4
#photo_kume img
{
    max-width:100%;
}

2/ remplacer :

Code css :

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

1
2
3
.article p {
    font-size: 10em; /* ???? */
}

par

Code css :

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

1
2
3
.article p {
    font-size: 1em;
}

3/ Ecouter les conseils de Maître NoSmoking