Sidebar qui ne ce place pas

santinisantini Membre
14 janv. modifié dans Entraide

Bonsoir à toutes et à tous,

Apres avoir modifier plusieurs fois le CSS et le fichier SIDEBAR.PHP, je ne parvient pas a trouver la solution.

En fet la sidebar ne veut pas ce placer en haut, je me suis dit peut être qu'il manque une div dans le fichier sidebar.php mais après vérification sa à l'air correct..

Pour tester j'ai placer le fichier du theme d'origine "sidebar.php" et la, la sidebar ce place correctement.

Mais avec mon fichier actuel, pas moyen. Ou alors quand je fait des modif la sidebar passe sous "les bloc" de la page d'accueil. Ou alors elle va ce multiplier, et je me retrouve avec plusieurs sidebar.

Voici le css de la sidebar :

.sidebar {
background: #ffffff;
float: right;
width: 20%;
border: 2px solid black;
}


.aside-title {
margin-bottom: 0.6em;
line-height: 1.1;
font-size: 1.6em;
background: #1E0632;
color: #ffffff;
padding-left: 10px;
}


.aside-content {
margin-bottom: 2em;
font-weight: bold;
}


.tag {
margin-right: .5em;
margin-left: .5em;
background-color: #ffffff;
border-radius:50%;
border:5px solid #495063;
}


Le fichier SIDEBAR.PHP :

<?php if(!defined('PLX_ROOT')) exit; ?>


	<aside class="sidebar w40">


<?php eval($plxShow->callHook('MySearchForm')) ?>


		<div class="aside-title">
			<?php $plxShow->lang('CATEGORIES') ?>
		</div>


		<div class="aside-content">
			<ul>
				<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
			</ul>
		</div>


		<div class="aside-title">
			<?php $plxShow->lang('LAST_ARTICLES') ?>
		</div>


		<div class="aside-content">
			<ul>
				<?php $plxShow->lastArtList('<li><a class="#art_status" href="#art_url" title="#art_title">#art_title</a></li>'); ?>
			</ul>
		</div>


		<div class="aside-title">
			<?php $plxShow->lang('TAGS') ?>
		</div>


		<div class="aside-content">
			<?php $plxShow->tagList('<span class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></span>', 20); ?>
		</div>


		<div class="aside-title">
			<?php $plxShow->lang('LAST_COMMENTS') ?>
		</div>


		<div class="aside-content">
			<ul>
				<?php $plxShow->lastComList('<li><a href="#com_url">#com_author '.$plxShow->getLang('SAID').' : #com_content(34)</a></li>'); ?>
			</ul>
		</div>


		<div class="aside-title">
			<?php $plxShow->lang('ARCHIVES') ?>
		</div>


		<div class="aside-content">
			<ul>
				<?php $plxShow->archList('<li id="#archives_id"><a class="#archives_status" href="#archives_url" title="#archives_name">#archives_name</a> (#archives_nbart)</li>'); ?>
			</ul>
		</div>


		<div class="aside-title">
			Flux RSS
		</div>


		<div class="aside-content">
		<ul>
			<li class="rss-sidebar"><a href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>">
				<?php $plxShow->lang('ARTICLES') ?></a>
			</li>
			<li class="rss-sidebar"><a href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>">
				<?php $plxShow->lang('COMMENTS') ?></a>
			</li>
		</ul>
               </div>
</div>
</div>
</div>
	</aside>




En vous remerciant une fois de plus 😥





