Souci de mise en page CSS

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 20)
  • Auteur
    Messages
  • #448905
    automne
    Participant
    Padawan WordPress
    68 contributions

    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.com

    Problè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 ?

    #581809
    automne
    Participant
    Padawan WordPress
    68 contributions

    mon 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*/

    #581810
    jerboa
    Membre
    Padawan WordPress
    71 contributions

    Salut 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…

    #581811
    artxtra
    Participant
    Chevalier WordPress
    149 contributions

    Au 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 postmetadata

    #581813
    automne
    Participant
    Padawan WordPress
    68 contributions

    j’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 ?

    #581814
    automne
    Participant
    Padawan WordPress
    68 contributions

    en 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 terme

    :(

    #581815
    artxtra
    Participant
    Chevalier WordPress
    149 contributions

    Le 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 sur

    margin: 0; padding: 0

    #581812
    automne
    Participant
    Padawan WordPress
    68 contributions

    mais si je reste sur 0, je fais comment pour mettre une marge à gauche sans qu’elle soit mise partout ?

    #581816
    artxtra
    Participant
    Chevalier WordPress
    149 contributions

    Après tu mets la marge sur le sélecteur qui t’intéresse

    h2 {margin-left: 10px;}

    #581817
    automne
    Participant
    Padawan WordPress
    68 contributions

    /* Begin Content*/

    h2{
    padding-bottom: -10px;
    margin-left: 10px
    }

    ça ne fonctionne pas :(
    et une marge s’ajoute en haut

    j’y comprends rien

    #581818
    automne
    Participant
    Padawan WordPress
    68 contributions

    bonjour 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 dingue :(

    le 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 com

    merci 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*/

    #581819
    artxtra
    Participant
    Chevalier WordPress
    149 contributions
    body {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…

    #581820
    automne
    Participant
    Padawan WordPress
    68 contributions

    ok ç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 ?

    #581821
    artxtra
    Participant
    Chevalier WordPress
    149 contributions
    automne 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…

    #581822
    automne
    Participant
    Padawan WordPress
    68 contributions

    la 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

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