[ Résolu ] Un peu d'aide pour finir mon site

Bonjour à tous,

Je viens de convertir un thême que j'ai créer pour Pluxml, mais je rencontre quelques problèmes liés à Pluxml.

- J'ai une barre de recherche, mais la seule méthode que je trouve, propose de créer une page de recherche, et quadn vous faites une recherche, on vous renvoit dessus. Cette méthode n'est pas mauvaise, mais est-il possible de ne pas voir la page en question dans le menu ?

- Je souhaite adapter la hauteur de mon contenu, mais je ne sait pas trop comment faire, voici mon css et HTML.

CSS
#content {
margin-top: 29px;
width: 500px;
float: right;
}

.contenttop {
background-image: url(../img/content-top.png);
background-repeat: no-repeat;
width: 500px;
height: 19px;
}

.contenu {
background-color: #FFFFFF;
background-repeat: repeat-y;
width: 500px;
height: auto;
}
HTML
<div id="content">
<div class="contenttop"></div>
<div class="contenu"></div>
<div id="news">
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
<div class="titre"><?php $plxShow->artTitle(''); ?></div>
<div class="date"><?php $plxShow->artDate('#num_day #num_month'); ?></div>
<div class="image"><?php echo $plxShow->plxMotor->plxRecord_arts->f('ornament'); ?></div>
<div class="meta"><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> - <?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?></div>
<div class="intro"><?php $plxShow->artChapo(); ?></div>
<?php endwhile; ?>
<div id="pagination"><?php $plxShow->pagination(); ?></div>
</div>
</div>
Voici une image pour vous montrer le problème
111.jpg

Merci d'avance de vos réponses.

Réponses

  • Hello @Nova :

    Dans ta liste des pages statiques depuis l'admin tu décides de les afficher ou non dans le menu : dans ton cas => Ne pas afficher ;)

    Pour le second, vire le height : auto voir ce que ça donne, logiquement un élément flottant s'adapte en hauteur.

    A noter : Même si vos projets ne sont pas finis pensez à les mettre en ligne en cs de besoin d'aide, le HTML et le CSS sont si simple à résoudre quand on les as sous le nez :)
  • novanova Member
    septembre 2011 modifié
    Pour mon problème de recherche, c'est réglé merci.

    Pour le background, ça marche pas en virant le height. Au début, j'avais ce code, mais tout le monde m'a déconsseillé la position absolute:
    .contenu {
    background-color: #FFFFFF;
    background-repeat: repeat-y;
    width: 500px;
    height: 800px;
    position: absolute;
    }
    Voici une image du rendu.
    112.jpg
  • Voici le thême en ligne: http://esport-media.eu/pluxml/

    Toutes les pages ne sont pas en ligne.
  • Oulah, une sidebar en float et un conteneur en absolute ? Pas évident, bref.

    Comme on peut le voir sur ton dernier morceau de css, il y a une hauteur fixe, donc pas bon.

    La solution la plus simple : sidebar en float left, conteneur en float right, je fonctionne comme ça pour mon journal et je n'ai aucun souci de hauteur.

    Ok je suis con, un élément flottant n'ayant pas de clear:both sur son enfant direct ne peux se fermer, une simple :

    <div class="clearer"></div> juste après le conteneur de droite puis dans ton css :

    .clearer{clear:both;}

    cela devait résoudre ( logiquement ) le problème.
  • novanova Member
    septembre 2011 modifié
    En fait, j'ai fait une gourde dans mon HTML, en refermant un div là ou il faut pas. Merci pour ta solution, car j'avais complètement oublié cette règle ^^.
    Maintenant, ce problème est réglé, mais un autre viens d'apparaitre, à savoir une marge entre mon top et mon contenu, ainsi que ma barre de recherche qui se relève. Je n'arrive pas à mettre un margin-bottom à mon contenu pour aérer la base de page.

    Edit: En fait, je n'arrive plus à modifier aucun fichier, comprend que dalle là.
  • danielsandanielsan Member
    septembre 2011 modifié
    et en touchant le body ?
  • Alors concernant la marge en haut de ton content tu fais une faute simple :

    mettre une div vide pour y appliquer une image, pourquoi ?

    Tu mets ton image sur #contentwrap et c'est plié :

    #contentwrap{
    background: #FFFFFF url("chemin vers image haut") no-repeat center top;
    }

    Pour la recherche : emplacer : margin: auto par margin: 0 auto; puis padding: 0;

    Voir le résultat et nous le retourner ;)

    Modifier aucun fichier ? Vider le cache ?
  • En fait, l'image est géré par un plugin d'ologram, à savoir plxornament. Voila pourquoi la div est vide. Je souhaite adapter mon image à chaque article.

    En ce qui concerne la recherche, c'est juste la petit logo qui bug, mais je peux le supprimer.

    Pour la modification de fichier, c'est juste une erreur de ma part ^^, c'était le matin, et j'avais la tête dans le c*l.

    @ti-pierre: j'aime bien ton journal, super design ^^.
  • ah ok, bon, dans ce cas c'est juste un souci de positionnement, as-tu essayé de fixer les margin et padding à 0 voir si le bloc reprend sa place originale ?

    La hauteur attribuée correspond bien à celle de l'image ?

    Astuce pour la recherche :

    La div entourant le tout en position : relative, ainsi les enfants de cette dernière peuvent être en position absolute et pour de petits éléments comme ça tu peux les positionner plus facilement ;)
  • Voila qui est réglé. Pour mon contenu, j'ai ajouté un Padding-top pour combler le trou et j'ai réduis la news avec un margin-top.

    Pour la recherche, je verrais à la longue.

    Merci pour vos aides, ça fait plaisir ^^. Je vais essayer de le rendre valide en HTML5 & CSS3.
  • Ben voilà, mon thême est valide en HTML5 et Css3. Merci encore à vous.
  • Mais de rien ;)

    Une petite édition et un [ Résolu ] dans ton titre, merci :)
  • Je n'arrive pas à modifier mon titre ^^.

    Ti_Pierre : je l'ai fait ;)
Connectez-vous ou Inscrivez-vous pour répondre.