Réponses

  • GzygGzyg Membre

    Salut,

    C'est le même problème (et la même solution) que pour tes articles.

    Ici, c'est la div englobant les articles (normalement, une balise main existe pour cela) et la sidebar qui doit être en display flex. Si elle n'existe pas tu dois en créer une.

    Soit en incluant la sidebar entre main et /main soit en créant une div class="main-container" qui englobera main et aside

    .main-container {display: flex;} (pas besoin du flex-wrap qui sert à renvoyer le surplus d'élément à la ligne)

    main {flex: 2;} (occupera 66.6666% de l'espace)

    aside {flex: 1;} (occupera 33.3333% de l'espace)

    Tu peux ajuster les largeurs en remplaçant flex: 2 et flex: 1 par des width

  • santinisantini Membre
    13 janv. modifié

    Salut Gzyg,

    Alors la sidebar est placer mais, elle ne monte pas tout en haut (voir Screenshot) ci-dessous:

    En revanche si je remplace mon fichier "sidebar.php" par celui fourni avec le theme d'origine, tout ce place bien, voir ci-dessous:

    Donc il doit y avoir un souci de codage dans mon sidebar.php ?

    SIDEBAR.PHP


    <?php if(!defined('PLX_ROOT')) exit; ?>
    
    
    	<aside class="sidebar w40">
    
    
    <?php eval($plxShow->callHook('MySearchForm')) ?>
    
    
    		<div class="aside-title">
    			<?php $plxShow->lang('CATEGORIES') ?>
    		</div>
    
    
    		<div class="aside-content">
    			<ul>
    				<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
    			</ul>
    		</div>
    
    
    		<div class="aside-title">
    			<?php $plxShow->lang('LAST_ARTICLES') ?>
    		</div>
    
    
    		<div class="aside-content">
    			<ul>
    				<?php $plxShow->lastArtList('<li><a class="#art_status" href="#art_url" title="#art_title">#art_title</a></li>'); ?>
    			</ul>
    		</div>
    
    
    		<div class="aside-title">
    			<?php $plxShow->lang('TAGS') ?>
    		</div>
    
    
    		<div class="aside-content">
    			<?php $plxShow->tagList('<span class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></span>', 20); ?>
    		</div>
    
    
    		<div class="aside-title">
    			<?php $plxShow->lang('LAST_COMMENTS') ?>
    		</div>
    
    
    		<div class="aside-content">
    			<ul>
    				<?php $plxShow->lastComList('<li><a href="#com_url">#com_author '.$plxShow->getLang('SAID').' : #com_content(34)</a></li>'); ?>
    			</ul>
    		</div>
    
    
    		<div class="aside-title">
    			<?php $plxShow->lang('ARCHIVES') ?>
    		</div>
    
    
    		<div class="aside-content">
    			<ul>
    				<?php $plxShow->archList('<li id="#archives_id"><a class="#archives_status" href="#archives_url" title="#archives_name">#archives_name</a> (#archives_nbart)</li>'); ?>
    			</ul>
    		</div>
    
    
    		<div class="aside-title">
    			Flux RSS
    		</div>
    
    
    		<div class="aside-content">
    		<ul>
    			<li class="rss-sidebar"><a href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>">
    				<?php $plxShow->lang('ARTICLES') ?></a>
    			</li>
    			<li class="rss-sidebar"><a href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>">
    				<?php $plxShow->lang('COMMENTS') ?></a>
    			</li>
    		</ul>
                   </div>
    </div>
    </div>
    </div>
    	</aside>
    


    Merci

  • Salut Santini,

    à quoi servent les 3 </div> à la fin ? Supprime les (ou place ton </aside> avant) et voit si cela résout ton problème.

  • santinisantini Membre

    Salut Kowalsky, Oups les 3 </div> étais en trop^^ même en les supprimant, rien à bouger 🤔

  • Ton <aside> est placé à l'intérieur de <div class="mw960p center pad2" role="main"> au même niveau que tes articles, donc il va se placer après les autres éléments <article> et non se positionner par rapport au conteneur.

    Inspire toi de cet exemple : http://romy.tetue.net/structure-html-de-base#forum5445 pour rajouter un conteneur (wrapper) à tes articles, qui sera cette fois au même niveau que ton aside.

  • santinisantini Membre
    14 janv. modifié

    Salut, donc j'ai fait une modif, ce n'est pas parfait je me suis planter quelques part, cette fois la sidebar et bien a droite, mais elle a décaler mon bloc de cadre vers la gauche et la sidebar et complétement coller a droite du site j'ai perdu la marge

    J'ai modifier le css en ajoutant #sidebar

    #sidebar {
    background: #ffffff;
    float: center;
    width: 150px;
    border: 2px solid black;
    }
    
    
    .sidebar {
    background: #ffffff;
    width: 150px;
    }
    
    
    .aside-title {
    margin-bottom: 0.6em;
    line-height: 1.1;
    font-size: 1.6em;
    background: #1E0632;
    color: #ffffff;
    padding-left: 10px;
    }
    
    
    .aside-content {
    margin-bottom: 2em;
    font-weight: bold;
    }
    
    
    .tag {
    margin-right: .5em;
    margin-left: .5em;
    background-color: #ffffff;
    border-radius:50%;
    border:5px solid #495063;
    }
    


    J'ai modifier comme ci-dessous la page home.php :


    <aside class="sidebar">

    <?php include(dirname(__FILE__).'/sidebar.php'); ?>

    </sidebar>


    <?php include(dirname(__FILE__).'/header.php'); ?>
    
    
    <div class="main-container">
    <div class="mw960p center pad2" role="main">
    <?php eval($plxShow->callHook('MySearchForm')) ?>
    		<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
    
    
    			<article class="art-home" role="articles">
    <div class="artThumbnail">
    <?php $plxShow->artThumbnail(); ?>
    </div>
    <h1 class="txtcenter pad3"><?php $plxShow->artTitle('link'); ?></h1>
    
    
    <ul class="pad2 mar-top">
    <li class="w33 left"><?php $plxShow->artDate('#num_day #month #num_year(4)'); ?></li>
    <li class="w33 left"><?php $plxShow->artCat(); ?></li>
    <li class="w33 left"><?php $plxShow->artNbCom(); ?></li>
    </ul>	
    			</article>
    
    
    			<?php endwhile; ?>
    
    
    			<div id="pagination">
    				<?php $plxShow->pagination(); ?>
    			</div>
    
    
    </div>
    
    
    <aside class="sidebar">
    <?php include(dirname(__FILE__).'/sidebar.php'); ?>
    </sidebar>
    
    
    </div>
    
    
    <?php include(dirname(__FILE__).'/footer.php'); ?>
    


    Screen:


    Merci de ta patience 😥

  • GzygGzyg Membre

    Salut,

    Ta structure devrait ressembler à ça :

    <main class="conteneur-global">
    
     <div class="conteneur-articles">
       <!-- la boucle pour tes articles -->
     </div>
    
     <aside>
       <!-- ta sidebar -->
     </aside>
    
    </main>
    


    Et tu te sers du css que je t'ai donné plus haut.

    
    
Connectez-vous ou Inscrivez-vous pour répondre.