Besoin d'aide pour convertir le menu vertical en menu horizontal Header sans provoquer d'erreur 500"

NadNad Member
21 mai modifié dans Modifications

Bonjour à tous,

Je rencontre des difficultés pour effectuer une refonte de mon site PluXml. Actuellement, le menu de navigation est affiché verticalement à gauche de la page, mais je souhaite le rendre horizontal en haut de la page pour un look plus moderne. mais le site me renvoie une erreur 500 a chaque fois

Voici le fichier PHP original du header avec le menu vertical :

<?php if(!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
<html lang="<?php $plxShow->defaultLang() ?>">
<head>
    <title><?php $plxShow->pageTitle(); ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php $plxShow->charset(); ?>" />
    <?php $plxShow->meta('description') ?>
    <?php $plxShow->meta('keywords') ?>
    <link rel="icon" type="image/png" href="<?php $plxShow->template(); ?>/img/favicon.png" />
    <link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/ext/lesailesdelavie.css" media="screen" />
    <script src="<?php $plxShow->template(); ?>/ext/fonctions.js" type="text/javascript"></script>
</head>

<?php 
  $page = $plxShow->mode();
  switch ($page) {
    case "article":
      $page .= $plxShow->artId();
      break;
    case "static":
      $page .= $plxShow->staticId();
      break;
  }

  $attribut_onload_dans_body = " onload=\"liens_nouvellefenetre('nouvfen'); if (typeof(window.initGoogleMaps)=='function') { initGoogleMaps(); } return false;\"";
?>

<body id="top" class="<?php echo $page; ?>"<?php echo $attribut_onload_dans_body; ?>>
    <div id="conteneur">
        <div id="wrapper">
            <div class="wrapper_interne">
                <div class="wrapper_interne1">
                    <div class="colonne_gauche">
                        <a href="index.php" title="Les Ailes de la Vie">
                            <img src="<?php $plxShow->template(); ?>/img/logo.png" alt="Association Les Ailes de la Vie" />
                        </a>
                        <ul class="menu">
                            <?php
                              $numcategorie = '001';
                              include 'menu-articles.php';
                            ?>
                        </ul>
                        <div class="actus">
                            <?php $plxShow->staticInclude(1); ?>
                        </div>
                    </div>
                    <div class="colonne_droite">
                        <div class="titre">
                            <h1 id="titre_site">
                                <img src="<?php $plxShow->template(); ?>/img/titre-lesailesdelavie.png" alt="Les Ailes de la Vie" />
                            </h1>
                            <div class="tel">
                                <span class="size20">Tél. 06 46 65 03 53</span>
                                <span>Mairie - 30 rue de la Paix - 17230 Andilly</span>
                            </div>
                            <div class="email">
                                <span>Courriel :</span>
                                <script type="text/javascript">lien_courriel("contact", "lesailesdelavie", "org");</script>
                            </div>
                            <div class="spacer"></div>
                        </div>
                        <div class="contenu">
                            <!-- Reste du contenu de la page -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Réponses

  • cpalocpalo Member
    21 mai modifié

    Bonjour,
    Utilises Css-Grid Layout et cela te faciliteras la tâche pour cette refonte.
    Avec par exemple , pour commencer

    .wrapper_interne1" {
        display: grid;
        .......
    }
    

    Je vais regarder ton css de plus près
    Cordialement

  • bazooka07bazooka07 PluXml Lead Developer, Moderator

    Bonjour,
    Pour citer ou afficher du code PHP et HTML, encadre ta citation avec des apostrophes anglaises ou inversées (touche 7 en haut du clavier).
    Indique-nous les versions de PHP et PluXml que tu utilises.
    As-tu accès aux logs de ton serveur pour que l'erreur 500 soit plus explicite ?

  • cpalocpalo Member

    Ton projet me plaît bien (je suis sensible à cette thematique).
    Alors si tu veux, envoies moi en message privé ton thème pour cela plus facile qu'avec seulement ton css.

  • NadNad Member

    Merci pour vos differents retours :) , ma problématique c’est pas tant le code CSS, c’est tant le fait de mettre le code de la Sidebar en dessous de la div « conteneur », et de se manger une erreur 500
    Ou de mettre peu importe quelle balise html dans le header
    En gros : dès qu’on ajoute une div en dessous de la div conteneur qui est située dans le header.php, peu importe la taille ou la consistance on se mange une erreur 500

  • NadNad Member

    Parce que en soit, ça fonctionne si je modifie sur le site avec l'aide de l'inspecteur, et je veux juste reporter cette modification sur le header.php, sauf que PluxML est allergique à l'ajout ou la modification de balise html

  • kowalskykowalsky Member

    Bonjour,

    un lien vers ton site permettrait de voir celui-ci en situation et mieux t'aider. Ceci dis, tu indiques que tu veux modifier header.php mais pour moi tu nous donnes le code de home.php et il n'y a aucun appel à header.php dans ce code.
    Actuellement tu utilises un thème prévu pour fonctionner avec deux colonnes verticales et tu veux passer à un thème avec une seule colonne et avec les éléments à la suite.

    Dans un premier temps, il serait bien de revoir l'organisation de ton thème : ce que tu appelles ton "header" correspond au conteneur "colonne_gauche" et ton "contenu" au conteneur "colonne_droite" or ces deux conteneurs sont dans le même conteneur "wrapper_interne1" (lui même contenu dans 3 wrappers supérieurs ...), ce qui fait beaucoup d'éléments à prendre en compte pour repositionner ton "header".

    Pour afficher le "header" en haut de page, le plus simple sera de repositionner tout l'ensemble. Tu peux pour cela t'inspirer d'une structure basique en html5 pour replacer tes différents éléments au bon endroit :

    <body>
        <header> (titre)
        </header>
        <nav> (menu)
        </nav>
    
        <main>(contenu)
        </main>
    
        <footer>(footer)
        </footer>
    </body>
    
Connectez-vous ou Inscrivez-vous pour répondre.