Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme affichage sous bootstrap

Sujet résolu
linkeuh
    1 décembre 2015 à 19:20:09

    Bonsoir,

    J'ai un petit soucis d'affichage avec un template css sous bootstrap : en effet, quand j'affiche la partie "portfolio" les image se "chevauchent" lors du premier affichage et plus par la suite (Mozilla, IE) et leur comportement est assez chaotique sous Safari. Le problème est visible à l'adresse nilspastor point com

    Vous trouverez ci-dessous le code de la page, les fichiers css quant à eux n'ont pas été modifiés, j'ai donc peut-être fait une boulette en modifiant le code :

    <!DOCTYPE html>
<html lang="fr">
  <head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nils Pastor | Portfolio</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/font-awesome.min.css" />
	<link rel="stylesheet" href="css/font-awesome.css" />
	<link href="css/default.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/animate.css" />
	<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />	
	<link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->	
  </head>
  <body>
    <header>
		<div class="main-menu">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<h1><a class="navbar-brand" href="accueil.html" data-0="line-height:90px;" data-300="line-height:50px;">Nils Pastor</a></h1>   
					</div>		
					<div class="col-md-8">
						<div class="dropdown">
							<ul class="nav nav-pills">
								<li class="active"><a href="index.html">Portfolio</a></li>
								<li><a href="skills.html">Compétences</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</div>
					</div>	
				</div>				
			</div>
		</div>
	</header>
	
	<section id="section-works" class="section appear clearfix">
			<div class="container">
				
				<div class="row mar-bot40">
					<div class="col-md-offset-3 col-md-6">
						<div class="section-header">
							<h2 class="section-heading animated" data-animation="bounceInUp">Portfolio</h2>
						</div>
					</div>
				</div>
				
				  <br />
					<br />
					  <br />
						<br />
						  <div class="col-md-12">
                            <div class="row">
                              <div class="portfolio-items isotopeWrapper clearfix" id="3">
							  
                                <article class="col-md-4 isotopeItem">
									<div class="portfolio-item">
										<img src="img/portfolio/img1.jpg" alt="" />
										 <div class="portfolio-desc align-center">
											<div class="folio-info">
												<h5><a href="http://lescontesansplumes.com/ccrolland_lab/index.html">Sid's Thumb</a></h5>
												<a href="img/portfolio/img1.jpg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
											 </div>										   
										 </div>
									</div>
                                </article>

                                <article class="col-md-4 isotopeItem">
									<div class="portfolio-item">
										<img src="img/portfolio/img2.jpg" alt="" />
										 <div class="portfolio-desc align-center">
											<div class="folio-info">
												<h5><a href="http://lescontesansplumes.com/osiris/www/index.html">DRIVE !T MAD</a></h5>
												<a href="img/portfolio/img2.jpg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
											</div>										   
										 </div>
									</div>
                                </article>
								

                                <article class="col-md-4 isotopeItem">
									<div class="portfolio-item">
										<img src="img/portfolio/img3.jpg" alt="" />
										 <div class="portfolio-desc align-center">
											<div class="folio-info">
												<h5><a href="http://lescontesansplumes.com/revival/mini-map/mini-map.html">LCSP - Carte du monde</a></h5>
												<a href="img/portfolio/img3.jpg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
											 </div>										   
										 </div>
									</div>
                                </article>

                                <article class="col-md-4 isotopeItem">
									<div class="portfolio-item">
										<img src="img/portfolio/img4.jpg" alt="" />
										 <div class="portfolio-desc align-center">
											<div class="folio-info">
												<h5><a href="http://lescontesansplumes.com/lcsp/">SYSTEME DE BILLETS AVEC COMMENTAIRES (MODELE MVC)</a></h5>
												<a href="img/portfolio/img4.jpg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
											 </div>										   
										 </div>
									</div>
                                </article>

                                <article class="col-md-4 isotopeItem">
									<div class="portfolio-item">
										<img src="img/portfolio/img5.jpg" alt="" />
										 <div class="portfolio-desc align-center">
											<div class="folio-info">
												<h5><a href="http://lescontesansplumes.com/revival/2014/apat/">FORUM DES APATRIDES</a></h5>
												<a href="img/portfolio/img5.jpg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
											 </div>										   
										 </div>
									</div>
                                </article>

                                <article class="col-md-4 isotopeItem">
									<div class="portfolio-item">
										<img src="img/portfolio/img6.jpg" alt="" />
										 <div class="portfolio-desc align-center">
											<div class="folio-info">
												<h5><a href="http://lescontesansplumes.com/revival/2012/lcspv5/">LCSP 0.4</a></h5>
												<a href="img/portfolio/img6.jpg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
											 </div>										   
										 </div>
									</div>
                                </article>
                                </div>
                                        
							</div>
                                     

							</div>
                        
				
			</div>
		</section>
		
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.isotope.min.js"></script>
	<script src="js/fancybox/jquery.fancybox.pack.js"></script>
	<script src="js/wow.min.js"></script>
	<script src="js/functions.js"></script>
	<script type="text/javascript">
	
		new WOW().init()
	</script>
	
  </body>
</html>



    • Partager sur Facebook
    • Partager sur Twitter

    Probleme affichage sous bootstrap

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown