Taille des pages differentes malgré largeur fixe

**bougayou** · 09/06/2014, 11h44

Bonjour,

Je rencontre un soucis sous mozilla. J'ai defini un conteneur pour mon site, qui s'applique sur toutes mes pages. Cependant, ma page d'accueil est la seule à ne pas etre à la largeur souhaitée, et j'avoue que je suis à court d'idées... Si l'un ou l'une d'entre vous y voit une solution, ce serait cool.

Voici le code de la page d'accueil:

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PS Ethnic, conciergerie de luxe</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/font.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/module.css" rel="stylesheet">
    <link href="css/state.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/bjqs.css" rel="Stylesheet">
  </head>
 
  <body id="body">
    <div id="container">
        <header id="header">
            <ul id="menu">
                <li  class="menu_position"><a href="services.html" class="bouton">Nos services</a></li>
                <li class="menu_position"><a href="" class="bouton">PS Membre</a></li>
                <li><a href="index.html"><img id="logo" src="img/logo22.jpg" alt=""></a></li>
                <li class="menu_position"><a href="" class="bouton">Partenaires</a></li>
                <li class="menu_position"><a href="" class="bouton">Contact</a></li>
            </ul>
        </header>
        <div id="flags">
            <a href="">
                <img src="img/fr.png">
            </a>
            <a href="">
                <img src="img/uk.png" alt="">
            </a>
            <a href="">
                <img src="img/pt.png" alt="">
            </a>
        </div>
        <main id="main">
            <div id="my-slideshow">
                <ul class="bjqs">
                    <li>
                        <img src="img/chambre1.jpg" alt="">
                    </li>
                    <li>
                        <img src="img/4.jpg" alt="">
                    </li>
                </ul>
            </div>
            <article id="article" class="horizontal">
                <div id="presentation">
                    <h1>PS' Ethnic</h1>
                    <p><b>Spécialisée en service de haut de gamme</b>, PS’ Ethnic est la référence des conciergeries de luxe en France.  Notre équipe met tout en place avec une exigence qui ne connaît pas de limite à <b>la réalisation de vos besoins</b> : organisation de voyage, d’évènements (séminaire, soirée, anniversaire…), services professionnels, recherches d’informations (rendez-vous médicales, achat de bien immobilier…), services personnalisés (location d’appartement, commandes spéciales, organisation de rendez-vous en France…).</p>
                    <p>PS’ Ethnic vous offre un <b>service de qualité</b> et <b>s’adapte aux envies</b> de l’élite africaine en France et à l’étranger. Notre portefeuille client est composé d’hommes et de femmes d’affaires, diplomates, personnalités ou sportifs, à qui les meilleurs services sont apportés. Les concierges PS’ Ethnic sont de véritables <b>experts du luxe et du raffinement</b>, qui par la connaissance précise de votre profil sera satisfaire toutes vos demandes.</p>
                    <p><b>Faites confiance à PS’ Ethnic et laissez-vous guider vers un univers où tout est permis…</b> </p>
                </div>
            </article>
        </main>
        <footer id="footer">
            <ul id="footer_menu">
                <li class="footer_position"><a href="">Nos services</a></li>
                <li class="footer_position"><a href="">PS Membre</a></li>
                <li class="footer_position"><a href="">Partenaires</a></li>
                <li class="footer_position"><a href="">Contact</a></li>
            </ul>
            <div>
                <p>PS'ETHNIC<br>58, avenue Wagram<br>75017 Paris</p>
            </div>
            <ul id="footer_social">
                <li class="footer_position">
                    <a href="" target="_blank">
                        <img src="img/linkedin-icon.png" alt="">
                    </a>
                </li>
                <li class="footer_position">
                    <a href="" target="_blank">
                        <img src="img/twitter.png" alt="">
                    </a>
                </li>
                <li class="footer_position">
                    <a href="https://www.facebook.com/pages/PS-Ethnic-Global/631017176935153" target="_blank">
                        <img src="img/facebook-icon.png" alt="">
                    </a>
                </li>
            </ul>
        </footer>
    </div>
  </body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<script src="js/slider.js"></script>
</html>

