Problème html/css - Pourquoi le code pour justifier un texte ne marche pas ?

Solutions (2)
Tags :
  • Arrière plan
  • Html
  • Programmation
|
Bonjour,

J'ai un blog Tumblr : http://assisdanslenoir.tumblr.com/
Je souhaite que le texte soit justifié lors de mes posts écrits.
Or, quand j'ajoute <div id=”posts” align=”justify”> cela ne fonctionne pas.

Est-ce le bon code pour justifier ? Où dois-je le poster ?

Merci de votre aide.




<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<meta charset="utf-8">
{block:D escription}<meta name="description" content="{MetaDescription}" />{/block:D escription}

<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#300604"/>
<meta name="title" content="#ECECEC" />
<meta name="color:p ost background" content="#3D000A"/>
<meta name="color:Text" content="#ECECEC"/>
<meta name="color:p ost background hover" content="#470119" />
<meta name="color:link" content="#AAAAAA" />
<meta name="color:link hover" content="#DAB8B8" />
<meta name="color:Blockquote line" content="#AAAAAA" />
<meta name="color:Chat label" content="#AB5C5C" />
<meta name="color:Chat Alt" content="#300000" />
<meta name="image:Background" content="" />
<meta name="if:Fixed Background" content="0" />
<meta name="if:No Repeat Background" content="0" />
<meta name="font:Body" content="Verdana, Arial, sans-serif" />
<meta name="if:Show Page Links" content="0" />
<meta name="if:p ost Hover" content="1" />

<!-- JAVASCRIPT -->
<script src="http://static.tumblr.com/qhck824/P24l0dcc8/cufon-yui.js" type="text/javascript"></script>

<script src="http://static.tumblr.com/qhck824/Za7l0ukms/thin.font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('h1, h2', {hover: 'true'});
</script>

<!-- STYLESHEET -->
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}

body {
color: {color:Text};
font: 12px {font:Body};
line-height: 20px;
background: url({image:Background}) {block:IfNoRepeatBackground}no-repeat{/block:IfNoRepeatBackground} {block:IfFixedBackground}fixed{/block:IfFixedBackground} {color:Background};
}

a:link {
color: {color:link};
text-decoration: none;
-webkit-transition: color 1s ease;
}

a:visited {
color: {color:link};
text-decoration: none;
}

a:hover {
color: {color:link hover};
text-decoration: none;
}

a:active {
color: {color:link hover};
text-decoration: none;
}

#wrapper {
width: 540px;
height: auto;
margin: 20px auto;
}

/* HEADER */

#header {
width: 500px;
height: auto;
text-align: center;
margin: 0 0 40px 0;
padding: 20px;
background-color: {color:p ost background};
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.title {
width: 500px;
height: auto;
}

.title h1 {
font-size: 48px;
}


.description {
width: 500px;
height: auto;
margin: 0 auto;
}

#header li {
display: inline;
padding: 0 10px 0 0;
}

/* POSTS */

img {
border: none;
}

#postWrapper h2 {
margin: 0 0 10px 0;
font-size: 36px;
line-height: 36px;
}

#postWrapper p {
margin: 0 0 15px 0;
}

#postWrapper ul, #postWrapper ol {
margin: 0 0 10px 20px;
}

blockquote {
width: 450px;
margin: 5px;
padding: 0 0 0 5px;
font-style: italic;
border-left: 2px solid {color:Blockquote line};
}

a:hover {text-decoration: none;}
a.tooltip span {display: none; padding: 5px; margin-left: -514px; margin-top: 15px; opacity: 1.0; width: 530px; }
a.tooltip:hover span {display: inline; position: absolute; background: {color:p ost background hover}; color: {color:Text}; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; }

