Tout le contenu de mon site est déplacé sur la droite ?

Bonsoir,

Tout d'abord, merci de prendre le temps de lire ces quelques mots et de bien vouloir m'apporter votre aide. Je suis absolument novice en termes de CSS mais ai acheté un abonnement premium pour mon blog sous Wordpress.com afin de pouvoir modifier la largeur des images. C'est chose faite, or tout le contenu est désormais décalé sur la droite comme vous pouvez le voir : http://themountainlullaby.com

Par ailleurs, je ne parviens pas à garder mon header fixe lorsque j'utilise la barre de défilement, si j'inscris 'position: fixed' pour le 'masthead' tout s'entremêle et ce n'est pas ce que je souhaite. Pourriez-vous m'éclairer à ce sujet ?

Merci infiniment pour l'aide que vous pourrez me porter.

Salut,

Bienvenu à toi

Concernant le décalage à droite, en faite, la div portant l'ID content à un width:1100px;

#content {
    width: 1100px;
}

En enlevant cette propriété tout revient dans l'ordre
Voila que la ligne problématique est au même niveau que ton header :

#header{position:fixed}#content{width:1100px}

Concernant la position fixe, il vaut mieux faire comme cela :

#header > nav{position:fixed}

et cela fonctionnera mieux

Bonsoir Jencal et merci pour votre aide, je vous en suis très reconnaissante.

J'ai tenu compte de votre message et modifié tout ceci, je n'ai plus le décalage en effet mais la largeur du texte et des photos est de nouveau réduite à la largeur initiale du thème Wordpress. Je recherche une largeur de 1100px qui se modifie pourtant normalement dans "Media Width" une option premium de Wordpress dans laquelle j'inscris 1100px, en vain.

De même, il me semble que l'header ne reste pas fixe lorsque je fais défiler mon blog. J'aimerais sincèrement apprendre et comprendre ce langage HTML/CSS qui, malheureusement, n'a aucun sens pour moi à l'heure actuelle.

Merci encore.
Modifié par laura9205 (09 Mar 2016 - 20:29)

Je comprend, c'est d'autant plus difficile d'apprendre avec wordpress (que je déteste)

Concernant les 1100px, il faut l'appliquer sur ta div comportant l'id main

#main, #colophon {
    max-width: 1100px;
    margin: 0 auto;
}

pour moi ton header reste fixe tout le temps .... je ne comprend pas

Cela fonctionne !!!

Merci mille fois, vous venez d'illuminer ma journée.

Quant à l'header, je m'exprime peut-être mal, il demeure fixe mais si j'utilise la barre de défilement, il disparaît peu à peu avec un bloc blanc.

Merci encore ! Il faut absolument que j'apprenne à coder désormais. Connaîtriez-vous un site ou un tutoriel pour les débutants ?

Passez une excellente soirée.

Quand tu parle de "header" tu parle de quoi ? car moi je parle uniquement de ton menu de navigation, ta ligne noir.

Oui pardon, je veux dire le logo "the mountain lullaby" et non la ligne du menu. Merci ! D'ailleurs, à ce sujet (j'en demande peut-être beaucoup ...), j'aimerais faire en sorte que ce logo contienne un lien vers l'accueil, de telle sorte qu'avec un simple clic, on se retrouve sur la page principale. Est-ce possible ?

Merci encore.

Pour rajouter un liens sur le logo, cela va être compliquer, car la balise <header> contient un background URL (avec l'url de ton image, de ton logo) ET la balise <nav> qui contient ton menu
en gros

<header> // contient le background logo (gérer en css)
  <nav> </nav> // contient le menu noir
</header>

Donc si tu veux mettre un lien sur le logo, qui est généré via le CSS sur la balise <header> il faut encapsuler celle ci dans une balise <a href=""></a>, mais comme dit juste avant, ta balise <nav> est également dans le <header>... problème! Elle aura aussi le lien...

Donc soit tu change tout et tu mets une balise <img /> dans le header (tu encapsule uniquement celle ci dans la balise <a> et non plus le <header>) soit.... soit je sais pas ^_^

Concernant le <header> fixed.... on retrouve un comportement étrange, le header passe "en dessous" de ta div main... malgré l'application de la propriété z-index... alors je fais des tests... J'en sais pas plus.