Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
J'ai de sérieux problèmes avec le thème Qrazy times.
J'ai des problèmes de présentation quand je rédige un billet, qui sont les suivants :
- image placée au centre : une partie du texte se retrouve le long de l'image alors qu'il ne devrait pas y en avoir,
-image placée à gauche dans le corps du billet : pas de texte le long de l'image alors qu'il devrait y en avoir...
- le texte du bloc de citation (>) se retrouve complètement décalé à droite par rapport au contenu du billet.
Je corrige tout ça manuellement avant la mise en ligne, ce qui à la longue s'avère fastidieux.
J'avoue que j'ai joué à l'apprenti-sorcier en modifiant le fichier style css pour supprimer une colonne au thème...
Voici mon fichier "style css" personnalisé :
/* -----------------------------------------------------------------------
Qrazy Times, Thème pour Dotclear 2
Création originale, par David YIM (davidyim.fr)
* Grid-Based Design
* Crée pour Dotclear 2 (version 2.1 minimum requise)
* Licence Creative Commons : http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
* Live demo : http://davidyim.fr/demo/qrazy-times/
* Support : contact@davidyim.fr
* Crédits : Blueprint CSS Framework 0.7.1
Noviny Menu de Navigation (dotclear.org)
jQuery Multi Level CSS Menu (DynamicDrive - www.dynamicdrive.com)
* Remerciements : Dotclear (dotclear.org)
Jean-Michel ROYER (www.jm-royer.com)
Vous (si vous utilisez ce thème)
----------------------------------------------------------------------- */
/* GLOBAL DIV */
body, #page, #container, #top, #blogname, #blogdesc, #prelude, #global-nav, #categories-nav, #wrapper, #main, #content, #content-first, #content-second, #content-third, #sidebar, #blogabout, #blogsearch, #blognav, #footer, #footer-content {
margin : 0;
padding : 0;
}
/* GLOBAL STYLES */
body {
font-family : "Helvetica Neue", Arial, Helvetica, Geneva, Sans-Serif;
font-family : Georgia, Serif; /* Famille de police active */
font-size : 80%;
text-align : left;
color : #222;
background : #222;
}
h1, h2, h3, h4, h5 {
font-family : Helvetica, Arial, Geneva, Sans-Serif; /* Famille de police alternative recommandée */
font-family : Palatino, Georgia, Serif; /* Famille de police active */
}
a, a:link, a:visited {
color : #89151e;
text-decoration : none;
}
a:hover {
text-decoration : underline;
color : #222;
}
#page {
width : 100%;
float : left;
padding : 45px 0;
position : relative;
background : #fafafa;
}
#container {
width : 960px;
margin : 0 auto;
}
/* TOP */
#top {
margin : 0 10px;
padding : 20px 0;
border-top : 1px solid;
}
#prelude {
position : absolute;
top : 0;
right : 0;
visibility : hidden;
}
#navigation {
margin : 0 10px;
padding : 1px 0 0 0;
border-top : 2px solid;
}
/* GLOBAL NAVIGATION */
#global-nav {
width : 100%;
height : 35px;
clear : both;
float : left;
background : #fafafa;
position : absolute;
top : 0;
left : 0;
}
#global-nav ul {
width : 936px;
margin : 0 auto;
padding : 8px 0 0 0;
}
#global-nav ul li {
display : block;
float : left;
margin : 0 20px 0 0;
font-size : 100%;
}
#global-nav ul li.nav-active a {
color : #89151e
;
}
#global-nav ul li a {
color : fff;
}
/* CATEGORIES NAVIGATION */
#categories-nav {
width : 100%;
clear : both;
float : left;
border-top : 1px solid;
border-bottom : 1px solid;
}
/* CATEGORIES NAVIGATION JQUERY SLIDE EFFECT */
.jqueryslidemenu {
width : 100%;
}
.jqueryslidemenu img {
display : none;
}
.jqueryslidemenu ul {
margin : 0;
padding : 0;
list-style-type : none;
}
.jqueryslidemenu ul li {
position : relative;
display : block;
float : left;
}
.jqueryslidemenu ul li a {
display : block;
padding : 8px 20px 8px 0;
}
* html .jqueryslidemenu ul li a {
display : inline-block;
}
.jqueryslidemenu ul li ul {
position : absolute;
left : 0;
display : block;
visibility : hidden;
border : none;
}
.jqueryslidemenu ul li ul li {
display : list-item;
float : none;
}
.jqueryslidemenu ul li ul li ul {
top : 0;
}
.jqueryslidemenu ul li ul li a {
width : 160px;
padding : 3px 10px;
margin : 0;
border-bottom : 1px solid #fff;
background : #eee;
}
/* MAIN CONTENT LAYOUT */
#wrapper {
width : 100%;
float : left;
clear : both;
padding : 20px 0;
}
#main {
width : 100%;
margin : 0 -384px 0 0;
float : left;
}
#content-info {
margin : 0 10px 20px 10px;
padding : 0 0 10px 0;
border-bottom : 3px double;
}
#content h2 {
margin-bottom : 0;
}
#content-info p a {
text-decoration : underline;
}
#content-info p a:hover {
text-decoration : none;
}
#subcategories {
margin : 0 10px 20px 10px;
padding : 0 0 10px 0;
}
#subcategories li {
list-style : square;
}
.content-inner {
margin : 0 10px;
}
.content-line {
clear : both;
}
.content-title {
margin : 0 10px;
color : #89151e;
font-size : 100%;
}
.content-feed {
font-size : 90%;
}
.pagination {
margin : 0 10px;
padding : 20px 0;
clear : both;
font-size : 110%;
}
.pagination a {
text-decoration : underline;
}
.pagination a:hover {
text-decoration : none;
}
.post {
margin : 0 10px;
padding : 0;
}
.post-date {
margin : 0;
font-size : 90%;
}
.post-title {
margin : 0;
line-height : 1.2;
}
.post-category {
font-size : 90%;
}
.post-category a {
text-decoration : underline;
border-bottom : 1px dotted;
}
.post-excerpt a, .post-excerpt a:link, .post-content a, .post-content a:link {
text-decoration : underline;
}
.post-excerpt a:hover, .post-content a:hover {
text-decoration : none;
}
.post-tags {
margin : 0 0 1.5em 0;
clear : both;
}
.post-tags ul {
margin : 0;
}
.post-tags ul li {
display : inline;
}
.post-tags ul li a {
text-decoration : underline;
}
.read-it {
margin : 0;
font-size : 90%;
text-transform : lowercase;
clear : both;
}
/* CONTENT-FIRST : LATEST ENTRY */
#content-first {
width : 576px;
margin : 0;
padding : 0;
float : left;
clear : left;
}
#content-first .post {
padding-bottom : 20px;
border-bottom : 1px dotted #cdcdcd;
}
/* CONTENT-SECOND : SECONDARY ENTRY & LATEST COMMENT */
#content-second {
width : 556px;
margin : 10px 10px 0 10px;
padding : 10px 0;
float : left;
clear : left;
border-bottom : 1px dotted #cdcdcd;
}
#content-second .content-title {
margin : 0;
}
#content-second-left {
width : 374px;
padding : 0 0px 0 0;
float : left;
border-right : 1px dotted #cdcdcd;
}
#content-second-left .post {
margin : 0 10px 0 0;
}
#content-second .post-title {
font-size : 150%;
}
#content-second .post-content img {
display : none;
}
#content-second .post-content .post-first-image {
display : block;
margin : 0.25em 1em 0 0;
padding : 0;
float : left;
}
#content-second-right {
margin : 0 0 0 384px;
}
#content-last-comment {
margin : 0;
}
#content-last-comment .last-comment {
font-size : 120%;
font-style : italic;
margin : 0 0 5px 0;
line-height : 1.4;
}
#content-last-comment .last-comment a:hover {
text-decoration : none;
color : #999;
}
#content-last-comment .last-comment-author {
margin : 0 10px 10px 10px;
}
/* CONTENT-THIRD : NEXT THREE ENTRIES */
#content-third {
width : 576px;
padding : 10px 0;
float : left;
clear : left;
}
#content-third .content-title {
padding-top : 20px;
}
#content-third .post {
width : 172px;
float : left;
margin : 0;
padding : 10px;
}
#content-third .post-title {
font-size : 150%;
}
#content-third .post-content img {
display : none;
}
#content-third .post-content .post-first-image {
display : block;
margin : 0.25em 1em 0 0;
padding : 0;
float : left;
}
/* COMMENTS, COMMENT-FORM & PINGS */
#comments, #comment-form, #pings {
width : 556px;
margin : 0 10px;
padding : 30px 0;
float : left;
clear : both;
}
#comments h3, #comment-form h3, #comment-preview h3, #pings h3 {
margin : 0 0 10px 0;
}
.comment {
clear : both;
padding : 15px 0 0 0;
border-top : 1px solid #ddd;
}
.comment dt {
width : 172px;
float : left;
margin : 0;
padding : 0;
position : relative;
font-weight : normal;
}
.comment dd {
margin : 0 0 15px 192px;
}
#comment-form {
}
#comment-form fieldset {
margin : 0;
padding : 0;
border : none;
}
#comment-form p.field {
margin : 0;
padding : 10px 0;
border-top : 1px solid #ddd;
width : 556px;
float : left;
clear : both;
}
#comment-form p.field label {
display : block;
float : left;
width : 172px;
font-weight : normal;
text-transform : lowercase;
}
#comment-form p.field input {
width : 172px;
float : right;
margin : 0 190px 0 0;
padding : 0;
font-family : inherit;
font-size : 100%;
}
#comment-form p.field textarea {
margin : 0;
padding : 5px;
width : 356px;
float : right;
font-family : inherit;
font-size : 100%;
}
#comment-form p.form-help, #comment-form p.remember {
margin : 0 0 20px 192px;
}
#comment-form p.remember input {
display : block;
margin : 0 10px 0 0;
float : left;
}
#comment-form p.buttons {
margin : 0 0 0 192px;
}
#comment-form p.buttons input {
font-family : inherit;
margin : 0 10px 0 0;
cursor : pointer;
font-size : 100%;
}
#comment-form p.remember label {
font-weight : normal;
}
/* WIKIBARRE PLUGIN STYLES */
#comment-form p.field .jstElements {
margin : 0 0 0 188px;
padding : 0 0 10px 0;
}
#comment-form p.field .jstElements button {
margin : 0 4px 0 0;
padding : 0;
cursor : pointer;
}
#comment-form p.field .jstElements span {
display : none;
}
#comment-form p.field .jstEditor textarea {
border : 1px solid #ddd;
}
#comment-form p.field .jstHandle {
margin : 0 0 0 219px;
padding : 20px 0 0 0;
clear : both;
}
#pr {
margin-bottom : 80px;
}
#pr .comment-preview {
margin : 0;
padding : 15px 0 0 192px;
border-top : 1px solid #dadada;
}
.error,
.message {
width : 536px;
margin : 0 10px 10px 10px;
float : left;
clear : both;
font-size : 110%;
background : #222;
color : #89151e;
padding : 10px;
}
#pings dt {
padding : 10px 0 5px 0;
font-weight : bold;
border-top : 1px solid #ddd;
}
#pings dd {
margin : 0;
}
#pings dd a {
text-decoration : underline;
}
#ping-url, #comments-feed {
clear : both;
margin : 0 10px 10px 10px;
}
#comments-feed a {
text-decoration : underline;
}
/* RIGHT SIDEBAR */
#sidebar {
width : 383px;
float : right;
border-left : 1px dotted #cdcdcd;
}
/* CUSTOM CONTENT */
#blogabout {
margin : 0;
padding : 0;
}
#blogabout #about {
margin : 0 10px;
}
#about a, #about a:link {
text-decoration : underline;
}
#about a:hover {
text-decoration : none;
}
/* SEARCH, ONLY HOMEPAGE */
#blogsearch {
margin : 0 10px 20px 10px;
padding : 0;
clear : both;
}
#blogsearch #search {
margin : 0;
padding : 10px;
border-top : 1px solid #ccc;
border-bottom : 1px solid #ccc;
background : #89151e;
}
#search fieldset, #search p {
margin : 0;
padding : 0;
border : none;
}
#search #q {
width : 255px;
float : left;
}
#search .submit {
width : 76px;
float : right;
margin : 0;
padding : 3px 0 2px 0;
border : none;
background : #fff;
color : #b82828;
font-size : 100%;
font-family : inherit;
text-align : center;
cursor : pointer;
}
/* BLOGNAV GLOBAL STYLES */
#blognav {
width : 362px;
float : left;
}
#blognav #search {
display : none;
}
#blognav div {
margin : 0 10px 10px 10px;
padding : 0;
}
#blognav h2 {
font-size : 135%;
text-transform : lowercase;
color : #89151e;
margin : 0;
}
#blognav h3 {
margin : 0;
}
#blognav p {
margin : 0 0 10px 0;
}
#blognav ul {
margin : 0 0 10px 0;
}
#blognav ul li {
list-style : none;
}
#sidebar #blognav ul li ul {
margin : 0 0 0 20px;
}
#sidebar #blognav ul li ul li {
margin : 0;
padding : 0;
border : none;
list-style : square;
font-weight : normal;
}
/* SIDEBAR WIDGETS SPECIALS STYLES */
.text a, .text a:link {
text-decoration : underline;
}
.text a:hover {
text-decoration : none;
}
.tags ul {
margin : 0;
}
.tags strong {
text-decoration : underline;
}
.tag0 {
font-size : 75%;
}
.tag10 {
font-size : 80%;
}
.tag20 {
font-size : 90%;
}
.tag30 {
font-size : 100%;
}
.tag40 {
font-size : 110%;
}
.tag50 {
font-size : 120%;
}
.tag60 {
font-size : 140%;
}
.tag70 {
font-size : 150%;
}
.tag80 {
font-size : 160%;
}
.tag90 {
font-size : 170%;
}
.tag100 {
font-size : 180%;
}
/* FOOTER */
#footer {
margin : 0 10px;
padding : 1px 0 0 0;
clear : both;
border-top : 2px solid;
}
/* FOOTER CATEGORIES NAVIGATION, NO JQUERY SLIDE EFFECT */
#footer-categories-nav {
width : 100%;
float : left;
clear : both;
border-top : 1px solid;
border-bottom : 1px solid;
}
#footer-content {
width : 100%;
float : left;
clear : both;
margin : 0;
padding : 20px 0;
border-bottom : 1px solid;
}
#footer-content a {
text-decoration : underline;
border-bottom : 1px dotted;
}
#footer-nav {
width : 100%;
position : absolute;
margin : 0;
padding : 0;
bottom : 0;
left : 0;
background : #89151e;
height : 35px;
font-size : 90%;
}
#footer-nav a {
display : block;
width : 940px;
margin : 0 auto;
padding : 10px 0;
color : 89151e;
}Si une âme généreuse peut se pencher sur mon problème et apporter les corrections, ce serait vraiment sympa.
ndMoe : mise en forme du code avec la balise code.
Dernière modification par Moe (2009-11-14 10:26:55)
Hors ligne
Il y a une feuille de style screen.css avec des règles sur p img qui contredisent celles qui sont appliquées par la mise en forme appliquée par Dotclear. Supprime ces règles et ça devrait s’arranger ;-)
Ceci étant, il est curieux que les règles en question ne soient pas écrasées par celles qui s’appliquent à l’élément même dans la source de la page, mais là, il faudrait un plus grand sorcier que moi en css pour éclaircir ce mystère…
EDIT: je n’ai pas vu où étaient les blockquotes, tu as un lien direct ?
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Merci pour la rapidité de ta réponse.
Dans le fichier screen.css, j'ai donc ôté les deux lignes suivantes :
p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
Mon problème d'images est résolu et je t'en remercie.
Néanmoins, il me reste celui du bloc de citation qui se positionne bizarrement à droite du reste du texte.
J'ai mis en ligne un billet spécialement à cet effet ici :
Hors ligne
Les règles en cause sont dans le fichier style.post.css, dans la définition .post blockquote.
Je dirais que David a initialement prévu que les blockquote soient utilisés pour faire des « incises » dans les billets, à la manière des journaux, mais je ne pense pas que ce soit sa plus grande inspiration ;-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Ok, qu'est-ce qu'il faut que je fasse dans le fichier style.post.css ?
Hors ligne
Les règles de la définition .post blockquote qui donnent cet aspect à la boîte sont float: right; et width: 268px; Une fois supprimées ces lignes, ton bloc de citation retrouvera figure humaine ;-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Tes conseils sont précieux. Merci beaucoup.
Hors ligne
Avec plaisir :-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Je dirais que David a initialement prévu que les blockquote soient utilisés pour faire des « incises » dans les billets, à la manière des journaux, mais je ne pense pas que ce soit sa plus grande inspiration ;-)
:p
À partir d'aujourd'hui, ça sera comme d'habitude.
Hors ligne
Vous n'êtes pas identifié(e).