Régler la longueur de la sidebar en fonction de la longueur de la page (Créer un compte)

  • Statut : non résolu
9 sujets de 1 à 9 (sur un total de 9)
  • Auteur
    Messages
  • #458582
    Archilatrik
    Participant
    Chevalier WordPress
    131 contributions

    Ma configuration WP actuelle
    – Version de WordPress : 2.3.3
    – Thème utilisé : Leia
    – Plugins en place :
    – Nom de l’hebergeur :
    – Adresse du site : http://www.romain-world-tour.com

    Problème(s) rencontré(s) :

    Bonjour à tous,

    J’ai une question assez technique. En effet, je voudrais quelque soit la page de mon blog (http://www.romain-world-tour.com) sur laquelle je me trouve, la deuxième partie de ma sidebar (située sur la fin de la sidebar avec son fond gris clair) arrive en bas de la page.

    De plus, je souhaiterais que :

    “Le thème de ce blog a été créé par Kapikua et adapté par Romain
    Blog propulsé par WordPress
    Il y a eu x requêtes générées en x secondes.”

    reste en haut de cette partie gris clair, tandis que le logo de l’avion et ce qui y a en dessous (copyright), se trouvent tout en bas de page.

    J’ai cherché à droite à gauche, et cela dépasse mes compétences.

    Un petit peu d’aide serait grandement apprécié.

    Bonne soirée,

    Romain

    #626894
    Guilhem
    Participant
    Maître WordPress
    578 contributions

    Comme ça à vue de nez car je n’ai pas vu comment était construite ta sidebar, je te conseillerais la chose suivante.
    Tu découpe une bande de 1 px de haut sur toute la largeur de ta zone grise entre le texte et l’avion.
    Tu l’enregistre sous un nom x et tu la colle dans la CSS en mode repeat pour qu’elle s’adapte à la hauteur disponible.
    Le morceau avec l’avion tu le colle dans la sidebar avec un positionnement bottom et ça devrait le faire.

    #626895
    Archilatrik
    Participant
    Chevalier WordPress
    131 contributions

    Je te remercie de ta réponse.

    Qu’entends tu par découpe une bande ? Tu veux dire faire un capture manuelle via un imprime écran ?

    Quel code entrer pour la fonction repeat dans la CSS ?

    En fait, toute la partie grise claire correspond à mon footer dont le code est le suivant :

    <ul>
    	<li>Le thème de <a href="http://www.romain-world-tour.com">ce blog</a> a été créé par <a href="http://www.kapikua.com" title="kapikua">Kapikua</a> et adapté par <a href="http://www.romaincorraze.com">Romain</a></li>
    	<li><?php echo sprintf(__("Blog propulsé par <a href='http://wordpress.org/' title='%s'>WordPress</a>“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform.”)); ?></li>
    	<li>Il y a eu   requêtes générées en  secondes.</li>
    <br>
    <br>
    <img src="http://www.romaincorraze.com/images/worldtour/airplane.png">
    © Romain Corraze 2008
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/"><img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" /></a>
    </ul>
    
    
    		

    _uacct = “UA-1965778-3”;
    urchinTracker();

    La partie gris foncée correspond quant à elle à la sidebar, donc si j’ai bien compris, elle ne nous intéresse pas (vu qu’on s’intéresse au footer) ?

    De même, quel code entrer pour faire comprendre le positionnement en “bottom” ?

    Merci de m’éclairer et bonne soirée.

    #626897
    Guilhem
    Participant
    Maître WordPress
    578 contributions

    Déjà, à mon avis, ça doit se passer dans la CSS.
    Si tu vas sur mon site, tu trouveras à gauche (sidebar) des parchemins.
    Le rouleau haut et le rouleau bas sont deux images différentes et le milieu est constitué d’une troisième image de 1 pixel de haut et de x pixels de large.
    Ainsi en répétant cette image mon parchemin s’adapte au contenu.

    Voici comment ça marche chez moi.

    Les boîtes de la sidebar sont définies par des classes :

    .ltop /*Haut de la boite de la sidebar*/
    {
    	background: url(images/ltop-old.jpg) no-repeat;
    	width: 220px;
    	height: 26px;
    }
    .lmid /*Milieu de la boite de la sidebar*/
    {
    	background: url(images/lmid-old.jpg) repeat-y;
    	width: 200px;
    	padding: 0 10px;
    }
    .lmid h2 /*Titre des menus de la boite de la sidebar*/
    {
    	font-weight: normal;
    	text-align: center;
    	color: #4D6A00;
    	margin: 0;
    	font-size: 22px;
    	padding-bottom: 5px;
    }
    .lbot /*Bas de la boite de la sidebar*/
    {
    	background: url(images/lbot-old.jpg) no-repeat;
    	width: 220px;
    	height: 26px;
    	margin-bottom: 30px;
    }

    Ca c’est dans la CSS bien sûr.

    Et voilà mon code sidebar.php

    <div id="right">
    
    
    
    
    			<div class="ltop"></div>
    			<div class="lmid">
    			<h2>Catégories</h2>
    			<ul>
    			
    			</ul>
    			</div>
    			<div class="lbot"></div>
    
    
    			<div class="ltop"></div>
    			<div class="lmid">
    			<h2>Links</h2>
    			<ul>
    			<?php get_links('-1', '<li>‘, ‘</li>‘, ”, FALSE, ‘name’, FALSE, 
    FALSE, -1, FALSE, TRUE); ?>
    			</ul>
    			</div>
    			<div class="lbot"></div>
    
    			<div class="ltop"></div>
    			<div class="lmid">
    			<h2>Archives</h2>
    			<ul>
    			
    			</ul>
    			</div>
    			<div class="lbot"></div>
    
    			<div class="ltop"></div>
    			<div class="lmid">
    			<h2>Meta</h2>
    			<ul>
    				
    				<li></li>
    				<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    				<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    				<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    				
    			</ul>
    			</div>
    			<div class="lbot"></div>
    			
    		</div>

    Pour faire ton image de pixel, n’importe quel logiciel de dessin suffit.

    #626896
    Archilatrik
    Participant
    Chevalier WordPress
    131 contributions

    Je te remercie de ta patience : je testerai dans les jours à venir cette méthode et je tiendrai au courant 🙂

    #626898
    Archilatrik
    Participant
    Chevalier WordPress
    131 contributions

    Un peu de nouveau. Je me suis retourné le cerveau à chercher dans ma feuille de style ou était ma sidebar (thème à l’origine en espagnol, plus une organisation un peu…spéciale du thème).

    J’ai découpé une bande de la largueur de la sidebar, à savoir 363px.

    En cherchant un peu dans la CSS, je me rend compte que je ne trouve que 3 fois “363” dans la feuille de style. J’en déduis donc que ma sidebar est juste après le formulaire de recherche :

    }
    	#searchform {
    			margin:30px 0 0 0;
    	}
    		
    	#azul {
    		background-image:url(imagenes/fondo_azul.png);
    		position:absolute;
    		left:644px;
    		top:82px;
    		height:177px;
    		border-bottom:12px solid #D4D8D9;
    		font-size:11px;
    		color:#fff;		
    		width:363px;
    		/* Iexplorer */
    		*width:360px;
    	}	
    		
    		#azul h2 {
    				color:#fff;
    				margin:0;
    				padding:0 10px 0 10px;
    				font: Arial, verdana,  sans-serif;
    				font-size:24px;
    				letter-spacing:-1px;
    			}
    			
    			#azul p{
    				padding:0 10px 0 10px;
    				margin:0;
    				letter-spacing:0.1em;
    				text-align:justify;
    			}
    			
    			#azul img {
    				margin:0 10px 0 10px; 
    			}
    				
    		#menu {
    			position:absolute;
    			background-color:#333;
    			top:272px;
    			left:644px;
    			width:363px;
    			padding:15px 0 0 0;
    			/* Iexplorer */
    			*width:360px;
    		}

    J’ai donc ajouté le code suivant :

    }
    			
    			#azul x{
    				background: url(imagenes/bande.png) repeat-y;
    				width: 363px;
    				padding: 0 10px;
    			}

    en ayant pris soin de placer ma bande de 1 px de hauteur par 363 de large dans le dossier “imagenes” de mon thème

    Ensuite, j’ai rajouté le code

    <div class="x"></div>

    dans le footer, vu que la partie grise claire est associée au footer.php

    Je n’ai absolument aucun résultat. C’est une des premières fois ou j’essaye de retoucher par moi même ma CSS…Si tu pouvais me dire ou je me suis planté, ça serait sympa !

    Bonne journée.

    #626899
    Guilhem
    Participant
    Maître WordPress
    578 contributions

    De prime abord, je dirai qu’il faut peut-être trois morceaux car tu veux que l’avion descende.
    Donc, il te faut une partie haute, un milieu et une partie basse comme moi et non simplement une bande.

    #626900
    Archilatrik
    Participant
    Chevalier WordPress
    131 contributions

    J’ai commencé à me pencher sur le sujet Guilhem. Je pense que j’aurai plus de temps la semaine prochaine.

    Car c’est pas quelque chose de facile pour moi au départ ! Je te tiens au courant 🙂

    #626901
    Guilhem
    Participant
    Maître WordPress
    578 contributions

    Pas de souci, je suis moi-même en train de me prendre la tête avec la création d’une sidebar dans mon forum punBB.

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