IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Alignement sur une page (thème wordpress)


Sujet :

Positionnement en CSS

  1. #1
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2020
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Juin 2020
    Messages : 2
    Points : 3
    Points
    3
    Par défaut Alignement sur une page (thème wordpress)
    Bonjour,
    Je viens vers vous car je n'arrive malheureusement pas à trouver d'où vient mon problème.

    J'ai commencé à réaliser un thème wordpress très basique, afin d’acquérir des bases avant d'en faire un plus complexe.
    Alors, le soucis, c'est que ma page "blog" (qui est une catégorie sous wordpress, et donc correspond à archive.php) à un soucis d'alignement (elle devrait être centrée!), alors qu'elle partage un style similaire à celui de mes autres pages.

    J'ai bien cherché un peu partout, revu mes feuilles de style.. rien n'y fait, je n'arrive pas à savoir pourquoi.

    Ci-dessous, le contenu de la page et le style associé :

    archive.php
    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
    <?php get_header();?>
    <div class="page">
    <div class="title"><h1><?php single_cat_title();?></h1></div>
    <div class="bg-box">
    <?php if (have_posts()) : while(have_posts()) : the_post();?>
    <div class="posts-archive">
    	<div class="posts-top">
    		 	<h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
    		 	</div>
    		 	<?php the_excerpt();?>
    	</div>
    <?php endwhile; endif;?>
    </div>
    </div>
    <?php get_footer();?>
    main.css
    Code : 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
    .page {
    	margin: auto;
    	max-width: 1000px; 
    	width: 100%;
    }
     
    /* Titre des pages */
    .title {
    	color: white;
    }
     
    /* background du contenu */
    .bg-box {
    	max-width: 1000px;
    	width: 100%;
    	background: #232323;
    	color: white;
    }
     
    .posts-top {
       display: inline-block;
       max-width: 1000px;
       width : 100%;
       max-height: 15px;
       height: 100%;
    }
     
    .posts-archive {
    	margin: auto;
    	max-width: 970px;
    	width: 100%;
    	padding-bottom: 20px;
    }
    style.css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    body {
     
    	height: 100%;
    	width: 100%;
    	background: #444444;
     
    }
    J'ai aussi up rapidement un site avec le thème sur un hébergeur gratuit, pour ceux qui aimeraient voir en live : http://matra.byethost7.com/category/blog/ (on peut facilement comparer l'alignement entre la page Accueil et la page Blog, dont il est question).

  2. #2
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2020
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Juin 2020
    Messages : 2
    Points : 3
    Points
    3
    Par défaut
    Le problème a été résolu de manière simple,même si je ne sais pas pourquoi il a eu lieu de base.

    J'ai remplacé la classe .page par une classe dédiée à cette page (en l’occurrence .archive), j'ai mis exactement la même chose dedans et le problème a été résolu.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    archive {
     
    	margin: auto;
    	max-width: 1000px; 
    	width: 100%;
     
    }

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Juin 2020
    Messages : 22
    Points : 34
    Points
    34
    Par défaut
    En faite, il peut arrivé que certain widget ajoute du code CSS dans tes pages.

    Je vais te donner un exemple, le widget WP Rocket, ajoute une espaèce de bordure dans son critical css sur les titres H2 et uniquement dans les pages, pas dans les articles !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Lazarus] [LazReport] Problème d'affichage sur une page
    Par Manusm dans le forum Lazarus
    Réponses: 7
    Dernier message: 22/11/2016, 20h29
  2. Problème d'affichage sur une page web
    Par rinuom99 dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 22/08/2014, 13h34
  3. Problème integration applet sur une Page JSF
    Par babouba dans le forum Applets
    Réponses: 0
    Dernier message: 29/03/2012, 13h18
  4. Problème de décalage sur une page
    Par baleiney dans le forum Balisage (X)HTML et validation W3C
    Réponses: 15
    Dernier message: 26/05/2006, 18h54
  5. Problème de chaine sur une page HTML
    Par Kerod dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 23/11/2004, 17h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo