Bonjour,
J'ai un petit soucis de conflit de css. J'ai fait un site "one page" avec des sections et des encres avec une hauteur à 100%.
J'ai voulu intégrer une galerie faite en js et css mais elle ne se met pas en entier sur ma page.
Suivant le support, elle se coupe en deux, c'est-à-dire, elle commence dans la bonne section, ensuite il y a une autre section ("contact") et après elle suit...
Si j'enlève la "hauteur:100%" et je la mets "auto", ça fonction mais c'est ma navigation qui ne fonctionne plus?
Que faire? Je ne maîtrise pas bien les "clear" .
Voici ma page html, j'ai enlever bcp d'image, sinon c'est très long.
Voici une partie de mon code css:
Merci beaucoup.
J'ai un petit soucis de conflit de css. J'ai fait un site "one page" avec des sections et des encres avec une hauteur à 100%.
J'ai voulu intégrer une galerie faite en js et css mais elle ne se met pas en entier sur ma page.
Suivant le support, elle se coupe en deux, c'est-à-dire, elle commence dans la bonne section, ensuite il y a une autre section ("contact") et après elle suit...
Si j'enlève la "hauteur:100%" et je la mets "auto", ça fonction mais c'est ma navigation qui ne fonctionne plus?
Que faire? Je ne maîtrise pas bien les "clear" .
Voici ma page html, j'ai enlever bcp d'image, sinon c'est très long.
<body>
<div class="container">
<div id="logo"><img src="images/logo_matmax.png" alt="matmax productions"/></div>
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
<a href="#fbsection1" class="cbp-fbcurrent"><div style="margin-left:15px; line-height:6px;">L'agence</div></a>
<a href="#fbsection2"><div style="margin-left:15px; line-height:6px;">Prestations</div></a>
<a href="#fbsection3"><div style="margin-left:15px; line-height:6px;">Références</div></a>
<a href="#fbsection4"><div style="margin-left:15px; line-height:6px;">Contact</div></a>
</nav>
<!-- Début l'agence-->
<section id="fbsection1">
<div id="agence">
<h1>L'AGENCE</h1>
<span>C’est l’histoire de 2 mecs de Champéry. Petits les mecs. Chacun 22 ans. Maxime Délez et Mathieu Exhenry se sont connus sur les bancs de l’école enfantine. Un jour, une mouche les piqua, ils se mirent à délirer.<br/><br/>
La piqûre leur donna soif alors ils s’assirent autour d’un petit verre. Folie sur blanc, rien ne fout le camp... ce fut le début d’une grande idée.</span>
</div>
</section>
<!-- Fin l'agence-->
<!-- Début prestations-->
<section id="fbsection2">
<div id="prestations">
<h1>Prestations</h1>
<span><h2>Nous organisons vos ÉvÉnements</h2>
Un congrès, un lancement de produits, un concert ou un anniversaire d'entreprise ? Nous mettons notre expérience et notre professionnalisme au service de vos événements!</span>
<span><h2>Sorties d'entreprises</h2>
Assistez à un concert ou un spectacle avec vos collaborateurs et invités de marque et bénéficiez de places adjacentes, de prestations VIP....</span>
<span><h2>Licensing artistique</h2>
Vous êtes producteur, artiste, et souhaitez exporter vos spectacles et comédies musicales. MatMax possède un exceptionnel réseau relationnel.</span>
</div>
</section>
<!-- Fin prestations-->
<!-- Début références-->
<section id="fbsection3">
<div id="references">
<h1>Références</h1>
</div>
<div id="gallery-content">
<!-- gallery-->
<div id="grid">
<div class="box" data-category="Categorie 2">
<div data-thumbnail="gallery/Categorie 2/thumbnails/The Golden Apple.jpg" ></div>
<div data-image="gallery/Categorie 2/The Golden Apple.jpg" ></div>
<div class="thumbnail-caption">
<h3>The Golden Apple</h3>
<h5>Categorie 2</h5>
</div>
<div class="lightbox-text">
The Golden Apple <span>Categorie 2</span>
</div>
</div>
<div class="box" data-category="Categorie 2">
<div data-thumbnail="gallery/Categorie 2/thumbnails/Love and Hate.jpg" ></div>
<div data-image="gallery/Categorie 2/Love and Hate.jpg" ></div>
<div class="thumbnail-caption">
<h3>Love and Hate</h3>
<h5>In Categorie 2</h5>
</div>
<div class="lightbox-text">
Love and Hate <span>In Categorie 2</span>
</div>
</div>
<div class="box" data-category="Animations">
<div data-thumbnail="gallery/Animations/thumbnails/espace_VIP.jpg" ></div>
<div data-image="gallery/Animations/espace_VIP.jpg" ></div>
<div class="thumbnail-caption">
<h3>Espace VIP</h3>
<h5>Animations</h5>
</div>
<div class="lightbox-text">
Espace VIP <span>Animations</span>
</div>
</div>
<div class="box" data-category="Categorie 2">
<div data-thumbnail="gallery/Categorie 2/thumbnails/Frida Kahlo.jpg" ></div>
<div data-image="gallery/Categorie 2/Frida Kahlo.jpg" ></div>
<div class="thumbnail-caption">
<h3>Frida Kahlo</h3>
<h5>In Categorie 2</h5>
</div>
<div class="lightbox-text">
Frida Kahlo <span>In Categorie 2</span>
</div>
</div>
<div class="box" data-category="Animations">
<div data-thumbnail="gallery/Animations/thumbnails/animation.jpg" ></div>
<div data-image="gallery/Animations/animation.jpg" ></div>
<div class="thumbnail-caption">
<h3>Animation</h3>
<h5>Animations</h5>
</div>
<div class="lightbox-text">
Animation <span>Animations</span>
</div>
</div>
<div class="box" data-category="Categorie 2">
<div data-thumbnail="gallery/Categorie 2/thumbnails/Face Your Monsters Contest.jpg" ></div>
<div data-image="gallery/Categorie 2/Face Your Monsters Contest.jpg" ></div>
<div class="thumbnail-caption">
<h3>Face Your Monsters Contest</h3>
<h5>In Categorie 2</h5>
</div>
<div class="lightbox-text">
Face Your Monsters Contest <span>In Categorie 2</span>
</div>
</div>
<div class="box" data-category="Animations">
<div data-thumbnail="gallery/Animations/thumbnails/ambiance-tamisee.jpg" ></div>
<div data-image="gallery/Animations/ambiance-tamisee.jpg" ></div>
<div class="thumbnail-caption">
<h3>Ambiance tamisée</h3>
<h5>Animations</h5>
</div>
<div class="lightbox-text">
Ambiance tamisée <span>Animations</span>
</div>
</div>
<div class="box" data-category="Categorie 2">
<div data-thumbnail="gallery/Categorie 2/thumbnails/Mermaid.jpg" ></div>
<div data-image="gallery/Categorie 2/Mermaid.jpg" ></div>
<div class="thumbnail-caption">
<h3>Mermaid</h3>
<h5>In Categorie 2</h5>
</div>
<div class="lightbox-text">
Mermaid <span>In Categorie 2</span>
</div>
</div>
<div class="box" data-category="Artistes">
<div data-thumbnail="gallery/Artistes/thumbnails/Yann-Lambiel.jpg" ></div>
<div data-image="gallery/Artistes/Yann-Lambiel.jpg" ></div>
<div class="thumbnail-caption">
<h3>Yann Lambiel</h3>
<h5>Artistes</h5>
</div>
<div class="lightbox-text">
Yann Lambiel <span>Artistes</span>
</div>
</div>
<div class="box" data-category="Artistes">
<div data-thumbnail="gallery/Artistes/thumbnails/Annie-Cordy.jpg" ></div>
<div data-image="gallery/Artistes/Annie-Cordy.jpg" ></div>
<div class="thumbnail-caption">
<h3>Annie Cordy</h3>
<h5>Artistes</h5>
</div>
<div class="lightbox-text">
Annie Cordy <span>Artistes</span>
</div>
</div>
<div class="box" data-category="Animations">
<div data-thumbnail="gallery/Animations/thumbnails/enfant.jpg" ></div>
<div data-image="gallery/Animations/enfant.jpg" ></div>
<div class="thumbnail-caption">
<h3>Enfant maquillé</h3>
<h5>Animations</h5>
</div>
<div class="lightbox-text">
Enfant maquillé <span>Animations</span>
</div>
</div>
<div class="box" data-category="Animations">
<div data-thumbnail="gallery/Animations/thumbnails/jeux-gonflable.jpg" ></div>
<div data-image="gallery/Animations/jeux-gonflable.jpg" ></div>
<div class="thumbnail-caption">
<h3>Jeux gonflable</h3>
<h5>Animations</h5>
</div>
<div class="lightbox-text">
Jeux gonflable <span>Animations</span>
</div>
</div>
</div> <!-- #container -->
<!-- fin gallery-->
</div>
</section>
<!-- Fin références-->
<!-- Début contact-->
<section id="fbsection4">
<div id="contact">
<h1>Contact</h1>
<h2>Un PROJET ? CONTACTEZ-NOUS...</h2>
<p><b>MatMax Productions Sàrl</b>, Place Centrale 1, 1870 Monthey, tél.</p>
<div>
<form action="envoi.php#fbsection4" method="post" name="formContact">
<input type="text" id="nom" name="nom" placeholder="Nom" /><br/>
<input type="text" id="prenom" name="prenom" placeholder="Prénom" /><br/>
<input type="text" id="email" name="email" placeholder="Email"><br />
<input type="text" id="sujet" name="sujet" placeholder="Sujet" /><br/>
<textarea id="message" name="message" placeholder="Message"></textarea><br/><br/>
Veuillez recopier ce code :
<div>
<img style="margin:10px; vertical-align:middle; "src="captcha.php"><input type="text" name="captcha" style="width:70px; margin:20px;"/>
</div>
<input type="submit" value="Envoyer">
</form>
</div>
</div>
</section>
<!-- Fin contact-->
</div>
</div>
<div id="footer">© 2014 - MatMax Productions. Créé par <a href="http://burgenercommunication.ch" target="_blank">Burgener Communications</a>.</div>
<script src="js/jquery.min.js"></script>
<!-- jquery.easing by http://gsgd.co.uk/ : http://gsgd.co.uk/sandbox/jquery/easing/ -->
<script src="js/jquery.easing.min.js"></script>
<!-- waypoints jQuery plugin by http://imakewebthings.com/ : http://imakewebthings.com/jquery-waypoints/ -->
<script src="js/waypoints.min.js"></script>
<!-- jquery-smartresize by @louis_remi : https://github.com/louisremi/jquery-smartresize -->
<script src="js/jquery.debouncedresize.js"></script>
<script src="js/cbpFixedScrollLayout.min.js"></script>
<script>
$(function() {
cbpFixedScrollLayout.init();
});
</script>
<!-- SCRIPTS FOR THE GALLERY PLUGIN -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/rotate-patch.js"></script>
<script src="js/gridGallery.min.js"></script>
<script>
$('document').ready(function(){
//INITIALIZE THE PLUGIN
$('#grid').grid({
showFilterBar: true, //Show the navigation filter bar at the top
imagesToLoad: 5, //The number of images to load when you click the load more button
imagesToLoadStart: 15, //The number of images to load when it first loads the grid
lazyLoad: false, //If you wish to load more images when it reach the bottom of the page
isFitWidth: true, //Nedded to be true if you wish to center the gallery to its container
horizontalSpaceBetweenThumbnails: 5, //The space between images horizontally
verticalSpaceBetweenThumbnails: 5, //The space between images vertically
columnWidth: 'auto', //The width of each columns, if you set it to 'auto' it will use the columns instead
columns: 5, //The number of columns when you set columnWidth to 'auto'
columnMinWidth: 220, //The minimum width of each columns when you set columnWidth to 'auto'
isAnimated: true, //If you wish the gallery to have animated effects when resizing the grid
caption: true, //Show the caption in mouse over
captionType: 'grid', // 'grid', 'grid-fade', 'classic' the type of caption effect
lightBox: true, //Do you want the lightbox?
lightboxKeyboardNav: true, //Keyboard navigation of the next and prev image
lightBoxSpeedFx: 500, //The speed of the lightbox effects
lightBoxZoomAnim: true, //Do you want the zoom effect of the images in the lightbox?
lightBoxText: true, //If you wish to show the text in the lightbox
lightboxPlayBtn: true, //Show the play button?
lightBoxAutoPlay: false, //The first time you open the lightbox it start playing the images
lightBoxPlayInterval: 4000, //The interval in the auto play mode
lightBoxShowTimer: true, //If you wish to show the timer in auto play mode
lightBoxStopPlayOnClose: false, //Do you want pause the auto play mode when you close the lightbox?
});
});
</script>
</body>Voici une partie de mon code css:
html, body,
.container,
.cbp-fbscroller,
.cbp-fbscroller section {
height: 100%;
background-color:#050000;
}
#gallery-content {
margin:230px auto 0 auto!important;
width:75% !important;
text-align:center!important;
}
Merci beaucoup.
