Bonjour à tous,
J'ai adapté un modèle de page responsive fait avec Bootstrap 3 dans TYPO3.
Quand j'utilise mon modèle bootstrap avant intégration dans TYPO3 mon div "bas" reste bien en place, c.à.d. en dessous de ma partie "bandeau".
Mais quand je l'utilise dans et avec TYPO3, lors de redimensionnement, la partie "bas" se superpose à la partie "bandeau". J'ai comparé les 2 codes et les ai testé dans Firebug et je ne vois pas ce qui cloche !
Merci d'avance pour vos réponses.
Modifié par climat26 (11 May 2015 - 14:24)
J'ai adapté un modèle de page responsive fait avec Bootstrap 3 dans TYPO3.
<body>
<!-------------------------/partie bandeau ------------------------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="logo">
<a href="#"><img src="../logo/logoEnergie+_2015_vectorise_02.png" alt="" name="logo" width="68" height="36" id="logo"><div>Efficacité énergétique des bâtiments tertiaires</div></a>
</div><!--logo -->
<form class="navbar-form navbar-right" role="search" id="recherche">
<div class="form-group">
<input type="text" class="form-control" placeholder="recherche">
</span>
</div><!--form-group -->
</form>
<!--navbar_niveau2 -->
<div class="navbar_niveau2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre_navigation">
<span class="sr-only">Basculer la navigation</span>
<p>Menu</p></span>
</button>
<!--bouton recherche responsive -->
<span class="visible-xs">
<div class="btn-group pull-right" type="submit">
<a class="btn" data-toggle="dropdown" href="#" id="loupe"> <i class="glyphicon glyphicon-search"></i></a>
<ul class="dropdown-menu" id="recherche2">
<li><a href="#"><form class="form-inline">
<input class="form-control" placeholder="Rechercher" type="text">
</form></a></li>
</ul>
</div>
</span>
<!--/bouton recherche responsive -->
<div class="collapse navbar-collapse" id="barre_navigation">
<ul class="nav navbar-nav pull-right">
<li><a href="#"><img src="../version10/icono/interface/icone_gerer.png" name="gerer" width="30" height="30" id="gerer" title="vers le menu gérer" /> <span class="visible-xs visible-petit">Gérer</span></a></li>
...
</ul>
</div><!--/.nav-collapse -->
</div><!--navbar_niveau2 -->
</div><!--/container-fluid -->
</nav><!--/navbar navbar-default -->
<!-------------------------/partie sommaire et contenu ------------------------->
<div class="container-fluid contenu" id="bas">
<ol class="breadcrumb visible-md visible-lg">
<span style="font-weight:bold;">>> Vous êtes ici : </span>
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol><!--breadcrumb -->
<!-------------------------/partie sommaire ------------------------->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3" id="sommaire">
<p>Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.5<!-- 3 col --> </p>
</div><!--id="sommaire" -->
<!-------------------------/partie contenu ------------------------->
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-9" id="contenu02">
<h1>Titre de la page</h1>
<p>Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur.</p>Quand j'utilise mon modèle bootstrap avant intégration dans TYPO3 mon div "bas" reste bien en place, c.à.d. en dessous de ma partie "bandeau".
Mais quand je l'utilise dans et avec TYPO3, lors de redimensionnement, la partie "bas" se superpose à la partie "bandeau". J'ai comparé les 2 codes et les ai testé dans Firebug et je ne vois pas ce qui cloche !
<!-------------------------/PARTIE HAUT, logo, menu et recherche------------------------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="logo">
<a href="http://130.104.235.19:8081/energieplus_6_2/?id=2"><img src="fileadmin/typo3template/images/logoEnergie_2015_vectorise_02.png" alt="" name="logo" width="68" height="36" id="logo"><div>Efficacité énergétique des bâtiments tertiaires</div></a>
</div><!--logo -->
<form class="navbar-form navbar-right" role="search" id="recherche">
<div class="form-group">
<!--###searchbox### start-->
<input type="text" class="form-control" placeholder="rechercher">
<!--###searchbox### end-->
</div><!--form-group -->
</form>
<!--navbar_niveau2 - partie qui disparait sur les petits ecrans-->
<div class="navbar_niveau2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre_navigation">
<span class="sr-only">Basculer la navigation</span>
<p>Menu</p>
</button>
<!--bouton recherche responsive -->
<span class="visible-xs">
<div class="btn-group pull-right" type="submit">
<a class="btn" data-toggle="dropdown" href="#" id="loupe"> <i class="glyphicon glyphicon-search"></i></a>
<ul class="dropdown-menu" id="recherche2">
<li>
<a href="#">
<form class="form-inline">
<input class="form-control" placeholder="Rechercher" type="text">
</form>
</a>
</li>
</ul><!--dropdown-menu-->
</div><!--btn-group pull-right-->
</span><!--visible-xs-->
<!--/bouton barre de navigation responsive-->
<div class="collapse navbar-collapse" id="barre_navigation">
<ul class="nav navbar-nav pull-right">
<li><a href="http://130.104.235.19:8081/energieplus_6_2/?id=9942"><img src="fileadmin/typo3template/images/icone_gerer.png" name="gerer" width="30" height="30" id="gerer" title="vers le menu gérer" /> <span class="visible-xs visible-petit">Gérer</span></a></li>
...
</ul>
</div><!--/.nav-collapse navbar-collapse -->
</div><!--navbar_niveau2 -->
</div><!--container-fluid -->
</nav><!--/navbar navbar-default -->
<!-------------------------/PARTIE BAS, sommaire et contenu ------------------------->
<div id="bas" class="container-fluid contenu">
<!-------------------------/fil d'ariane ------------------------->
<ol class="breadcrumb visible-md visible-lg">
<!--###ariane### start -->
<span style="font-weight:bold;">>> Vous êtes ici : </span>
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
<!--###ariane### end -->
</ol><!--breadcrumb -->
<!-------------------------/partie sommaire ------------------------->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs" id="sommaire">
<!--###menu_1### start -->
<div id="label01"><a href="#" title="retour vers le menu général">LABEL 01</a></div>
<div id="label02"><a href="#" title="retour vers le menu yyy">LABEL 02</a></div>
<div id="label03"><a href="#" title="retour vers le menu zzz">LABEL 03</a></div>
<ul>
<li class="liste_espace"><a href="#" title="">item 01</a></li>
<li><a href="#" title="">item 02</a>
<ul>
<li><a href="#" title="">item 022</a></li>
<li><a href="#" title="">item 023</a></li>
</ul>
</li>
<li><a href="#" title="">item 05</a></li>
<li><a href="#" title="">item 06</a></li>
<li><a href="#" title="">item 07</a></li>
</ul>
<!--###menu_1### end -->
<!--###menu_2### start -->Menu2<!--###menu_2### end -->
</div><!-- end of div lateral -->
<!-------------------------/partie contenu ------------------------->
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12" id="contenu02">
<!--TYPO3SEARCH_start-->
<!--###content### start -->
<h2>Titre du bloc de contenu</h2>
<p>Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur.</p>
<!--###content### end -->Merci d'avance pour vos réponses.
Modifié par climat26 (11 May 2015 - 14:24)