Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 13 sur 13
  1. #1
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut Vais-je dans la bonne direction avec mon webdesign ?

    Bonjour à toutes et tous

    Comme je dois reprendre l'entreprise de mon patron, je voulais revoir entièrement le site internet de cette dernière, car la version actuellement en ligne manque pour ainsi de dire de ..... tout ( ce n'est pas moi qui avais fais le design, mais le contenu oui), jugez plutôt : http://telepermanence.ch/

    J'ai fais une petite maquette que j'ai mis en ligne, la voilà : http://telepermanence.ch/nouveau/index.html


    Qu'en pensez-vous ?

    J'ai conscience que les pages sont vides, mais je cherche des idées pour les remplir un peu.

    Mais c'était surtout pour savoir si je prends la bonne direction ?

    Le menu du milieu de page est fictif si jamais.

    Je vous remercie grandement d'avance et vous souhaite une excellente journée

    Cordialement

    Marc

  2. #2
    Membre du Club
    Inscrit en
    mai 2007
    Messages
    158
    Détails du profil
    Informations forums :
    Inscription : mai 2007
    Messages : 158
    Points : 58
    Points
    58

    Par défaut

    Ce qui me plait sur ta maquette, c'est qu'elle va à l'essentielle, il n'y a pas d'informations superflues qui viennent perturber la lecture du contenu.

    Une remarque cependant, la partie supérieure du site devrait être la même sur chaque page.
    En effet, par exemple sur la page "Notre entreprise", le texte "Une entreprise à échelle humaine" décale le bandeau des différents onglets. Je trouve cela perturbant.
    Pareil pour l'accueil, encore que là je ne soit pas si certain de la nécessité de garder le même design exactement. On peut avoir un accueil spécial.
    Mais je pense qu'il faut garder de la cohérence au site, simplement pour faciliter la lecture du contenu.

  3. #3
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut

    Salut

    Merci beaucoup d'avoir pris un moment pour regarder mon site !

    Oui tu as raison, je cherche d'ailleurs un moyen d'inclure des photos sur les hauts de pages, pour les pages interphones, digicodes, réparations, contact, cela ne doit pas être trop compliqué, mais la page entreprise ne m'inspire pas...

    Je vais continuer à chercher l'information et je reposterai les évolutions.

    En tout cas merci encore !

    Bon week-end.

    Marc

  4. #4
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut

    Bonjour à toutes et tous

    J'ai amélioré quelques petits détails, qu'en pensez-vous de cette base ?

    http://telepermanence.ch/nouveau/index.html

    Merci beaucoup d'avance !

    Marc

  5. #5
    Membre habitué
    Profil pro
    Étudiant
    Inscrit en
    décembre 2006
    Messages
    114
    Détails du profil
    Informations personnelles :
    Âge : 26
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2006
    Messages : 114
    Points : 110
    Points
    110

    Par défaut

    Salut,

    Personnellement je ne ferai pas un menu fixe. Il est assez grand, donc pour les gens qui ont un écran 16:9 c'est un peu embêtant.
    Ça ne gêne pas la lecture, c'est juste gênant de n'avoir que 3/4 de l'écran disponible.

    Je vois aussi que le menu change selon la page sur laquelle nous sommes. C'est un peu déroutant.

    Le fait que l'image soit un lien vers la page principale n'est pas tellement intuitif. C'est particulièrement décevant lorsqu'on est sur la page "Partenaire Citycable", que l'on clique sur la carte pour avoir plus d'informations, et que l'on se fait renvoyer à la page d'accueil.
    D'ailleurs, pourquoi avoir nommé la page qui semble être la page de contact "partenaire Citycable" ?

    Les images trop étirées ne sont pas du plus bel effet non-plus (page "Digicodes").


    Bien entendu, je ne sais pas ce qui est dû au fait qu'il ne soit pas terminé, et ce qui constitue des erreur à proprement parler.

  6. #6
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut

    Bonsoir, merci pour votre critique

    Alors tout d'abord, oui effectivement, tous les points que vous avez soulevés sont dus au fait que le site n'est pas terminé, il s'agit juste d'une esquisse, c'est pour ça que certains points ne semblent pas logique ou bien finis.

    Et surtout ne regardez pas le code, car il doit faire peur

    C'était surtout pour récolter des avis sur l'idée de base

    Par contre, bon il est tard et je suis fatigué mais je ne comprends pas très bien ce que vous voulez dire, est-ce le fait que le site soit en largeur fixe et qu'il semble trop petit sur votre écran ?

    En tout cas je vous remercie infiniment sur votre aide, c'est très sympa

    Je profite de l'occasion pour vous montrer ce qu'un futur étudiant en graphisme m'a réalisé, il s'agit d'une carte de visite et d'une feuille A4 pour les factures ou offres destinées aux clients, je serais ravi d'avoir également votre avis à leurs propos.

    http://img580.imageshack.us/img580/2145/final2t.png

    http://img593.imageshack.us/img593/8837/facture2i.jpg

    Je vous souhaite à tous un excellent dimanche !

    Cordialement

    Marc

  7. #7
    Membre habitué
    Profil pro
    Étudiant
    Inscrit en
    décembre 2006
    Messages
    114
    Détails du profil
    Informations personnelles :
    Âge : 26
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2006
    Messages : 114
    Points : 110
    Points
    110

    Par défaut

    Par contre, bon il est tard et je suis fatigué mais je ne comprends pas très bien ce que vous voulez dire, est-ce le fait que le site soit en largeur fixe et qu'il semble trop petit sur votre écran ?
    Ce que je veux dire, c'est que le menu reste fixe au sommet de l'écran (il ne sort pas du champ visible de la page), ce qui prend de la place.


    Quant à ce qui a été fait par l'étudiant, je trouve bien.

  8. #8
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut

    Bonsoir, merci pour cette précision

    Je comprends mieux alors !

    Par contre, je me suis dis que avec un contenu relativement important, en procédant de la sorte, cela améliore la navigation dans le site et permets de passer facilement à une autre page.

    Pour dire la vérité, je comptais également rendre le menu orange fixe une fois qu'il se retrouve "plaqué" contre le menu fixe.

    En résumé, qu'il s'arrête lors d'un scroll vertical afin de nouveau conservé cette navigation facile.

    Je serais curieux d'avoir l'avis de plus de monde afin de savoir quelle est la meilleure solution à choisir ...

    En tout cas merci encore !

    Marc

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 374
    Points : 10 320
    Points
    10 320

    Par défaut

    Bonjour,
    mettre ton header en position:fixed; est très gênant ! et inutile.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut

    Salut jreaux62, merci pour ton avis

    Eh bien ok, je vais enlever cette position:fixed.

    Bonne journée à toi

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 374
    Points : 10 320
    Points
    10 320

    Par défaut

    Re.
    Je vais étoffer mon point de vue.

    Les + :
    -> j'aime bien les couleurs et les effets de textures,
    -> la présentation sobre, qui va à l'essentiel.

    Les - :
    -> header trop haut (compte tenu du peu d'infos qu'il véhicule) -> le réduire.
    OU, à la rigueur, j'aurais mis le mini-menu en haut à droite, et le menu principal (orange) à l'intérieur du header, en bas.
    -> ajouter des photos aussi (je suppose que c'est prévu).

    Pas mal de problèmes au niveau du CSS :
    -> l'utilisation des pseudo-tables (display: table-cell; ) ne me parait pas judicieux, ni utile. A virer. D
    Des float:left; float:right; suffiraient (+ overflow:hidden; sur le conteneur-parent, pour remettre les éléments dans le flux).
    -> position: absolute; n'a d'intérêt que si le conteneur-parent est positionné aussi (position: relative; )
    -> mets plus d'espaces (padding:40px; sur article, en virant les margin inutiles sur les h1 et p).
    Ça permet d'aérer le texte.
    -> les font-size sont définis en em. Il serait bien de définir aussi les line-height en em.
    J'ai créé un système de News qui pourrait t’intéresser : Système de Gestion-Affichage de Nouvelles
    (à moins que tu n'optes pour un CMS)

    Et pour la grande image, tu as par exemple : Nivo Slider
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Invité régulier
    Inscrit en
    mars 2009
    Messages
    46
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mars 2009
    Messages : 46
    Points : 8
    Points
    8

    Par défaut

    Salut, je te remercie infiniment pour ton analyse

    Alors dans un premier temps, tu constatera que j'ai supprimé la partie fixed du header, cela devrait normalement être bon.

    Pour tes remarques :

    Les + :
    -> j'aime bien les couleurs et les effets de textures,
    -> la présentation sobre, qui va à l'essentiel.
    Merci

    -> l'utilisation des pseudo-tables (display: table-cell; ) ne me parait pas judicieux, ni utile. A virer. D
    Des float:left; float:right; suffiraient (+ overflow:hidden; sur le conteneur-parent, pour remettre les éléments dans le flux).
    Je ne dirais pas inutile du fait qu'il apporte quand même pas mal d'avantages d'auto-dimensionnement vertical par rapport au contenu par rapport à un positionnement en float d'autant plus que cela reste dans le flux.

    Mais de toute manière, je serai bien obligé de réaliser une feuille de CSS séparée accessible en commentaires conditionnels pour rendre compatible le site ou plutôt juste utilisable pour IE6, IE7 et je crois IE8.

    position: absolute; n'a d'intérêt que si le conteneur-parent est positionné aussi (position: relative; )
    C'est le cas, mais c'est le header qui est positionné en relative.

    -> mets plus d'espaces (padding:40px; sur article, en virant les margin inutiles sur les h1 et p).
    Ça permet d'aérer le texte.
    -> les font-size sont définis en em. Il serait bien de définir aussi les line-height en em.
    Et pour la grande image, tu as par exemple : Nivo Slider
    Bonnes suggestions !

    J'ai créé un système de News qui pourrait t’intéresser : Système de Gestion-Affichage de Nouvelles
    (à moins que tu n'optes pour un CMS)
    Pour mon site, je ne crois pas, car je ne vais pas mettre en place un système de news, ormis peut être par mon blog.

    Mais comme je suis justement en train de créer ce dernier, ton tutoriel pourrai sûrement m'être utile même si je n'ai la prétention d'avoir encore assez de connaissances pour le mettre en place.

    Je pense que j'aurai assez de problèmes par exemple avec ckeditor, mais je pense qu'une fois que j'aurai réalisé la première page, j'ouvrirai un post ici sur le forum et j'attendrai les critiques

    Je te remercie en tout cas infiniment et te souhaite un excellent week-end !

    Bien cordialement

    Marc

  13. #13
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro Jérôme Réaux
    Webdesigner
    Inscrit en
    août 2008
    Messages
    5 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Jérôme Réaux
    Âge : 47
    Localisation : Nouvelle-Calédonie

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 5 374
    Points : 10 320
    Points
    10 320

    Par défaut

    test.php (peu de changements : j'ai placé l'image sous le menu principal) :
    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
    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
    <!DOCTYPE html>
    <html lang="fr">
      <head>
    	
    	<title>Telepermanence, Installations et dépannages d'interphones, de digicodes, réparations de télévisions.</title>
    	
        <meta charset="utf-8">
        <meta name="description" content="Telepermanence s'occupe d'installer et de dépanner des installations d'interphones ou de digicodes pour les grandes gérances de la place Lausannoise, nous réparaons aussi 
    	les télévisions">
    	<meta name="keywords" content="Lausanne, Vaud, Suisse, interphones, digicodes, réparations, réglages, dépannages">
        <meta name="author" content="Marc Schaefges">
        <meta name="geo.placename" content="Lausanne, Vaud, Suisse">
    	<meta name="viewport" content="width=device-width"> 
        <link rel="stylesheet" media="all" href="screen.css">
        
      </head>
      
      <body>
    
    <!-- Avertissement que le navigateur du visiteur, internet explorer 6 ou 7 est trop ancien, on lui conseille donc de le upgrader --> 
    
    <!--[if lte IE 7]>
          
          <div style="padding: 1em; background: #900; font-size: 1.1em; color: #fff;">
          	<p><strong>Attention ! </strong> Votre navigateur (Internet Explorer 6 ou 7) présente de sérieuses lacunes en terme de sécurité et de performances, dues à son obsolescence (il date de 2001).<br />En conséquence, ce site sera consultable mais de manière moins optimale qu'avec un navigateur récent (<a href="http://www.browserforthebetter.com/download.html" style="color: #fff;">Internet Explorer</a>, <a href="http://www.mozilla-europe.org/fr/firefox/" style="color: #fff;">Firefox</a>, <a href="http://www.google.com/chrome?hl=fr" style="color: #fff;">Chrome</a>, <a href="http://www.apple.com/fr/safari/download/" style="color: #fff;">Safari</a>,...)</p>
          </div>
    <![endif]-->
    
    <!-- On déclare les nouveaux éléments html5 pour internet explorer --> 
    	
    <!--[if lt IE 9]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
    <![endif]-->
    
    <header>
    	<div id="barre_menu_gauche">
    		<h1 class="telepermanence"><span>Télé</span>permanence</h1>
    		<p>Une entreprise proche de vous depuis 40 ans !</p>
    	</div>
    	<div id="barre_menu_droite">
    		<ul class="petit_menu">
    			<li><a href="index.html" class="actuel"/>Accueil</a></li>
    			<li><a href="entreprise.html"/>Notre entreprise</a></li>
    			<li><a href="clients.html"/>Ils nous font confiance</a></li>
    			<li><a href="contact.html"/>Nous contacter</a></li>
    		</ul>
    	</div>
    </header>
    
    <nav>
    	<ul class="menu">
    		<li><a href="index.html"/>Interphones</a></li>
    		<li><a href="digicodes.html"/>Digicodes</a></li>
    		<li><a href="clients.html"/>Téléréseau</a></li>
    		<li><a href="reparations.html"/>Réparations</a></li>
    		<li><a href="contact.html"/>Partenaire Citycable</a></li>
    		<li><a href="vente.html"/>Téléviseurs à prix intéressants</a></li>
    	</ul>
    </nav>
    
    <div id="big-image"><!-- IMAGE DEPLACEE SOUS LE MENU -->
    	<a href="index.html"><img src="http://telepermanence.ch/nouveau/images/header.jpg" alt="Telepermanence bienvenue"/></a>
    </div>
    
    <article>
    <h1>Plus de 40 ans à votre service !</h1>
    <p>Nos secteurs d'activités sont très variés, nous assurons la vente, la réparation d'appareils électronique de divertissements, la modernisation et le dépannage téléréseau, la pose d'interphones et de digicodes, nous vous invitons donc à surfer sur le site et à découvrir par vous-même les prestations que nous pouvons vous proposer.</p>
    <p>Nous sommes mandatés par de grandes gérances de la place Lausannoise, nous serions donc ravis de collaborer également avec vous !</p>
    <p>Nous vous souhaitons une agréable visite !</p>
    
    </article>
    
    <footer>
    <p>La qualité au service du client !</p>
    </footer>
    
    </body>
    screen.css (beaucoup de changements) :
    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
    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
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    /* reset css */
    
    img
    {
    border:none;
    }
    
    header, nav, footer, figure, section
    { 
    display:block;
    }
    
    @font-face {
    font-family: 'swz721c';
    src: url('http://telepermanence.ch/nouveau/polices/swz721bc.eot');
    src: url('http://telepermanence.ch/nouveau/polices/swz721bc.eot?#iefix') format('embedded-opentype'),
    url('http://telepermanence.ch/nouveau/polices/swz721bc.woff') format('woff'),
    url('http://telepermanence.ch/nouveau/polices/swz721bc') format('truetype'),
    url('http://telepermanence.ch/nouveau/polices/swz721bc.svg#swz721c') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
    html 
    {
    min-height:100%;
    width:100%;
    padding:0;
    margin:0;
    background-color:#c47622;
    background-image:url("http://telepermanence.ch/nouveau/images/texture_html.jpg");
    }
    
    body
    {
    background-color:#eeca7c;
    background-image: url("http://telepermanence.ch/nouveau/images/texture_de_fond.jpg");
    min-height:100%;
    width:980px;
    margin-top:0px;
    margin-right:auto;
    margin-left:auto;
    border-left:2px solid white;
    border-right:2px solid white;
    -moz-box-shadow: 1px 1px 15px #000000; 
    -webkit-box-shadow: 1px 1px 15px #000000; 
    box-shadow: 1px 1px 15px #000000; 
    }
    
    /* HEADER */
    header
    {
    /* display:table; */ /* Supprimé ! */
    /* height:160px; */	/* Supprimé ! */
    width:980px;
    position:relative;
    overflow:hidden;	/* AJOUTE ! */
    padding:10px 0;	/* AJOUTE ! */
    background-image:url("http://telepermanence.ch/nouveau/images/sup.jpg");
    }
    
    header h1
    {
    color:#ea741d;
    font-family:swz721c, Tahoma, georgia;
    /* margin-top:10px; */ /* Supprimé ! */
    /* margin-left:20px; */ /* Supprimé ! */
    margin:5px 0 10px; /* AJOUTE ! */
    font-size:2.8em;
    border-bottom:3px dotted white;
    }
    
    header h1 span
    {
    color:white;
    }
    
    header p
    {
    color:white;
    font-size:0.8em;
    font-family: swz721c, Tahoma, georgia;
    margin-left:5px; */ /* 23px -> 5px : MODIFIE ! */
    /* margin-top:-20px; */ /* Supprimé ! */
    }
    
    /* MENU */
    #barre_menu_gauche
    {
    /* display:table-cell; */ /* Supprimé ! */
    display:inline-block;	 /* AJOUTE ! */
    /* width:330px; */ /* Supprimé ! */
    float:left; /* AJOUTE ! */
    padding-left:50px; /* AJOUTE ! */
    }
    
    #barre_menu_droite
    {
    /* display:table-cell; */ /* Supprimé ! */
    display:inline-block;	 /* AJOUTE ! */
    float:right; /* AJOUTE ! */
    /* width:650px; */ /* Supprimé ! */
    padding:5px 50px 0 0; /* AJOUTE ! */
    }
    
    #barre_menu_droite ul.petit_menu 
    {
    	text-align:right;
    }
    
    ul.petit_menu li
    {
    display:inline;
    list-style-type:none;
    }
    
    ul.petit_menu li a
    {
    color:#8a7d7d;
    font-family: swz721c, Tahoma, georgia;
    text-decoration:none;
    border-left:4px solid #7b7478;
    padding-left:3px;
    font-size:0.8em;
    margin-right:10px;
    }
    
    ul.petit_menu li a.actuel
    {
    border-left:4px solid #ea741d;
    color:white;
    }
    
    ul.petit_menu li a:hover
    {
    color:white;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
    }
    
    #big-image img/* GRANDE IMAGE */	/* AJOUTE ! */
    {
    height:352px;
    width:980px;
    /* border-top:2px solid white; */ /* Supprimé ! */
    border-bottom:2px solid white; /* AJOUTE ! */
    }
    
    nav
    {
    width:980px;
    /* height:59px; */ /* Supprimé ! */
    /* margin-top:-5px; */ /* Supprimé ! */
    /* margin-bottom:0px; */ /* Supprimé ! */
    /* margin-right:auto; */ /* Supprimé ! */
    /* margin-left:auto; */ /* Supprimé ! */
    background-image:url('http://telepermanence.ch/nouveau/images/fond_menu.jpg');
    background-repeat:repeat;
    border-top:2px solid white; /* black -> white : MODIFIE ! */
    border-bottom:2px solid white; /* black -> white : MODIFIE ! */
    }
    
    ul.menu
    {
    list-style-type:none;
    margin:0;
    padding:10px 0;	 /* 0 -> 10px 0 : MODIFIE ! */
    }
    
    ul.menu li 
    {
    display:inline-block;	 /* block -> inline-block : MODIFIE ! */
    /* float:left; */ /* Supprimé ! */
    /* height:30px; */ /* Supprimé ! */
    text-align:center;
    /* margin-top:20px; */ /* Supprimé ! */
    border-left:4px solid #7b7478;
    margin-left:15px;	 /* 10px -> 15px : MODIFIE ! */
    padding-left:4px;
    text-shadow:0px 0px 1px black;
    }
    
    ul.menu li a
    {
    font-family: swz721c, Tahoma, georgia;
    color:white;
    font-size:1.2em;	/* 1.3em -> 1.2em :  : MODIFIE */
    text-shadow:0px 0px 1px black;
    text-decoration:none;
    }
    
    ul.menu li a:hover
    {
    color:black;
    text-shadow:0px 0px 1px white;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
    }
    
    article
    {
    /* margin-bottom:30px; */
    padding:10px 50px; /* AJOUTE ! */
    }
    
    article h1
    {
    color:white;
    text-shadow: 1px 2px 2px #000000;
    font-size:1.8em;
    font-family:swz721c, Tahoma, georgia;
    border-bottom:3px solid #ea741d;
    /* margin-left:10px; */ /* Supprimé ! */
    /* margin-top:30px; */ /* Supprimé ! */
    }
    
    article p
    {
    color:white;
    font-family:Tahoma, georgia;
    width:50%;
    line-height:25px;
    font-size:1em;
    /* margin-left:10px; */ /* Supprimé ! */
    /* margin-top:30px; */ /* Supprimé ! */
    }
    
    #corps
    {
    display:table;
    }
    
    aside.contact_droite
    {
    display:table-cell;
    width:50%;
    }
    
    aside.contact_droite h1
    {
    color:white;
    font-family:Tahoma, georgia;
    margin-left:120px;
    color:#ea741d;
    font-size:1.5em;
    }
    
    aside.contact_droite ul li
    {
    color:white;
    font-family:Tahoma, georgia;
    list-style-type:none;
    margin-left:100px;
    font-size:1.1em;
    line-height:26px;
    }
    
    article.contact
    {
    display:table-cell;
    width:50%;
    }
    
    article.contact p
    {
    width:100%;
    margin-left:20px;
    }
    
    hr
    {
    margin-left:20px;
    height:3px;
    }
    
    hr
    {
    margin-left:20px;
    height:3px;
    }
    
    article.contact h2
    {
    color:white;
    margin-left:20px;
    font-family:Tahoma, georgia;
    font-size:1.5em;
    }
    
    label
    {
    display:block;
    margin-bottom:10px;
    width:420px;
    color:white;
    font-family:Tahoma, georgia;
    margin-left:20px;
    }
    
    form 
    {
    margin-bottom:50px;
    }
    
    form input
    {
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius:5px;
    margin-bottom:20px;
    height:20px;
    width:200px;
    margin-left:20px;
    }
    
    textarea
    {
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius:5px;
    margin-bottom:15px;
    max-width:400px;
    margin-left:20px;
    }
    
    button
    {
    display:block;
    width:100px;
    padding:8px;
    -moz-box-shadow: 1px 1px 0px #000000; 
    -webkit-box-shadow: 1px 1px 0px #000000; 
    box-shadow: 1px 1px 0px #000000; 
    margin-left:20px;
    }
    
    
    footer
    {
    background-color:white;
    height:80px;
    border-bottom:2px solid white;
    }
    
    footer p
    {
    color:black;
    font-family:tahoma;
    padding-top:30px;
    font-size:1em;
    margin-left:10px;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •