Bonjour à toutes et tous ,
Je suis nouveau parmi vous. D'habitude, je lis le forum, mais là, je suis bien obligé de vous demander de l'aide Smiley smile
Comme je me mets à l'apprentissage des css et du codage html en général, je me heurte à un problème dont je ne suis pas venu à bout après toute une après-midi de galère ...

Voilà le problème:
Sur ma page, apparaît une barre verticale quand je mets du contenu trop important dans le container.

Comme je suis parti d'un template bootstrap, j'ai un peu procédé à l'arrache pour essayer de comprendre le truc qui ne va pas --en virant au fur et à mesure le codage Smiley lol - et c'est ainsi que je me suis aperçu qu'un contenu de photos posait soucis ;
Ce qu'il faudrait, je pense, c'est que la div s'adapte au contenu, mais sans laisser apparaître la barre inesthétique.

Je suis allé bidouiller dans la css en faisant un hidden pour l'overflow, mais rien n'y fait ...

Je suis sur que le problème est hyper simple mais là, j'en peux plus..
Bon, je vous mets le code html pour que vous compreniez:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/modernizr.custom.js"></script>
</head>
<body>

	<div class="dummy">	
		<div id="bl-main" class="bl-main">
			<section>
					<div class="bl-box">
					 </div>
					                <div class="bl-content about">
						               <div class="container">
							
								<div class="inner-about">
									<div class="item_content">
									<div class="col-md-6 item_introtext list">
									<div class="clearfix"></div>
								</div>
							</div>
						<div class="team-section">
										
									<div class="col-md-3 team-img">
									<h4>Mic</h4>
									<a href="#" class="mask"><img src="images/gaetan.jpg" alt="image" class="img-responsive zoom-img"></a>
									</div>
									<div class="col-md-3 team-img">
									<a href="#" class="mask"><img src="images/gaetan.jpg" alt="image" class="img-responsive zoom-img"></a>
									<h4>Gaetan</h4>
									</div>
									<div class="col-md-3 team-img">
									<a href="#" class="mask"><img src="images/gaetan.jpg" alt="image" class="img-responsive zoom-img"></a>
									<h4>Lup</h4>
									</div>
							
							<div class="clearfix"></div>
								</div>							
					</div>
				</div>
			
		        </section>
		  </div>
		  </div>
				
		  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		  <script src="js/boxlayout.js"></script>
		  <script>
			$(function() {
				Boxlayout.init();
			});
		  </script>
		  <div class="copy-right">
   			<div class="container">
		
		</div>
	</div>		 		
</body>
</html>


Pour la css, j'ose même pas vous la mettre, c'est une vraie usine à gaz...
upload/58210-test.jpg
Modérateur
Bonsoir,
Avant de venir sur le problème, un ou deux trucs:

1) Si ton code HTML est généré et donc mal indenté, essaie de le nettoyer un peu avant de le poster, là c'est illisible. La plupart des éditeurs de code/IDE ont des outils pour le faire en un click, il existe des outils en ligne aussi. En plus d'être lisible, ça permet de voir les défaut de structure (sur lesquels ton éditeur peut aussi t'avertir).

2) Essaie de ne que coller que ce qui est utile au problème. Voilà ce que ça pourrait donner: (j'ai volontairement collé un peu trop de code, car on n'est pas forcément sûr, ce qui est sûr c'est que les appels js/css, le head, etc. ne nous sert pas à grand chose sur ce problème)


<div class="dummy">	
  <div id="bl-main" class="bl-main">
    <section>
      <div class="bl-box">
      </div>
      <div class="bl-content about">
        <div class="container">

          <div class="inner-about">
            <div class="item_content">
              <div class="col-md-6 item_introtext list">
                <div class="clearfix"></div>
              </div>
            </div>
            <div class="team-section">

              <div class="col-md-3 team-img">
                <h4>Mic</h4>
                <a href="#" class="mask">
                  <img src="images/gaetan.jpg" alt="image" class="img-responsive zoom-img">
                </a>
              </div>
              <div class="col-md-3 team-img">
                <a href="#" class="mask">
                  <img src="images/gaetan.jpg" alt="image" class="img-responsive zoom-img">
                </a>
                <h4>Gaetan</h4>
              </div>
              <div class="col-md-3 team-img">
                <a href="#" class="mask">
                  <img src="images/gaetan.jpg" alt="image" class="img-responsive zoom-img">
                </a>
                <h4>Lup</h4>
              </div>

              <div class="clearfix"></div>
            </div>							
          </div>
        </div>
      </div>
    </section>
  </div>
</div> 		


3) Il manque une </div> avant </section>

4) Le clearfix s'applique sur le parent:

<div class="team-section clearfix">
  <div class="col-md-3 team-img">… </div>
  <div class="col-md-3 team-img"> … </div>
</div>
<!-- Au lieu de: -->
<div class="team-section">
  <div class="col-md-3 team-img">… </div>
  <div class="col-md-3 team-img"> … </div>
  <div class="clearfix"></div>
</div>


5) Ton code a un petit syndrome de divite. Il y a bien une balise section qui traîne, mais on ne comprend pas trop ce qu'elle vient faire là.

6) Pour finir et pour coller au problème, vu le visuel il doit y avoir des positionnements/marges/padding/tailles spécifiques qui posent problèmes. Sans les CSS appliquées à .team-section et à ses enfants, ou (encore mieux), un exemple en ligne, difficile de d'établir un diagnostic.
Salut à toi et merci de t'être arrêté sur le sujet Smiley smile

Alors, tu peux voir le problème en ligne :
ici
J'ai juste mis 3 paragraphes et la scroll barre apparait Smiley ohwell


J'ai l'impression que le
.bl-content, 
div.bl-panel-items > div > div {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 60px;
	left: 30px;
	right: 30px;
	bottom: 30px;
	padding: 0 20px;
	overflow: hidden;
	overflow-y: auto;

pourrait-être un peu à l'origine du problème ?

Ce qu'il faudrait, c'est que le container qui inclu les paragraphes puisse s'étirer sans scroll.
(S'il doit y avoir une scroll, que ce ne soit pas dans le container mais dans la fenêtre du navigateur comme ici sur le forum).
Modifié par gillesc123 (24 Mar 2015 - 23:32)
Modérateur
Oui c'est bien là Smiley ravi

gillesc123 a écrit :
Ce qu'il faudrait, c'est que le container qui inclu les paragraphes puisse s'étirer sans scroll.

Dans le meilleur des mondes, mais il devrait donc avoir une hauteur auto pour s'adapter au contenu. Mais les transitions css ne permettent pas d'animer une valeur absolue vers auto.
Une astuce pour contourner ce problème est donc d'assumer le scroll dans l'élément, mais de le confondre avec la taille de la fenêtre, et de compenser par des marges internes (ça ne fera alors plus de différence, il sera plaqué à droite et prendra toute la hauteur de la fenêtre):
.bl-content, 
div.bl-panel-items &gt; div &gt; div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 60px 50px 30px;
	overflow: auto;


p.s: un problème risque d'apparaître avec la position de <span class="bl-icon bl-icon-close"></span>, place le dans .bl-content et ça passera mieux.
Modifié par kustolovic (25 Mar 2015 - 01:08)
Hello Kustolovic et merci pour ta patience.

J'ai appliqué tes changements préconisés, mais au final ça déplace le problème puisque le scroll disparaît de la seconde page pour aller sur la première (jaune) ;/ ce que je ne veux pas.
(Par contre, sur téléphone, plus de scroll, c'est impeccable.)
D'autre part, autre problème: le contenu de la seconde page apparaît aussi sur la première page.

Il y a un truc que je ne comprends vraiment pas. Il y a pourtant foultitude de sites qui sont scrollables sans barre disgracieuses et qui ont un rendu impeccable sur smartphones.
Modifié par gillesc123 (25 Mar 2015 - 08:40)
Bonjour,

Il y a plusieurs choses qui me paraissent curieuses par rapport à Bootstrap :
- Les col-md... doivent être inclus dans un row
- la somme des col-md devrait être égale à 12, et 6 + 3 + 3 + 3 = 15

ça explique peut-être une partie de tes pb
Bonjour Philivert,
Je vais voir ça pour les sommes. Mais peux-tu me dire où les vois-tu ?

Sinon, il y a une solution un peu à l'arrache que j'ai trouvé, et qui consiste à remplir le container pile poil. Là, en bonne logique, les barres disparaissent, sur PC comme sur smartphone.

Mais c'est une solution rustine dont je ne peux me satisfaire.
Modifié par gillesc123 (25 Mar 2015 - 09:25)
Bah finalement, j'ai trouvé un bidouillage comme expliqué plus haut, qui me convient assez.
Donc je ferme le sujet.

Grand merci aux participants Smiley smile
Modifié par gillesc123 (25 Mar 2015 - 16:04)