Discussion :

[XxArchangexX]

Bonjour,

J'aime toujours , plus épuré, clair net précis. Pareil pour le compteur de visite, une raison ? une envie ?

Quant à l'adaptabilité, ce n'est pas encore tout-à-fait ça.

Je ne sais pas si c'est lié, mais sur mon écran (22 pouces), ton site est bien centré mais il y a deux bandes noires sur les côtés, un peu grande, qui assombrisse le reste.

Je comprend pourquoi tu préfères suivre cette discussion jreaux .

[RicardoBxl]

Coucou les amis,

!!! Seule la page d'acceuil est modifée !!!

Je suis heureux d'enfin arriver à quelque chose qui emporte l'adhésion de mes deux plus grands critiques

Pour le compteur de visites lol je sais pas. C'est parce que j'aime voir que ça monte. Mais bon je sais que JReaux m'avait de le retiré. Je vais le mettre dans un coin de la page d'accueil et non visible. Ce sera juste pour moi

Pour le Responsive Web Design, je n'ai pas perdu de vu son importance. Mais étant donné que si déjà sur Desktop j'ai pas réussi à avoir quelque chose de top c'est illusoire de m'attaquer au marché des tablettes et mobiles.

En outre je maîtrise pas encore les % et em. Mais j'ai imprimé tout le dossier que JReaux m'avait fourni dans un lien et il est au chaud prêt à l'étude.

En tout cas encore une fois ca fait plaisir. Le Web Design m'aura fait souffrir à grosses gouttes.

[Invité]

Voici quelques améliorations :

0/ body
Enlève le background noir ! (il rétrécit visuellement le site)
[Edit] Oups ! Hello, ! 2 avis valent mieux qu'un.

@XxArchangexX : RicardoBxl est mon poulain ! je le coach !
Mais comme on dit :

Code :

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

Quand y'en a poulain, y'en a poul'autre !

1/ Bandeau
=> supprimer l'image <img...> du code html, pour la mettre en background du "BannerLogo" :

Code css :

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

1
2
3
4
5
6
#BannerLogo {
    background: url("../Images/ricardo-banner2.png") no-repeat scroll center top / auto 100% transparent;
    clear: both;
    height: 216px;
    position: relative;
}

2/ Menu
6 menu -> 100% / 6 = 16.666%

Code css :

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
nav {
    clear: both;
    margin: -3px 0 0;
    padding: 0 0 50px;
}
nav .M li {
    background: linear-gradient(#CCCC00, #9ACD32) repeat scroll 0 0 transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
    position: relative; /* important pour les sous-menus */
}
nav .M > li { /* uniqument le 1er niveau de li */
    float: left;
    width: 16.666%;
}
nav li ul {
    position: absolute;
    z-index: 99;
    width: 100%; /* même largeur que le li parent */
}

3/ Contenu

Code css :

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

1
2
3
4
#SectionCenter {
    clear: both;
    margin: 20px 5% 50px;
}

Code :

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

1
2
3
4
5
.AudioRecording {
    display: inline-block;
    margin-left: 200px; /* A SUPPRIMER ! */
    padding: 0;
}

4/ Footer :
tu peux mettre le texte en blanc.

Code css :

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

1
2
3
footer a {
    color: #FFFFFF;
}

[RicardoBxl]

Coucou JReaux,

Je viens d'appliquer ton code pour le CSS.

Le résultat est celui que tu voulais que j'obtienne ?

Pour le transparent çà marche pas. Peux-tu vérifier mon code pour la bannière par conséquent merci.

Bàt

[Invité]

Et voilà ! Ton site s'adapte de 800px à 1100px !

Bravo, Petit Scarabée ! Tu as (bientôt) passer la 2ème épreuve !

N.B. J'ai apporté des ajouts à mon précédent message.

[Edit] Oups ! Il reste des bricoles à corriger :
- largeur des sous-menus -> SUPPRIMER width:140px; ligne 158 du CSS

[RicardoBxl]

Euh je suis pas sûr de bien avoir appliqué le code pour le menu.

Tu verras que les sous menus des deux premiers items sont plus petits en largeur. C'est ce que tu voulais ?

[RicardoBxl]

Tu peux me traduire cela en français et me dire si je dois voir la bannière transparente ou non ?

Merci

Code css :

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

1
2
#BannerLogo{
background: url("../Images/ricardo-banner2.png") no-repeat scroll center top  / auto 100% transparent;

[RicardoBxl]

C'est bête je trouvais ca sympa que les sous menus soient plus petits lol

[Invité]

1/ Il faut d'abord SUPPRIMER du code html :

Code :

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

<img id="Banner" alt="Bannière" src="Images/ricardo-banner2.png">

2/

Code css :

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

1
2
#BannerLogo{
background: url("../Images/ricardo-banner2.png") no-repeat scroll center top / auto 100% transparent;

Se traduit par :

Code css :

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

1
2
3
4
5
background-image: url("../Images/ricardo-banner2.png"); /* image */
background-repeat : no-repeat; /* pas de répétition de l'image */
background-position : center top; /* centré, en haut */
background-size: auto 100%; /* largeur auto, hauteur 100% */
background-color: transparent; /* fond transparent */

[Invité]

SUPPRESSION du mini-bandeau "Drapeaux" :

Mettre le <div id="ContainerNavLanguesUtile"> dans le <div id="BannerLogo">.
Puis :

Code :

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

1
2
3
4
#ContainerNavLanguesUtile {
    margin: 0 0 10px 10px; /* SUPPRIMER */
    position:absolute; top:0; left:0;
}

Eh oui !! en position:absolute !! Ca peut servir !

[RicardoBxl]

Eh bien non JReaux,

J'ai pu positionner les langues avec un simple float:left lol.

Pour le reste eh bien à toi de juger.

Pour ce qui est de la transparence je vois pas la différence. J'ai réécrit chaque ligne mais pas de transparence...

Code css :

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

1
2
3
4
5
6
7
8
9
10
BannerLogo{
background-image: url("../Images/ricardo-banner2.png"); /* image */
background-repeat : no-repeat; /* pas de répétition de l'image */
background-position : center top; /* centré, en haut */
background-size: auto 100%; /* largeur auto, hauteur 100% */
background-color: transparent; /* fond transparent */
clear: both;
height: 216px;
position: relative;
}

[Invité]

#BannerLogo{

Quelle transparence ? Ton image est opaque. Pas transparente.
Si tu parles de ça : background-color: transparent;, ça veut dire qu'il n'y a PAS de couleur définie pour le fond.

Ne pas confondre "transparence" et "opacité".

N.B. + J'ai encore modifié mon précédent message.

[RicardoBxl]

Coucou JReaux,

Je suis encore endormi en tapant ces lignes zzzzzz

Merci pour la distinction entre transparence et opacité. J'avasi confondu.

Bon ce matin je vais nettoyer le codes et peaufiner le tout.

En plus youppie j'ai rendez-vous cet après-midi dans un cabinet de recrutement.

J'aimerais que la nouvelle version soit en ligne avant d'aller là-bas histoire de taper un grand coup.

Je te souhaite une excellente journée.

A plus tard.

[Invité]

En plus youppie j'ai rendez-vous cet après-midi dans un cabinet de recrutement.

Génial !
Moi aussi, je suis allé au cabinet ce matin...

Pense à transférer ton site "test" vers la version officielle.

Où est passé la colonne de gauche (fond noir), avec tes coordonnées de CONTACT + Liens sociaux ???

N.B. Tu peux les mettre dans le FOOTER.

[Bovino]

Avant de mettre le logo de validation CSS et de prétendre que la qualité du code HTML / CSS / JavaScript est importante, il faudrait commencer par corriger les erreurs de la page (http://jigsaw.w3.org/css-validator/v...hp%3Flang%3Dfr, http://validator.w3.org/check?verbos...hp%3Flang%3Dfr). Sinon, ça fait pas très crédible

[Invité]

Bonne remarque de Bovino.

Je remarque aussi :

Code :

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

<meta charset="ISO-8859-1"/>

=> UTF-8 !
D'autant que ton site est multilingue.

[RicardoBxl]

Coucou,

Vous avez tout à fait raison.

Je verrai que faire sous peu.

[RicardoBxl]

Eh bien JReaux, c'est justement ce que j'avais l'intention de faire

Je poste un message dès que l'adresse officielle a le design de l'adresse privée

[RicardoBxl]

Bonjour les amis,

Voilà j'ai mis à jour 4 pages sur mon serveur de production (adresse officielle) http://www.creditriskmanagement.be.

Je vous demanderai toutefois d'être indulgent en ce sens que j'ai peu de temps pour bosser dessus aujourd'hui: j'ai un rendez-vous professionnel yuppie !!

Pour le footer je suis conscient que ce n'est pas encore top mais au moins il reprend l'essentiel. Je le peaufinerai ce soir ou demain.

Pour le reste je verrais aussi demain car là plus le temps je dois me faire beau Si l'un de vous me sort une vanne je l'étrangle virtuellement

Bonne journée à tous,

Ricardo

[Invité]

Même pas peur :