Problème de mise en page - bootstrap twitter

cafreunion
CakePHP

Bonjour,

J'ai un petit soucis dans la mise en forme de ma page, ci-dessous le layout utilisé pour mes pages

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <?php echo $this->Html->charset('UTF-8'); ?>
    <link rel="alternate" type="application/rss+xml" title="Mon Blog" href="<?php echo $this->Html->url(array('controller'=>'posts','action'=>'feed','ext'=>'rss'));?>">
    <title>
        <?php echo $title_for_layout; ?>
    </title>
<?php echo $this->Html->css(array('bootstrap')); 
        echo $this->fetch('meta');
        echo $this->fetch('css');
        echo $this->fetch('script');
    ?>
    </head>
<body>
    <div class="navbar navbar-fixed-top"> 
        <div class="navbar-inner">                          
            <?php echo $this->element('menu');?>
        </div>
    <div>

            <div class="container-fluid">
                <?php echo $this->Session->flash(); ?>
                <?php echo $this->fetch('content'); ?>
            </div>

</body>
</html>

le problème se pose lorque le contenu est très long, c'est a dire au lieu de m'afficher des scrolles pour lire la suite du texte il ne m'affiche rien donc j'ai en quelque sorte un écran figé.

Comment faut-il modifier le container afin qu'il ai une hauteur automatique avec affichage des scrolles

J'utilise le Bootstrap v2.2.1

Merci de votre aide

Cafreunion

6 réponses

cafreunion
Auteur
Réponse acceptée

bonjour,
dernièrement j'ai pu résoudre mon problème de layout
ci-dessous le code si ca peux aider

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta <?php echo $this->Html->charset('UTF-8'); ?>
    <link rel="alternate" type="application/rss+xml" title="Mon Blog" href="<?php echo $this->Html->url(array('controller'=>'posts','action'=>'feed','ext'=>'rss'));?>">
<meta http-equiv="content-Type" content="text/html"; charset="utf8"/>
    <title><?php echo $title_for_layout;?></title>
    <?php echo $this->Html->css(array('bootstrap')); 
          echo $this->fetch('meta');
          echo $this->fetch('css');
          echo $this->fetch('script');
     ?>
    </head>
<body>
    <div class="navbar">
            <div class="navbar-fixed-top navbar-inner"> 
                <?php echo $this->element('menu');?>
        </div>
    <div>

            <div class="container-fluid">
                <?php echo $this->Session->flash(); ?>
                <?php echo $this->fetch('content'); ?>
            </div>

        <div>
            <?php echo $this->element("debug");?>
        </div>

</body>
<?php echo $this->Html->script('bootstrap'); ?>
<?php echo $scripts_for_layout;?>
</html>

cafreunion

kal-el

As-tu essayer avec un autre navigateur internet pour voir si le problème persiste?

cafreunion
Auteur

bonjour,

j'ai fais un test sur ie8 mais la mise en page est pas pris en compte
ci-dessous le code de ma page

<?php $this->set('title_for_layout',$page'name']);?>
    <div class="row-fluid">

        <div class='page-header'>
            <h1><?php echo $page'name'];?></h1>
        </div>

                <div class="span9">
                    <?php echo $page'content'];?>
                </div>

                <div class="span2">
                    <?php echo $this->element('sidebar');?>
                </div>
    </div>

j'utilise actuellement chrome comme navigateur par défaut

Merci de l'aide que vous pourriez m'apporter

cafreunion

kal-el

Salut,
est-ce possible d'avoir un lien permettant de visualiser ton site?

cafreunion
Auteur

Bonjour,
Pour l'instant mon site n'est pas visible car je le développe en local le temps de finaliser certains module
Cafreunion

BenFarhat

Essait également de changer le doctype pour passer à HTML5

<!DOCTYPE html>
<html lang="fr">
  <head>
    ...

sinon coté bootstrap il y a également le fichier bootstrap-responsive que tu pourrais rajouter
Pour ce genre de problèmes je te conseil fortement de passer par des outils du genre webdevelopper ou firebug qui te permettent de voir ce qui ne va pas (ca pourrait tout bêtement être une balise mal fermé (d'ou le besoin de passer par HTML5 qui est plus souple)
en faite le container de bootstrap n’enlève pas le scroll du tout donc ca pourrais probablement un div mal ferme au niveau de ton menu et du coup le contenu de ton site se retrouve dans le div ayant la classe navbar

Essai de regarder dans le fichier /App/View/Element/menu.ctp si il y a le même nombre de "<div" et "</div" (tu peut compter ça grâce à notepad++ ou sublime ou alors à la main

PS j'ai constaté dans ton code qu'il te manque un span, ca n'a rien a voir avec le problème de scroll mais rappelle toi que la grille de bootstrap (fluid ou pas) et composé de 12 parties or je vois que tu utilises un span9 avec un span2 (il y a un bloque vide (rajoute pour ta sidebar un block pour avoir span3)

Bonne continuation :)