Responsive Site

Bonjour Paul,
Et si tu mets width: 90%
la scroll-bar disparait non ?

Merci ,

Mais j'ai mit 100% afin que ca prenne la totalité de l'ecran en largeur , si je met 90% lorsque je vais etre en plein ecran la sorte de banniere ne prendre pas tout l'ecran.

Salut,
A partir de quel résolution la barre apparaît ?
Cela doit venir d'éléments définis en px.
Le mieux reste d'inspecter et de chercher les éléments qui sortent de ton container. On ne pourra pas t'aider avec le code d'une div (qui ne pose aucun soucis au niveau responsive).

ps: j'avais pas bien lu (my bad!). Si cette div pose problème, essai d'y ajouter un box-sizing.
Tu peux aussi recalculer ton width: calc(100% - 15%).

Merci , c'est bon enfaite , j'avais fait une etourderie dans le css de body ;)
J'aurais une autre question , Comment je peux faire pour tout redimensionner parce que quand je reduis trop ma page, elle part en cacahuetes ,
j'ai entendu parler d'un code html pour afficher que certaines chose sur petit ecran et grand ecran ? Quelle est la meilleure solution ?

Merci d'avance ,

Merci , c'est bon enfaite , j'avais fait une etourderie dans le css de body ;)
J'aurais une autre question , Comment je peux faire pour tout redimensionner parce que quand je reduis trop ma page, elle part en cacahuetes ,
j'ai entendu parler d'un code html pour afficher que certaines chose sur petit ecran et grand ecran ? Quelle est la meilleure solution ?

Merci d'avance ,

Si tu définis ton conteneur est définis à 960px par exemple et que tous les éléments internes sont définis en %, tu n'as qu'à redéfinir la largeur de ton container en fonction de ta résolution et tous tes éléments se redimensionneront automatiquement.
Si tu ne souhaite pas voir apparaître certains blocs sur petits formats, tu peux leur ajouter un display: none dans la résolution voulue ou les cacher via js. Un code spécifique pour ça ? Ajoute une classe responsive-hidden par exemple et définis là en display: none quand tu le désire.

Penses bien à vérifier chaque balise et à redéfinir toutes tes width en %.

Merci beaucoup pour tes réponses , elles m'ont vraiment aider à ameliorer mon site , par contre il reste des points à réaliser que je ne comprends pas trop comment faire:
-Comment ajouter l'instruction pour cacher les elements ? je ne vois pas trop comment faire ? Peut etre les medias queries ,mais je n'en ai jamais utiliser.
-J'ai également des boutons fait "maison" ^^ que je n'arrive pas à redimensionner , arriver à un point ils partents en vrille complet ;)
Voici le code:

ul#nav li {
    display: inline;
}

ul#nav li a{
    background-color: white;
    color: #434343;
    font-size: 150%;
    padding: 10px 20px;
    float: center;
    border-radius: 5px;
    font-family: "my_first_police"; 
    text-decoration: none;
    border: 2px solid #b0b0b0;
}

ul#nav li a:hover {
    background-color: #3B5998;
    color: white;
    border: 2px solid white;
    transition-timing-function: ease-out;
    transition-duration: 0.6s;
}```

<ul id="nav">
        <li><a href ="index.html"><i class="fa fa-child fa-lg"></i> About me</a></li>
        <li><a href="resume.html"><i class="fa fa-file-text fa-lg"></i> Resume</a></li>
        <li><a href ="contact.html"><i class="fa fa-commenting fa-lg"></i> Contact</a></li>
        <img class="padding" src="img/polo.jpg" alt="paulrosset">
</ul>

Voici ces boutons : http://hpics.li/35a19b9

J'ai également mit pas mal de margin pour placer mes elements , doit je les mettre tous en % ? car je les ai tous mit en px ?

Salut Paul !

Pour tes deux problèmes, il faut que tu utilises les medias queries.

Par exemple, si tu veux que quand la largeur de l'écran est < à 1024px, le menu soit caché :

@media screen and (max-width: 1024px)
{
    #nav {
        display: none;
    }
}

Salut !
Merci ca marche tres bien , est ce que je dois respecter les largeurs d'ecran (les paliers 320 / 480 / 600 / 720 / 768 / 900 / 1024) ou je peux ajuster en faisant "inspecter l'element" et en regardant pile au pixel pres ?

Tu peux utiliser des règles comme bon te semble mais je te conseil de mettre en place des paliers pour les règles générales (par exemple : afficher ton menu reponsive).

Il ne faut définir que les width de tes blocs en %. Pour les margins / paddings, tu peux garder les px (les marges intérieures et extérieures ne sont pas relatives à la résolution à moins que cela soit un souhait de ta part).
Qu'entends-tu par "ils partent en vrille" ?

Merci beaucoup en tout cas , j'ai presque tout mit responsive , reste quelque truc comme ca par exemple :
http://hpics.li/2f2dbd7

a.button-cv {
    padding: 1% 4%;
    border: 2px solid #b0b0b0;
    border-radius: 5px;
    margin-left: 90px;
    margin-top: 60px;
    font-family: "my_first_police";
    color: #b0b0b0;
    font-size: 125%;
    text-decoration: none;
}

a.button-cv:hover {
    color: white;
    border: 2px solid white;
    background-color: #3B5998;
    transition: all 0.25s ease-in;
    transition-duration: 0.6s;
}

a.button-cv2 {
    padding: 1% 4%;
    border: 2px solid #b0b0b0;
    border-radius: 5px;
    margin-left: 90px;
    margin-top: 60px;
    font-family: "my_first_police";
    color: #b0b0b0;
    font-size: 125%;
    text-decoration: none;
    transition-duration: 0.6s;
}

a.button-cv2:hover {
    color: white;
    border: 2px solid white;
    background-color: #3B5998;
    transition: all 0.25s ease-in;
}

        <a href="http://www.gfi.fr/" target="_blank">
                <img class="gfi" src="img/gfi.jpg" alt="gfi">
            </a>

            <a href="http://www.amadeus.com/web/amadeus/fr_FR-FR/Amadeus-Home/1259071476599-Page-AMAD_HomePpal" target="_blank">
                <img class="amad" src="img/amad.png" alt="amadeus">
            </a>

Je viens de mettre des % sur le margin left a la place des px , et ca marche , cooolll !
Je pense tout mettre en % , ca à lair de marcher.

J'en profite pour vous demandez si quelqu'un aurait une solution afin de faire glisser les pages en guise de transition d'une page à une autre ?
Les pages couliseraient laissant la place à l'autre lorsque l'utilisateur voudra changer de page.
Je pense que c'est faisable en javascript , mais je débute à peine le javascript.

Merci d'avance,

http://codyhouse.co/gem/animated-page-transition-2/
Ce genre d'animation ?

Oui voila ce genre d'animation, cela serait de gauche à droite ;)

Quelqu'un sait ou je peux trouver un bon tutoriel/cours sur javascript , en proposant des exemples expliqués ?

Merci je connaissais pas Code School il est vraiment bien ! Ca ameliore mon anglais comme ca :)