Le texte reste à gauche malgré les balises html

  • Statut : non résolu
14 sujets de 1 à 14 (sur un total de 14)
  • Auteur
    Messages
  • #451163
    plop
    Membre
    Initié WordPress
    11 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 2.1.2
    – Thème utilisé : Vistered Little 1.6
    – Plugins en place : aucun
    – Nom de l’hebergeur : free
    – Adresse du site :

    Problème(s) rencontré(s) : le texte reste à gauche malgré les balises align= »center » et align= »right »…

    Je m’explique…

    J’ai testé différent thémes avec un seul article qui contenait un texte à gauche, au centre, et à droite.
    Et seulement sur le théme Vistered Little 1.6 le texte resté complétement à gauche malgré les balises dans le code :

    <p align="left">gauche</p>
    <p align="center">milieu</p>
    <p align="right">droite</p>

    En gros ca donne ca :
    sanstitrehw9.jpg

    Je suis méme allé plus loin en installant un wordpress vierge sur un autre ftp avec seulement ce théme et ca me fait la méme chose 😉

    En vous remerciant d’avance pour vos réponses et votre aide :D

    #595784
    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4080 contributions

    C’est normal. C’est surement que dans le fichier CSS de ce thème il n’y a pas de paramétrage concernant les variables en question… Il faut donc étudier le fichier CSS…

    #595785
    plop
    Membre
    Initié WordPress
    11 contributions

    Ah beh il va falloir m’aider alors :D

    Voila le fichier style.css en question :

    * {
    	margin: 0px;
    	padding: 0px;
    	font-family: « verdana », sans-serif;
    	}
    body {
    	font-size: 16px;
    	margin: 0px;
    	padding: 0px;
    	background-position: top center;
    	background-attachment: fixed;
    	}
    a:link, a:active, a:visited {
    	text-decoration: none;
    	}
    a:hover	{
    	}
    a img {
    	border: 0px;
    	}
    #header {
    	width: 100%;
    	height: 107px;
    	padding: 10px 0px;
    	}
    	
    #header.plainheader {
    	height: 57px;
    }
    	
    #header.headerfixed {
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 100;
    }
    	
    h1 a {
    	margin-left: 10px;	
    	font-size: 1em;
    	font-weight: normal;
    	font-family: « Trebuchet MS », sans-serif;
    	letter-spacing: -.1em;
    	}
    	
    h1 a:link, h1 a:active, h1 a:visited, h1 a:hover {
    	}
    
    .left {
    	float: left;
    	font-size: 1.1em;
    	}
    
    .right {
    	float: right;
    	font-size: 1.1em;
    	}
    
    .clear {
    	clear: both;
    	height: 0px;
    	overflow: hidden;
    	}
    
    label {
    	font-size: .8em;
    	}
    	
    .wallpaper_form {
    	display : block;
        float: left;
    	margin: 10px 10px 10px 10px;
    	height: 22px;
    	width: 22px;
    	background-position: center;
    	overflow: hidden;
    }
    .wallpaper_form .wallpaper {
    	border: dotted 1px black;
    }
    
    .wallpaper_form.framed {
    	padding: 14px;
    	margin: -4px -4px -4px -4px;
    	height: 20px;
    	width: 20px;
    }
    
    .wallpaper {
    	width: 22px;
    	height: 22px;
    	overflow: hidden;
    }
    
    .wallpaper_form.framed  .wallpaper {
    	width: 20px;
    	height: 20px;
    }
    
    #thumbs
    {
    	margin: 0px 10px;
    }
    
    .thumbright .wallpaper_form {
    	float: right;
    }
    	
    	
    #bodyowner {
    	width: 740px;
    	margin: 0px auto;
    	}
    
    #bodyowner.headerfixed {
    	padding-top: 137px;
    }
    
    #bodyowner.headerfixed.plainheader {
    	padding-top: 87px;
    }
    
    #search {
        width: 110px;
        padding: 0px;
        margin-right: 15px;
    }
    #search label {
        font-size: .6em;
    }
    
    #s {
    	width: 110px;
    	background: transparent;
    	padding: 2px;
    	font-size: .6em;
    }
    
    code {
            margin: 5px;
            overflow: auto;
            padding: 3px;
            font-size: .9em;
            display: block;
            }
    #topmenu {
            position: absolute;
            text-align: right;
            top: 63px;
            right: 10px;
            font-size: .8em;
            }
    #topmenu a {
            background: url(‘images/star.png’) left center no-repeat;
            padding-left: 13px;
            margin-left: 10px;
            }
    /* END */
    
    #bodyowner .blog { 
    	width: 670px;
    }
    
    #bodyowner .blogbefore .middle { 
    	width: 740px;
    }
    
    
    #bodyowner .blogafter .middle { 
    	width: 740px;
    }
    
    
    /* Begin Blog and comment styles. */
    
    #contentcontainer {
    	font-size: .7em;
    	width: 492px;
    	float: left;
    	margin-top: 5px;
    	}
    
    #contentcontainer .blog {
    	width: 422px;
    }
    
    .blog {
    	margin: 0px;
    	padding: 0px 35px;
        overflow: hidden;
    	}
    
    #contentcontainer .blogbefore .middle ,
    #contentcontainer .blogafter .middle 
    { 
    	width: 492px;
    }
    
    .blogbefore .middle ,
    .blogafter .middle 
    { 
    	height: 32px;
    	width: 492px;
    	overflow: hidden;
    }
    
    .blogbefore .middle {
    	margin: 10px 0px 0px 0px;
    }
    
    .blogafter .middle {
    	margin: 0px 0px 10px 0px;
    }
    
    .blogbefore .left,
    .blogbefore .right,
    .blogafter .left,
    .blogafter .right
    {
    	height: 0;
    	overflow: hidden;
    }
    
    #contentcontainer p {
    	text-align: justify;
    	padding: 5px;
    	}
    #contentcontainer p.headertext {
    	text-align: left;
    	font-size: .9em;
    	}
    #contentcontainer p.footertext {
    	text-align: right;
    	font-size: .9em;
    	margin: 5px 0px;
    	}
    #contentcontainer h3 {
    	font-size: 1.6em;
    	text-align: left;
    	font-weight: normal;
    	}
    #contentcontainer ol {
    	margin: 5px 30px;
    	}
    #contentcontainer ul {
    	margin: 5px 15px;
    	}
    #contentcontainer ul li {
    	list-style-type: none;
    	background: url(‘images/star.png’) 0px 2px no-repeat;
    	padding-left: 13px;
    	}
    	
    #contentcontainer h3 a {
    	display: block;
    	width: 100%;
    	}
    .blog blockquote {
            margin: 5px 15px;
            padding: 3px;
            font-size: .9em;
            }
    #comment {
    	display: block;
    	width: 360px;
    	background: transparent;
    	padding: 5px;
    	margin: 10px auto;
    	font-size: .9em;
    	}
    #inputcontainer {
    	width: 366px;
    	margin: 10px auto;
    	}
    #namefield {
    	display: block;
    	float: left;
    	width: 110px;
    	margin-right: 15px;
    	}
    #emailfield {
    	display: block;
    	float: left;
    	width: 110px;
    	margin-right: 15px;
    	}
    #urlfield {
    	display: block;
    	float: left;
    	width: 110px;
    	}
    #namefield input, #emailfield input, #urlfield input {
    	width: 110px;
    	background: transparent;
    	padding: 2px;
    	font-size: .8em;
    	}
    #submitter {
    	clear: both;
    	text-align: center;
    	}
    #submitter input {
    	display: block;
    	width: 150px;
    	margin: 10px auto;
    	}
    .blog img {
            max-width: 362px;
            }
    /* END */
    
    /* Begin Menu styles */
    
    #menucontainer {
    	width: 233px;
    	float: right;
    	font-size: .6em;
    	margin-top: 5px;
    	}
    .menu {
    	margin: 0px;
    	padding: 0px 35px;
    	width: 163px; 
    	overflow: hidden;
    }
    
    .menubefore {
    	height: 32px;
    	width: 233px;
    	margin: 10px 0px 0px 0px;
    	overflow: hidden;
    }
    
    .menuafter {
    	height: 32px;
    	width: 233px;
    	margin: 0px 0px 10px 0px;
    	overflow: hidden;
    }
    
    #menucontainer p, #menucontainer ul {
    	text-align: justify;
    	padding: 3px;
    	list-style-type: none;
    }
    
    #menucontainer ul#links {
        padding: 0px;
    }
    
    #menucontainer ul ul {
        padding: 0px 10px;
    }
    
    #menucontainer ul#links ul {
        padding: 3px;
    }
    
    #menucontainer h3, #wp-calendar caption, #menucontainer h2 {
    	font-size: 1.6em;
    	text-align: left;
    	font-weight: normal;
        background: url(‘images/bigstar.png’) left center no-repeat;
        padding-left: 16px;
    }
    #wp-calendar {
    	width: 90%;
    	margin: 0px auto;
    	text-align: center;
    	}
    
    .menu p.links a, .menu ul li {
    	background: url(‘images/star.png’) 0px 2px no-repeat;
    	padding-left: 12px;
    	line-height: 12px;
            }
    
    ul#links li {
            list-style-type: none;
    	background: none;
            margin: 0px;
            padding: 0px;
            }
    
    ul#links li li {
    	background: url(‘images/star.png’) 0px 2px no-repeat;
    	padding-left: 12px;
    	line-height: 12px;
            }
    
    .feedicon {
            margin-top: 4px;
            cursor: pointer;
            }
    		
    #contentcontainer div.sociable {
    	float: left;
    	margin: 0px !important;
    	padding: 0px 5px;
    }
    #contentcontainer .sociable ul li {
    	list-style-type: none;
    	background: none;
    	padding: 0px;
    	}
    
    #contentcontainer .postlinks {
    	clear: both;
    }
    
    #contentcontainer .tags {
    	float: left;
    	margin: 0px;
    	padding: 0px 5px;
    }
    
    #contentcontainer .footeritems{
    	clear: both;
    	padding: 0px;
    }
    
    #contentcontainer .print  {
    	float: right;
    	margin: 0px;
    	padding: 0px 5px;
    }
    
    .blog table {
    	border: 1px dotted #777;
    	border-collapse: collapse;
    	margin: 0.5em;
    }
    
    .blog th, .blog td {
    	text-align: left;
    	border: 1px dotted #777;
    	padding: 0.5em;
    }

    Et index.php :

    
    
    
    <div id="contentcontainer">
    
    
    
    <div class="blogbefore"></div>
    <div class="blog"><div style="overflow: hidden">
    <h3><a href=" » title= »Permalink for « ></a></h3>
    <p class="headertext">Posted on  by . <br />Categories: .</p>
    
    <p class="footertext"></p><p class="footertext"></p>
    </div></div>
    <div class="blogafter"></div>
    
    
    
    
    
    <div class="blogbefore"></div>
    <div class="blog">
    <h3>There are no blogs relating to your query.</h3>
    </div>
    <div class="blogafter"></div>
    
    
    
    
    <div class="blogbefore"></div>
    <div class="blog"><div style="overflow: hidden">
    <p>
    <span class="right"></span>
    <span class="left"></span>
    </p>
    <p class="clear"></p>
    </div></div>
    <div class="blogafter"></div>
    
    
    
    </div>

    #595786
    damino
    Participant
    Maître WordPress
    1243 contributions

    Et puis les balises p sont du type en bloc. Il va donc falloir effectivement préciser ta feuille de style. Et de plus je te conseille si tu veux créer des sortes de colonnes au sein d’un même article de bien te familiariser avec le XHTML et le CSS.
    Si t’as 5 minutes regardes ces 3 pages (et tout le site si tu veux). Cela te fera gagner du temps pour plus tard.
    http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne
    http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
    http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

    #595787
    plop
    Membre
    Initié WordPress
    11 contributions

    les balises p elles se mettent d’origine avec l’éditeur visuel de wordpress, la c’est un probléme au niveau de la feuille de style du théme certe mais, je n’arrive pas à trouver d’ou viens le probléme.
    Il me semble que ce qui définis le contenus de l’article c’est mais il n’y a pas de style attaché à ce meme code…voila le code qui correspond à l’ensemble d’un article il me semble :

    <div class="blogbefore"></div>
    <div class="blog"><div style="overflow: hidden">
    <h3><a href=" » title= »Permalink for « ></a></h3>
    <p class="headertext">Posted on  by . <br />Categories: .</p>
    
    <p class="footertext"></p><p class="footertext"></p>
    </div></div>
    <div class="blogafter"></div>

    J’ai bien regardé chaque style définis par rapport à style.css mais je vois pas le probléme 😕

    #595788
    damino
    Participant
    Maître WordPress
    1243 contributions

    Ben oui le content est généré par ce que tu écris avec ton éditeur.
    Si tu veux formater différemment ton texte, il te faut passer en mode HTML et ajouter des balises pour créer tes boites. Ensuite dans la feuille de style tu donneras les valeurs aux propriétés des balises en question de manière à avoir (dans ton cas) 3 boites côtes à côtes.

    Tu as l’exemple dans cette page au niveau de « Trois blocs côte-à-côte avec un espace de séparation : »

    Par contre avec cette méthode il te faudra à chaque fois dans ta rédaction ajouter tes

    <div class="bloc1">bla bla bla</div>
    <div class="bloc2">bli bli bli</div>
    <div class="bloc3">blu blu blu</div>

    comme indiqué dans l’exemple cité. Mais si c’est ponctuel ce n’est pas très contraignant.

    Il me semble que certains cherchaient (ont-ils trouvés ?) à mettre en place une solution qui permette au texte de se formater tout seul en plusieurs colonnes : dès un certains nombre de lignes le texte « bascule » dans une autre colonne.

    #595789
    plop
    Membre
    Initié WordPress
    11 contributions

    pourquoi faire tout se bazar alors qu’avec tout les autres thémes ca s’aligne correctement? c’est ca que je veux savoir dans le fond

    #595790
    damino
    Participant
    Maître WordPress
    1243 contributions

    Vas-y fais péter un lien vers ton site.

    #595791
    plop
    Membre
    Initié WordPress
    11 contributions
    #595792
    plop
    Membre
    Initié WordPress
    11 contributions

    alors tu vois d’ou ca peut venir ?

    #595793
    Rod
    Membre
    Maître WordPress
    744 contributions

    tout simplement parce que ce que tu utilises est obsolete 🙂

    on n’utilise plus de balise align= »alignement » … car dans ce cas la c’est le CSS qui est de toute facon prioritaire.

    donc si tu veux faire ca … tu fais à la rigueur

    dans le css …

    .left { text-align : left; }
    .center { text-align : center; }
    .right { text-align : right; }

    mais tu vas me sortir « vi mais j’ai déjà certains trucs avec des classes ! »

    sache que les classes sont accumulables.

    Donc si tu as deja

    le css de red etant

    .red { color : red }

    tu peux tres bien faire

    dans ce cas, ton paragraphe en rouge sera centré.

    #595794
    plop
    Membre
    Initié WordPress
    11 contributions

    oui je vois ce que tu veux dire 🙂 mais moi je l’es pas codé le align , j’ai tout fait avec le visuel…j’ai pas volontairement mis

    gauche

    , je vous ai juste copié ce qu’il y avait dans l’onglet « Code », moi j’ai tout fait avec l’onglet « Visuel ».
    On utilise plus les balises align mais elles sont d’origine misent lorsqu’on écrit un article en visuel (ce qui est mon cas) 😐

    Pour tout les autres thémes l’affichage est bon sauf pour celui que je veux c’est balot

    #595795
    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4080 contributions

    Il est vrai qu’à ce niveau l’éditeur de WP utilise encore du code pas top pour les alignement (align= »left » par ex.) donc si tu n’utilises que ça ton code au final est pas « propre »… c’est bien dommage je trouve.

    #595796
    plop
    Membre
    Initié WordPress
    11 contributions

    propre ou pas ca doit s’afficher correctement…ca fait 2jours que je cherche dans le css ce qui pourrait bloquer l’affichage correct du message mais impossible de trouver 😡

14 sujets de 1 à 14 (sur un total de 14)
  • Vous devez être connecté pour répondre à ce sujet.