Sidebar horizontale question de CSS (Créer un compte)

  • Statut : non résolu
2 sujets de 1 à 2 (sur un total de 2)
  • Auteur
    Messages
  • #505507
    Julie
    Participant
    Padawan WordPress
    80 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 3.3.1
    – Version de PHP/MySQL : 5
    – Thème utilisé : thème personnel en construction
    – Extensions en place : Aucune
    – Nom de l’hebergeur : Site en local (MAMP)
    – Adresse du site :

    Problème(s) rencontré(s) : Placement des éléments de la sidebar horizontale

    Merci pour ceux qui me liront.
    J’ai créé une sidebar horizontale, qui se situe entre le content et le footer, et qui affiche les widgets suivants : liste des catégories, liste des archives et liens.
    Je souhaite placer ces widgets les uns à côté des autres, bref trois colonnes, et non les uns en dessous des autres, comme c’est le cas actuellement. J’ai tout essayé en CSS, les widgets sont des éléments de liste, il me semble que display:inline devrait faire office, mais cela ne fonctionne pas.

    Voici mon code actuel, sachant que j’ai testé beaucoup de combinaisons, je ne comprends pas ce qui bloque.

    Le HTML

    <div class="sidebar">
    <ul><!--Ouverture de la liste de la sidebar-->
    <li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Catégories</h2>
    		<ul>
    	<li class="cat-item cat-item-3"><a href="http://localhost:8888/wordpress/?cat=3" title="Voir tous les articles classés dans Catégorie A">Catégorie A</a>
    </li>
    	<li class="cat-item cat-item-4"><a href="http://localhost:8888/wordpress/?cat=4" title="Voir tous les articles classés dans Catégorie B">Catégorie B</a>
    </li>
    		</ul>
    </li>
    <li id="archives-3" class="widget widget_archive"><h2 class="widgettitle">Archives</h2>
    
    		<ul>
    			<li><a href='http://localhost:8888/wordpress/?m=201202' title='février 2012'>février 2012</a></li>
    		</ul>
    </li>
    <li id="linkcat-2" class="widget widget_links"><h2 class="widgettitle">Liens</h2>
    
    	<ul class='xoxo blogroll'>
    <li><a href="http://codex.wordpress.org/">Documentation</a></li>
    <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li>
    
    <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li>
    <li><a href="http://wordpress.org/support/">Support Forum</a></li>
    <li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
    <li><a href="http://wordpress.org/news/">WordPress Blog</a></li>
    <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
    
    	</ul>
    </li>
    
    </ul><!--Fermeture de la liste de la sidebar-->
    </div>

    Le CSS

    .sidebar{
    width: 750px;
    }
    
    .sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
    display: inline;
    float: left;
    }

    Je vous remercie par avance de vos idées.
    Julie

    #816112
    Julie
    Participant
    Padawan WordPress
    80 contributions

    Bon, au réveil on a les idées plus claires. J’ai donc bien vu que quelque chose clochait dans mon HTML.

    J’ai réussi à placer les widgets côte à côte en leur donnant une classe via le fichier functions.php

    ‘Sidebar’,
    ‘before_widget’ => ‘<div class="widget">‘,
    ‘after_widget’ => ‘</div>‘,
    ‘before_title’ => ‘<h2>‘,
    ‘after_title’ => ‘</h2>‘,
    ));
    ?>

    Ensuite j’ai modifié mon CSS ainsi :

    .sidebar{
    width: 750px;
    }
    
    .widget{
    width: 250px;
    float: left;
    }
    
    .sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
    }

    Je ne sais pas si la manière est orthodoxe, en tout cas elle me convient puisque j’ai réussi à transformer ma sidebar en barre horizontale.

    Me reste un tout petit problème : le CSS ne prend pas en compte la div “sidebar” : quand je lui attribue un fond de couleur par exemple, rien ne se passe.
    Pour être complète et bénéficier de vos lumières, voici mon fichier sidebar.php :

    <div class="sidebar">
    
    
     
    	
     	<li><h2>Catégories</h2>
    		<ul>
    		
    		<!--“sort_column=name” va nous permettre de trier la liste par ordre alphabétique -->
        	<!--“optioncount=1″ va afficher le nombre de billets pour chaque catégorie. Si on avait pris le chiffre 0 à la place de 1, le nombre de billets ne s’afficherait pas. -->
        	<!--“hierarchical=0″ ne permet pas l’affichage des sous-catégories. Si vous voulez les voir apparaître, mettez 1 à la place de 0. -->
    
    		</ul>
    	</li>
    		
    	<li><h2>Archives</h2>
    		<ul>
    		
    		</ul>
    	</li>
    
    	<li></li>
    
    
    
    </div>

    Merci de me lire. Julie

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