.permalink {
font-size: 9px;
position: absolute;
display: block;
width: 16px;
height: 16px;
bottom: 10px;
right: 10px;
background: url(http://static.tumblr.com/mwqr0jt/ihJlp0sld/freya.png) 0 0;
}

.permalink:hover {
background-position: 0 -17px;
}

.quotePost, .textPost, .audioPost,
.photoPost, .videoPost, .chatPost,
.linkPost {
width: 500px;
height: auto;
margin: 0 0 40px 0;
padding: 15px 20px;
position: relative;
background-color: {color:p ost background};
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

{block:IfPostHover}
.quotePost:hover, .textPost:hover, .audioPost:hover,
.photoPost:hover, .videoPost:hover, .chatPost:hover,
.linkPost:hover {
background-color: {color:p ost background hover};
}
{/block:IfPostHover}

#notesWrapper {
width: 520px;
height: auto;
padding: 20px 20px 10px 0;
background-color: {color:p ost background};
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#notesWrapper ol {
list-style: none;
}

#notesWrapper ol li {
margin: 0 0 10px 0;
}

#notesWrapper .avatar {
display: none;
}

.tagged {
padding: 0 10px;
margin: 0 0 40px 0;
background-color: {color:p ost background};
-moz-border-radius: 5px;
}

.tags {
margin: 0 !important;
font-size: 9px;
}

.tags li {
display: inline;
padding: 0 5px;
}

/* CHAT POST */

.label {
color: {color:Chat label};
}

.odd, .even {
padding: 2px 10px;
}

.odd {
background-color: {color:Chat Alt};
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

/* PHOTO POST */

p.photoPost img {
margin: 0 0 10px 0;
}

.photoPost p {
position: relative;
}

p img.zoom {
position: absolute;
top: 10px;
right: 10px;
opacity: 0;
-webkit-transition: opacity 1s ease;
}

p:hover img.zoom {
opacity: 1;
}

/* AUDIO POST */

.albumArt {
width: 206px;
height: 206px;
margin: 0 auto;
}

.songInfo {
text-align: center;
margin: 10px 0 0 0;
}

.player {
margin: 0 auto;
width: 206px;
height: auto;
}

/* FOOTER */

#footer {
width: 540px;
height: 40px;
font-size: 10px;
position: relative;
background-color: {color:p ost background};
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}



span.georgia {
font: 14px Georgia, "Times New Roman";
}

a.previous {
position: absolute;
top: 4px;
left: 20px;
}

a.next {
position: absolute;
top: 4px;
right: 20px;
}

a.previous, a.next {
width: 32px;
height: 32px;
display: block;
overflow: hidden;
text-indent: -9999px;
background: url(http://static.tumblr.com/mwqr0jt/ERClp0sfu/arrows.png) no-repeat;
}

a.previous {
background-position: -2px -2px;
}

a.next {
background-position: -35px -2px;
}

a.previous:hover {
background-position: -2px -35px;
}

a.next:hover {
background-position: -35px -35px;
}

{CustomCSS}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">
<div class="title"><h1>{Title}</h1></div>

{block:D escription}<div class="description"><p>{Description}</div></p>{/block:D escription}

<ul>
<li><a href="/archive" alt="{lang:Archive}">{lang:Archive}</a></li>
<li><a href="/random" alt="{lang:Random}">{lang:Random}</a></li>
<li><a href="{RSS}" alt="{lang:RSS}">{lang:RSS}</a></li>
{block:HasPages}
{block:ifShowPageLinks}
{block:p ages}<li><a href="{URL}" title="{Label}" alt="{Label}">{Label}</a></li>{/block:p ages}
{/block:ifShowPageLinks}
{/block:HasPages}
</ul>
</div><!-- //END HEADER -->

<div id="postWrapper">
{block:p osts}

{block:Quote}
<div class="quotePost">
<h2>{Quote}</h2>
<p>—{Source}</p>
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END QUOTE POST -->
{/block:Quote}

{block:Text}
<div class="textPost">
<h2>{Title}</h2>
{Body}
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END TEXT POST -->
{/block:Text}

{block:Answer}
<div class="textPost">
<p>{lang:Asked by Asker} {Asker}</p>
<h2>{Question}</h2>
<p>{Answer}</p>
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END ANSWER POST -->
{/block:Answer}

{block:Audio}
<div class="audioPost">
{block:AlbumArt}
<div class="albumArt"><img src="{AlbumArtURL}" width="206" height="206" /></div>
{/block:AlbumArt}
<div class="player">{AudioPlayer}</div>
<div class="songInfo">
<h2>{block:Artist}{Artist}{/block:Artist}</h2>
<h2>{block:TrackName}"{TrackName}"{/block:TrackName}</h2>
{block:Caption}{Caption}{/block:Caption}
</div>
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel} — {/block:NoteCount} {lang:p layed PlayCount times}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END AUDIO POST -->
{/block:Audio}

{block:p hoto}
<div class="photoPost">
<p align="center">{LinkOpenTag}<img src="{PhotoURL-500}" title="{PhotoAlt}" alt="{PhotoAlt}" />{LinkCloseTag} {block:HighRes}<a href="{PhotoURL-HighRes}" alt="{lang:High-res photo}"><img src="http://static.tumblr.com/qhck824/t24l2xpf3/fullsize-ico..." class="zoom" width="26" height="26"></a>{/block:HighRes}</p>
<p>{Caption}</p>
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END PHOTO POST -->


{/block:p hoto}

{block:Video}
<div class="videoPost">
<span class="videoHolder">{Video-500}</span>
{block:Caption}<p>{Caption}</p>{/block:Caption}
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END VIDEO POST -->
{/block:Video}

{block:Chat}
<div class="chatPost">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="chatbox">
{block:Lines}
{block:Label}
<div class="{Alt}"><span class="label"><strong>{Label}</strong></span>
<span class="line">{Line}</span></div>
{/block:Label}
{/block:Lines}
</div>
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END CHAT POST -->
{/block:Chat}

{block:Link}
<div class="linkPost">
<h2><a href="{URL}">{Name}</a></h2>
{Description}
<div class="permalink"><a href="{Permalink}" class="tooltip" alt="{lang:p ermalink for this post}"><span>{lang:p osted TimeAgo} {block:NoteCount}— {NoteCountWithLabel}{/block:NoteCount}</span><img src="http://static.tumblr.com/qhck824/C6al0gc5f/clear.png" width="16" height="16"></a></div>
</div><!-- //END LINK POST -->
{/block:Link}

<!-- //POST TAGS -->
{block:p ermalinkPage}
{block:HasTags}
<div class="tagged">
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
</ul>
</div>
{/block:HasTags}
{/block:p ermalinkPage}

{/block:p osts}

<!-- //POST NOTES -->

{block:p ostNotes}
<div id="notesWrapper">
{PostNotes}
</div>
{/block:p ostNotes}

<!-- //END POST NOTES -->

</div><!-- //POST WRAPPER -->

{block:p agination}
<div id="footer">
{block:p reviousPage}<a href="{PreviousPage}" class="previous" alt="{lang:p revious page}">Previous</a>{block:p reviousPage}{block:NextPage}<a href="{NextPage}" class="next" alt="{lang:Next page}">Next</a>{/block:NextPage}</p>
</div>
{block:p agination}


</div><!-- //END WRAPPER -->

</body>
</html>





  • Meuniers a édité ce message
Contenus similaires
Score
1
òh
òi
|
Essaye plutôt:
  1. <div id=”posts” style="text-align: justify;”>
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci de votre réponse.

Ça justifie le texte, mais ça supprime le cadre du post.
Peut-être ai-je mal placé la ligne de code ? (cf ci-dessous)
Comment faire pour garder le cadre et avoir le texte justifié à l'intérieur du cadre ?

Merci.

<div id="postWrapper">
<div id=”posts” style="text-align: justify;”>
{block:p osts}
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS