- Statut : non résolu
- Ce sujet contient 19 réponses, 3 participants et a été mis à jour pour la dernière fois par
artxtra, le il y a 18 années et 4 mois.
-
AuteurMessages
-
12 octobre 2006 à 20 h 13 min #448905
Bonjour,
Ma configuration WP actuelle
– Version de WordPress : 2.0 fr
– Thème utilisé : newspaper 1.0 modifié
– Plugins en place : aucun
– Nom de l’hebergeur : ifrance.comProblème : mise en page CSS
Bien le bonjour et mille pardons si je me suis planté de topic… Mon problème est le suivant : j’ai bricolé le thème newspaper 1.0 à ma sauce. Jusque là tout va bien, le blog fonctionne, j’ai fait quelques modifications pour que tout soit à mon goût sauf que je ne sais pas tout faire et que mes connaissances sont limitées.
Aussi, j’ai besoin de vous, et je vous serai fort reconnaissant si vous m’aidiez.
Voici l’adresse du blog : http://www.lesyeuxfermes.be.cx/
Voici les points que je n’arrive pas à mettre en place :
– marge à droite de 20 px
– marge en haut de 0 px
– diminuer l’espace entre les titres des posts et les lignes « posted … »
– augmenter l’espace entre les titres des rubriques (archives, catégories, …) et les choix en dessous
– monter d’un ou deux px la barre de search pour quelle soit alignée à celle de premier article
(et si possible m’indiquer ce qui doit être changer, pour que je sache modifier par moi même)Pouvez vous m’aider ?
13 octobre 2006 à 7 h 49 min #581809mon fichier style.CSS contient le code suivant :
/* Begin Main-Layout */
body {
background:#fff;
color:#666;
font:georgia;
text-align:left
}
.page {
background:#fff;
text-align:left;
width:700px
}
#content {
float:left;
margin:0 0 20px 0;
width:480px
}
#sidebar {
float:left;
width:200px;
line-height:100%
}
#footer {
border-top:1px solid #000;
clear:both;
margin:0;
font-size: 70%;
padding:10px 0;
text-align:left;
width: 480px
}
/* End Main-Layout */
/* Begin Header */
h1 {
font:2.9em georgia,tahoma,sans-serif;
padding:15px 0 0 0;
text-align:left
}
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover{
text-decoration:none;
color:#555
}
.description {
color:#777;
font:1.0em georgia,tahoma,sans-serif;
padding:0 0 5px 0;
text-align:left;
}
#header ul{
border-bottom:2px solid #000;
border-top:1px solid #000;
padding:3px 0;
}
#header ul li {
display:inline;
padding:0 30px 0 0
}
#header ul li a:link, #header ul li a:active, #header ul li a:visited, #header ul li a:hover{
color:#000;
font:1.1em georgia;
font-style: bold;
text-decoration:none;
}
/* End Header */
/* Begin Content*/
h2{
padding-bottom: -10px
}
h2,h3,h4,h5,h6{
color:#000;
font:normal 1em georgia;
margin:12px 0 0 0
}
h2,h3{
border-bottom:1px solid #000
}
h2 a:link, h2 a:visited, h2 a:active, h2 a:hover,
h3 a:link, h3 a:visited, h3 a:active, h3 a:hover{
color:#000;
text-decoration:none
}
.postmetadata {
color:#555;
font:.55em arial;
}
.postmetadata a:link, .postmetadata a:visited, .postmetadata a:active{
color:#555;
text-decoration:none
}
.postmetadata a:hover{
text-decoration:underline
}
.entry, .entrytext{
line-height:105%;
padding-bottom: 20px;
margin:2px 0 0 0
}
.entrytext p{
margin:0 0 15px 0
}
a:link,a:visited,a:active,a:hover{
color:#000;
text-decoration:underline
}
/* End Content*/
/* Begin Comments */
.commentlist li, #commentform input, #commentform textarea {
font-size:0.85em
}
.commentlist li {
font-weight:bold
}
.commentlist cite, .commentlist cite a {
font-weight:bold;
font-style:normal;
font-size:1.1em
}
.commentlist p {
font-weight:normal;
line-height:140%;
text-transform:none
}
.commentmetadata {
font-weight:normal
}
.commentlist {
padding:0;
text-align:justify
}
.commentlist li {
margin:0px 0 15px 16px;
padding:5px 10px 0 0;
list-style:decimal
}
.commentlist p {
margin:10px 5px 10px 0
}
#commentform p {
margin:5px 0
}
.commentmetadata {
margin:0;
display:block
}
/* End Comments */
/* Begin Lists */
.entry ul, .entry ol,
.entrytext ul, .entrytext ol{
margin:5px 0 5px 26px
}
#sidebar ul li{
margin:2px;
list-style:none
}
#sidebar ul li a:link, #sidebar ul li a:visited, #sidebar ul li a:active{
color:#444;
text-decoration:none
}
#sidebar ul li a:hover{
color:#000;
text-decoration:underline
}
/* End Entry Lists */
/* Begin Images */
p img {
padding:0;
max-width:100%
}
img.centered {
display:block;
margin-left:auto;
margin-right:auto
}
img.alignright {
padding:4px;
margin:0 0 2px 7px;
display:inline
}
img.alignleft {
padding:4px;
margin:0 7px 2px 0;
display:inline
}
.alignright {
float:right
}
.alignleft {
float:left
}
/* End Images */
/* Begin Form Elements */
#searchform {
margin:2px 0;
padding:5px 0
}
#sidebar2 #searchform #s {
width:130px;
padding:2px
}
#sidebar2 #searchsubmit {
padding:1px
}
.entry form {
text-align:center
}
select {
width:130px
}
#commentform input {
width:170px;
padding:2px;
margin:5px 5px 1px 0
}
#commentform textarea {
width:100%;
padding:2px
}
#commentform #submit {
margin:0;
float:right
}
/* End Form Elements */
/* Begin Various Tags & Classes */
code {
font:1em ‘Courier New’, Courier, Fixed
}
acronym, abbr, span.caps
{
cursor:help;
font-size:0.9em;
letter-spacing:.07em
}
acronym, abbr {
border-bottom:1px dashed #226
}
blockquote {
background:#f3f3f3;
border:1px solid #000;
line-height:120%;
margin:10px 0;
padding:5px 10px 5px 10px
}
blockquote cite {
margin:5px 0 0;
display:block
}
.center {
text-align:center
}
hr {
clear:both;
display:none
}
a img {
border:none
}
.navigation {
display:block;
text-align:center;
margin-top:10px;
margin-bottom:60px
}
/* End Various Tags & Classes*/13 octobre 2006 à 9 h 13 min #581810Salut alors pour les marges..
mais dans le body
[c]
margin:0px;
padding:0px;
[/c]ou fais un test avec une « reste » au début de ta feuille de style met
[c]
*{
margin:0px;
padding:0px;
}[/c]
cela enlevera le margin et padding par défaut .. il faut ensuite le lettre comme tu le veux dans chaque sélécteur.
voila déjà un début…
13 octobre 2006 à 15 h 17 min #581811Au tout début de style.css (ou de ta feuille de style) :
* {margin: 0; padding: 0;}
* est le sélecteur universel : il appliquera les propriétés CSS à toutes les balises, tous les ID et toutes les classes.
Les propriétés CSS : réduire à 0 les marges externes (margin) et internes (padding) qui ne sont gérées de la même manière par les navigateurs.Pour le reste, ta boucle a l’air un peu bizarre :
<div class="post" id="post-14">
<h2><a>Second articles</a></h2>
<p class="postmetadata">Posted in <a href="http://ww...">Typeset</a> | octobre 8th, 2006 <!-- by Benoit --> <a href="htt...">No Comments »</a></p>
<div class="entry">
<br />
</div></div>Rien dans le entry …?
Ensuite, change les propriétés de h2 (padding négatif) et postmetadata13 octobre 2006 à 18 h 50 min #581813j’ai ajouté le * {margin: 0; padding: 0;}
ça marche merci (en fait ça ne marche pas tout de suite, il a fallu du temps je ne sais pourquoi)
par contre j’ai déjà vu la formule » margin: 0 0 0 0 » à quoi correspond chacun des 0 ?13 octobre 2006 à 19 h 47 min #581814en fait ça casse un peu tout, si je met * {margin: 0; padding: 0 0 0 10;} par exemple
il ajoute non seulement un espace à gauche du blog, mais également avant chaque titre et entre chaque terme13 octobre 2006 à 19 h 58 min #581815Le sélecteur universel applique ses propriétés CSS à tout, c’est comme si tu faisais :
p, li, h1, h2, ul, blockquote, a, sup, del, div, body, html, ol, cite, q {margin: 0; padding: 0 0 0 10;}
Et encore j’en oublie…
Les 4 chiffres désignent : haut droite bas gauche. Il faut toujours ajouter une unité de mesure (sauf à 0, bien sûr).
Donc là, tu as rajouté 10 quelque chose à toutes ltes balises de toutes pages. Forcément, ça fait dérailler le truc.
Reste bien surmargin: 0; padding: 0
13 octobre 2006 à 20 h 34 min #581812mais si je reste sur 0, je fais comment pour mettre une marge à gauche sans qu’elle soit mise partout ?
14 octobre 2006 à 8 h 31 min #581816Après tu mets la marge sur le sélecteur qui t’intéresse
h2 {margin-left: 10px;}
14 octobre 2006 à 16 h 23 min #581817/* Begin Content*/
h2{
padding-bottom: -10px;
margin-left: 10px
}ça ne fonctionne pas
et une marge s’ajoute en hautj’y comprends rien
18 octobre 2006 à 18 h 19 min #581818bonjour tout le monde, j’ai encore plein de soucis malgré mes efforts à essayer de comprendre tout ça
pourriez vous svp modifier directement le code et me le reposter avec les bonnes modifs ?
ça fait une semaine que je tourne en rond, je vais en devenir dinguele blog est à cette adresse : http://www.lesyeuxfermes.be.cx/
– je voudrais une marge à gauche de 10px,
– que la sidebar soit séparée de 6px des posts
– un espace plus grand entre la ligne « posted in » et le texte du commerci de votre aide !
/*
Theme Name: Mypaper
Author: Brunel Benoit & Wordpress
*/
/* Begin Main-Layout */
* {
margin: 0;
padding: 0
}
body {
background:#fff;
color:#666;
font:georgia;
text-align:left
}
.page {
background:#fff;
text-align:left;
width:700px
}
#content {
float:left;
margin:0 0 20px 0;
width:480px
}
#sidebar {
float:left;
width:200px;
line-height:100%
}
#footer {
border-top:1px solid #000;
clear:both;
margin:0;
font-size: 70%;
padding:10px 0;
text-align:left;
width: 480px
}
/* End Main-Layout */
/* Begin Header */
h1 {
font:2.9em georgia,tahoma,sans-serif;
text-align:left
}
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover{
text-decoration:none;
color:#555
}
.description {
color:#777;
font:1.0em georgia,tahoma,sans-serif;
padding:0 0 5px 0;
text-align:left;
}
#header ul{
border-bottom:2px solid #000;
border-top:1px solid #000;
padding:3px 0;
}
#header ul li {
display:inline;
padding:0 30px 0 0
}
#header ul li a:link, #header ul li a:active, #header ul li a:visited, #header ul li a:hover{
color:#000;
font:1.1em georgia;
font-style: bold;
text-decoration:none;
}
/* End Header */
/* Begin Content*/
h2{
padding-bottom: -10px;
}
h2,h3,h4,h5,h6{
color:#000;
font:normal 1em georgia;
margin:12px 0 0 0
}
h2,h3{
border-bottom:1px solid #000
}
h2 a:link, h2 a:visited, h2 a:active, h2 a:hover,
h3 a:link, h3 a:visited, h3 a:active, h3 a:hover{
color:#000;
text-decoration:none
}
.postmetadata {
color:#555;
font:.55em arial;
}
.postmetadata a:link, .postmetadata a:visited, .postmetadata a:active{
color:#555;
text-decoration:none
}
.postmetadata a:hover{
text-decoration:underline
}
.entry, .entrytext{
line-height:105%;
padding-bottom: 20px;
margin:2px 0 0 0
}
.entrytext p{
margin:0 0 15px 0
}
a:link,a:visited,a:active,a:hover{
color:#000;
text-decoration:underline
}
/* End Content*/
/* Begin Comments */
.commentlist li, #commentform input, #commentform textarea {
font-size:0.85em
}
.commentlist li {
font-weight:bold
}
.commentlist cite, .commentlist cite a {
font-weight:bold;
font-style:normal;
font-size:1.1em
}
.commentlist p {
font-weight:normal;
line-height:140%;
text-transform:none
}
.commentmetadata {
font-weight:normal
}
.commentlist {
padding:0;
text-align:justify
}
.commentlist li {
margin:0px 0 15px 16px;
padding:5px 10px 0 0;
list-style:decimal
}
.commentlist p {
margin:10px 5px 10px 0
}
#commentform p {
margin:5px 0
}
.commentmetadata {
margin:0;
display:block
}
/* End Comments */
/* Begin Lists */
.entry ul, .entry ol,
.entrytext ul, .entrytext ol{
margin:5px 0 5px 26px
}
#sidebar ul li{
margin:2px;
list-style:none
}
#sidebar ul li a:link, #sidebar ul li a:visited, #sidebar ul li a:active{
color:#444;
text-decoration:none
}
#sidebar ul li a:hover{
color:#000;
text-decoration:underline
}
/* End Entry Lists */
/* Begin Images */
p img {
padding:0;
max-width:100%
}
img.centered {
display:block;
margin-left:auto;
margin-right:auto
}
img.alignright {
padding:4px;
margin:0 0 2px 7px;
display:inline
}
img.alignleft {
padding:4px;
margin:0 7px 2px 0;
display:inline
}
.alignright {
float:right
}
.alignleft {
float:left
}
/* End Images */
/* Begin Form Elements */
#searchform {
margin:2px 0;
padding:5px 0
}
#sidebar2 #searchform #s {
width:130px;
padding:2px
}
#sidebar2 #searchsubmit {
padding:1px
}
.entry form {
text-align:center
}
select {
width:130px
}
#commentform input {
width:170px;
padding:2px;
margin:5px 5px 1px 0
}
#commentform textarea {
width:100%;
padding:2px
}
#commentform #submit {
margin:0;
float:right
}
/* End Form Elements */
/* Begin Various Tags & Classes */
code {
font:1em ‘Courier New’, Courier, Fixed
}
acronym, abbr, span.caps
{
cursor:help;
font-size:0.9em;
letter-spacing:.07em
}
acronym, abbr {
border-bottom:1px dashed #226
}
blockquote {
background:#f3f3f3;
border:1px solid #000;
line-height:120%;
margin:10px 0;
padding:5px 10px 5px 10px
}
blockquote cite {
margin:5px 0 0;
display:block
}
.center {
text-align:center
}
hr {
clear:both;
display:none
}
a img {
border:none
}
.navigation {
display:block;
text-align:center;
margin-top:10px;
margin-bottom:60px
}
/* End Various Tags & Classes*/19 octobre 2006 à 11 h 23 min #581819body {margin-left: 10px;}
div#page {width: 700px;}
div#content {width: 400px; float:left;margin-right: 6px;}
div#sidebar {width: 214px; // 400+214+6=700, normallement}
.postmetadata {margin-bottom: //ici, la valeur que tu veux, comme indiqué dans mon premier message}Pour le h2, ne mets pas de padding ou margin négatif, ça complique tout…
19 octobre 2006 à 13 h 12 min #581820ok ça marche, merci beaucoup !
un dernier petit chipotage, quelle ligne dois je ajouter ou modifier pour décaler un peu les lignes posted avec le trait du dessus ? de même pour les rubriques de catégories ou de liens ?
et baisser un peu la taille des polices de titres des coms et rubriques ?19 octobre 2006 à 18 h 08 min #581821automne wrote:décaler un peu les lignes posted avec le trait du dessus ?Qu’est-ce que tu veux décaler : le [c]Posted in Pictures | octobre 8th, 2006 No Comments »[/c] ? Le trait au-dessus ?Les deux en même temps ? Dans quel sens ?
Idem pour les catégories : le trait bouge-t-il ou seulement la liste ?Pour la taille de police, la bouge pas, elle est déjà bien petite (pour moi), surtout le posted…
19 octobre 2006 à 20 h 19 min #581822la taille des textes et de titres est un chouillat grande, j’aimerai juste la baisser un peu ^^
pour le décalage, j’aimerai que l’espace soit plus grand de deux ou trois px entre le « posted in… » et la ligne (trait) du dessus. de même pour l’espace entre « pictures » et la ligne qui le précède
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.