Sidebar qui ne ce place pas

santinisantini Member
janvier 2020 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 Member

    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 Member
    janvier 2020 modifié

    Salut Gzyg,

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

    Capture1.png

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

    Capture2.png

    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

  • kowalskykowalsky Member

    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 Member

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

  • kowalskykowalsky Member

    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 Member
    janvier 2020 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:

    Capture_site.png


    Merci de ta patience 😥

  • GzygGzyg Member

    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.