Et voilà le code d'une autre page:

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PS Ethnic, nos services</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/font.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/module.css" rel="stylesheet">
    <link href="css/state.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/bjqs.css" rel="Stylesheet">
  </head>
 
  <body id="body">
    <div id="container">
        <header id="header">
            <ul id="menu">
                <li  class="menu_position"><a href="services.html" class="bouton-active">Nos services</a></li>
                <li class="menu_position"><a href="" class="bouton">PS Membre</a></li>
                <li><a href="index.html"><img id="logo" src="img/logo22.jpg"></a></li>
                <li class="menu_position"><a href="" class="bouton">Partenaires</a></li>
                <li class="menu_position"><a href="" class="bouton">Contact</a></li>
            </ul>
        </header>
        <div id="flags">
            <a href="">
                <img src="img/fr.png">
            </a>
            <a href="">
                <img src="img/uk.png">
            </a>
            <a href="">
                <img src="img/pt.png">
            </a>
        </div>
        <main id="services-main">
            <aside id="services-left-nav">
                <ul>
                    <li class="services-btn services-btn-marge"><a href="conciergerie.html">Conciergerie</a></li>
                    <li class="services-btn services-btn-marge"><a href="protocole.html">Protocole</a></li>
                    <li class="services-btn services-btn-marge"><a href="formalites.html">Formalités</a></li>
                    <li class="services-btn"><a href="divertissements.html">Divertissements</a></li>
                </ul>
            </aside>
            <aside id="services-article">
                <h1>Nos services</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sagittis turpis. Fusce sed nulla sed nulla lacinia gravida. Ut facilisis dapibus faucibus. Donec quis ornare neque, sit amet molestie sapien. Sed tincidunt in nunc eget porta. Morbi sit amet justo sollicitudin, faucibus leo vel, aliquet leo. Nullam semper erat velit, et ultrices urna sollicitudin id. Vestibulum velit ante, eleifend sed elementum eu, tempor in justo. Aenean consequat justo vel risus rhoncus, fermentum posuere lorem eleifend. Cras at ullamcorper purus. Duis eu blandit ante. Etiam lobortis tristique dui, vel aliquet eros pretium in.
                Aenean imperdiet vestibulum dolor, in facilisis enim pellentesque sit amet. Vestibulum vel mauris velit. Donec vel nisi vel elit pretium placerat. Curabitur porttitor diam elit, a elementum augue pulvinar nec. Duis vehicula enim et enim consequat tempus. Pellentesque laoreet libero vitae risus imperdiet bibendum. Nullam ipsum dolor, lacinia ac elit eu, interdum adipiscing eros. Morbi gravida vehicula commodo. Ut ipsum augue, mattis et gravida in, suscipit ac enim. Fusce auctor at sem a pellentesque. Nunc rhoncus ac sem et vulputate. Fusce nec justo ut quam porta vehicula sit amet vel metus. Maecenas rhoncus nibh eget tortor lobortis, vel dapibus dui vestibulum. Nulla lectus nulla, ornare et tincidunt et, pharetra eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </aside>
        </main>
        <footer id="footer">
            <ul id="footer_menu">
                <li class="footer_position"><a href="">Nos services</a></li>
                <li class="footer_position"><a href="">PS Membre</a></li>
                <li class="footer_position"><a href="">Partenaires</a></li>
                <li class="footer_position"><a href="">Contact</a></li>
            </ul>
            <div>
                <p>PS'ETHNIC<br>58, avenue Wagram<br>75017 Paris</p>
            </div>
            <ul id="footer_social">
                <li class="footer_position">
                    <a href="" target="_blank">
                        <img src="img/linkedin-icon.png">
                    </a>
                </li>
                <li class="footer_position">
                    <a href="" target="_blank">
                        <img src="img/twitter.png">
                    </a>
                </li>
                <li class="footer_position">
                    <a href="https://www.facebook.com/pages/PS-Ethnic-Global/631017176935153" target="_blank">
                        <img src="img/facebook-icon.png">
                    </a>
                </li>
            </ul>
 
        </footer>
    </div>
  </body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<script src="js/slider.js"></script>
</html>

Et le css :

Code :

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

1
2
3
4
5
#container{
	width: 60em;
	margin: 0 auto;
	background-color: #8b8b8b;
}

Merci à tous

**Bisûnûrs** · 09/06/2014, 12h14

Ca peut être dû à plein plein de choses (HTML, CSS, JS), seulement avec ce que tu nous montres, impossible de savoir. Dans l'idéal, si tu avais une page en ligne à nous montrer ...

**bougayou** · 09/06/2014, 15h12

En voulant poster une url, j'ai mis le site en ligne (sur une page perso), et le probleme a disparu...

Une idée?

**Bovino** · 10/06/2014, 09h01

Ce genre de chose arrive en général lorsque tu fais des modifications sur ton code, mais que tu visualises la page en cache dans le navigateur. Du coup, les modifications ne sont pas prises en compte.
Une fois en ligne, c'est plus la même ressource que tu demandes donc le navigateur n'utilise pas de version en cache (puisqu'il n'y en a pas pour cette ressource

).

**Micmaya** · 12/06/2014, 17h24

Bonjour,
Pense à marquer comme "Résolu" le billet sinon il reste dans la liste et on perd du temps pour rien à relire tous les commentaires alors que le problème n'est plus là et/ou la solution a été trouvée.

Bien à toi,

**bougayou** · 18/06/2014, 20h24

Merci à tous, une expérience de plus à ajouter à ma nouvelle vie

Taille des pages differentes malgré largeur fixe

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager