28111 sujets

CSS et mise en forme, CSS3

Mise en page HTML/CSS

Bonsoir à tous ! Smiley smile

Je suis actuellement en train de finaliser mon site web, et je rencontre un problème.

Sur mon ordi portable, ma mise en page est nickel, mais lorsque je l'essaye sur un post plus grand, ma div sur le cote droit bouge de quelques pourcentages, pareil pour mon footer ! Smiley ohwell

Alors je voudrais savoir comment il fallait que je fasse pour que cette div ne bouge plus ? Smiley confused


HTML : 

<!DOCTYPE html>
<html>

<head>
	<meta  charset=utf-8 />
		<link rel="stylesheet" type="text/css" href="style.css" />
			<title> T.T.P.M (Transports Travaux Public Marchois) </title>
	
 
				<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>	  

				<script type="text/javascript" src="lightBox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
				<script type="text/javascript" src="lightBox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
				<link rel="stylesheet" type="text/css" href="lightBox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
		
				<script type="text/javascript">

						$(document).ready(function() {
						   $("a#exemple2").fancybox({
							  'overlayShow' : false,
							  'transitionIn' : 'elastic',
							  'transitionOut' : 'elastic'
						   });
						});

					
				</script>
				
				<script>
						   $(function(){
							  setInterval(function(){
								 $(".slideshow2 ul").animate({marginLeft:-500},800,function(){
									$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
								 })
							  }, 3500);
						   });
						
				</script>
				
<!-- FACEBOOK -->

		<script>(function(d, s, id) {
			  var js, fjs = d.getElementsByTagName(s)[0];
			  if (d.getElementById(id)) return;
			  js = d.createElement(s); js.id = id;
			  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
			
		</script>
		
		
				
</head>


<body onload="slideit()">	

<!--LOGO-->

	<div >
		<a href="accueil.html" ><img class="logo" src="images/EnginsTP/index.png" width='150'/></a>
	</div>
		
		


	<nav>
		<ul id="menu">
			<li> <a   href="accueil.html"> Accueil &#x25be;</a>
				<ul>
					<li><a href="dates.html" > Historique / Dates clés </a></li>
					<li><a href="valeurs.html" > Valeurs </a></li>
	
			</li>	
				</ul>	
					<li><a href=#> Activités &#x25be;</a>
						<ul>
							<li><a href="travauxPub.html"> Terrassement </a></li>
							<li><a href="assainissement.html" > Assainissement </a></li>
							<li><a href="transport.html" > Transport </a></li>
							<li><a href="location.html" > Location </a></li>
						</ul>
					</li>
						
					<li><a href=#> Ressources &#x25be; </a>
						<ul>
							<li><a href="humaines.html" > Organigramme </a></li>
							<li><a href="materiel.html" > Parc Matériel </a></li>
						</ul>
					</li>

					<li><a style="margin-top: 5%;" href="contact.html"> Contact </a></li>
		</ul>	
	</nav>	
		
		

			<div id="content-slider2">
					<div id="slider2">
						<div id="conteneur2" >
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP1.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP2.jpg" alt="Cougar"  width="130"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP3.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP4.jpg" alt="Cougar"  width="130"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP5.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP6.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP7.jpg" alt="Cougar"  width="130"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP8.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP9.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP10.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP11.jpg" alt="Cougar" width="130" /></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP12.jpg" alt="Cougar"  width="130" height="98"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP13.jpg" alt="Cougar"  width="130"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP14.jpg" alt="Cougar"  width="130"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead"src="images/EnginsTP/TP15.jpg" alt="Cougar"  width="130"/></div>
										<div class="rotateInDownLeft"><img class="ImgHead" src="images/EnginsTP/TP5.jpg" alt="Cougar" width="130" /></div>
							
						</div>		
					</div>
			</div>	  

	
		

		<div class="fadeInLeft"  > 
			<h4 class="TitreAcc"> Bienvenue sur le site de TTPM </h4>
		</div>
		
<br />
	
		
<!-- BLOC GAUCHE -->
		
	<div class="Bloc1" id="screen">

				<div   >  
				
					<iframe class="FB" src="https://www.facebook.com/v2.6/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df1101ee9e4d207a%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%252Ffb8567e6643fba%26relation%3Dparent.parent&amp;container_width=270&amp;height=300&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FTTPM-595834283779124%2F%3Ffref%3Dts&amp;locale=fr_FR&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false&amp;tabs=timeline&amp;width=250"  title="fb:page Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f1876bd3933401a" frameborder="0" height="300px" width="250px"  ></iframe>
				
				</div>
			
				<div class="Projets" >
<br />
						<center><h4 class="Ref0"> PROJETS PROFESSIONELS ET PARTICULIERS </h4> </center>
						<p class="Ref1"> Vous pouvez ainsi observer nos activités : <br /> <br />
						<a class="Ref2" href="travauxPub.html"> &rsaquo; De Terrassement </a><br /> 
						<a class="Ref2" href="assainissement.html"> &rsaquo; D'assainissement </a><br /> 
						<a class="Ref2" href="transport.html"> &rsaquo; De Transport </a><br /> 
						<a class="Ref2" href="location.html"> &rsaquo; Et de Location </a><br /> 
						</p>
		
				</div>	
	</div>


<!-- CONTENANT -->	

 
	<div class="Bloc2" >
			
				<p class="texte"> La société T.T.P.M. (Transports Travaux Publics Marchois) forte de 40 ans 
					d'expérience<br /> dans les activités de :</p>
						
						<ul>
						  <li class="LiB2" ><a class="aB2" href="travauxPub.html" >les travaux publics</a></li>
						  <li class="LiB2" ><a class="aB2" href="transport.html" >le transport routier de marchandises </a></li>
						  <li class="LiB2" >et <a class="aB2" href="location.html" >la location de matériels</a></li> 
						</ul>
						
				<p class="texte" >Engagée depuis sa création dans une démarche <a class="QualEnv" href="valeurs.html#ancre1" > qualitative</a> et  <a class="QualEnv" href="valeurs.html#ancre2" >environnementale</a>, 
					passant par un personnel engagé et polyvalent, des investissements matériels adaptés et fiables.</p><br/> <br/>
	

					<img class="GdImg" src="images/pouzzolane.jpg" width="400" /> 
					
						<div class="ImgPres" >
							<a id="exemple2" href="images/convoi.jpg" title=" Convoi " >
							   <img alt=" Convoi " src="images/convoi.jpg" width="150" /></a>
							   
							<a id="exemple2" href="images/batiment.jpg" title=" Local " >
							   <img alt=" Local " src="images/batiment.jpg" width="150" /></a>
							  
							<a id="exemple2" href="images/atelier.jpg" title="Atelier" >
							   <img  alt=" Atelier " src="images/atelier.jpg" width="150" /></a>
						</div>
				
				
			
	</div>
		

<!-- BLOC DROITE -->	
			
	<div class="Bloc3Acc"  >	
	

				<p class="texteB3"> <strong> TTPM SAS </strong><br />
																		Z.I LE MONT <br />
																		23200 Aubusson 
				</p>
				
				<p class="texteB3" >
						<font style="font-weight:bold;">&#9742; Téléphone : </font> 05-55-66-10-97 <br /><br />
						<font style="font-weight:bold;">&#128224; Fax :</font> 05-55-66-34-58<br /><br />
						<font style="font-weight:bold;">&#9993; Mail :</font> contact@ttpm23.com
				</p>
				

	</div>
		 
		  
 
<!-- PIED DE PAGE -->		
	
	<footer >
	
		Copyright TTPM Aubusson
		<a href="mentions.php"> Mentions légales </a>

	</footer>



</body>

</html>


CSS : 

body {
	width:100%;
	background-color:white;
	height: 1000px;
    padding: 0;
    margin: 0;
	min-height: 100%;
}

.header {
	width: 100%;
	position: relative;
	height: auto;
	margin-top: 3%;
	background-color: #249B32;
	
}

/* LOGO*/

.logo {
	margin-top: 2%;
	margin-left: 5%;
}

/*FIN*/

/* MENU NAVIGATION */ 

 nav {
	width:100%;
	margin-top:-10%;
	
 }
 
 ul {
	text-align: left;
 }

#menu, #menu ul {
    padding: 0;
margin-top: 4%;
list-style: none;
text-align: center;
margin-left: 30%;

}

#menu li {
    display: inline-block;
	position: relative;
	vertical-align: top;
	width: 18%;
	font-size: 16px;
	left: 1%;
}

#menu li li {
	width: 100%;
	height: 30px;
	line-height: 5%;
	margin-top: 8%;
	display: inline-block;
	margin-bottom: -5px;
}

#menu ul {
    overflow: hidden;
	max-height: 0;
	position: absolute;
	opacity: 0;
	background: #F8A547;
	text-align: left;
	width: 83.5%;
	margin-top: -4%;
	background-image: url(images/menu.png);
	background-repeat: no-repeat;
	width: 95%;
	border-radius: 4%;
	z-index: 1;
	margin-left: 8%;
}

#menu li:hover ul {
    transition: opacity 1.5s;
	opacity: 1;
	max-height: 15em;

}

#menu li li:hover {
   background-color: RGBA(188, 78, 18, 0.6);
	max-height: 15em;

}

#menu li a {
   display: inline-block;
	font-family: arial;
	text-decoration: none;
	padding: 20px 8px;
	background: RGBA(51, 51, 51, 0);
	color: green;
	margin-top: 3%;
	
}

#menu li li a {
	color:white;
	padding: 6px 10px;
	width: 100%;
	font-size:15px;
	
}

/*BARRE IMAGE */

#content-slider2 {
    height: 335px;
    width: 100%;
	border-radius: 10px;
	z-index:-10;

}

#slider2 {
	height: 200px;
	margin: 10px auto;
	overflow: visible;
	position: relative;
	width: 80%;
	border-radius: 10px;
	margin-top: 5%;
	z-index: -1;
}

#conteneur2 {
	 display: flex;
    flex-direction: row;
	 flex-wrap: wrap;
}

/*HEADER*/
.ImgHead {
	
	border-radius:5%;
}

 .rotateInDownLeft {
	 
	 
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rotateInDownLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes rotateInDownLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  } 

/*Fin*/


/* APPARITION TITRE */

.fadeInLeft {
		
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
 } 
	 
 
  
 /*FIN*/

.TitreAcc {
		margin-left: 31%;
		-webkit-transform: scaleY(2);
		-moz-transform: scaleY(1.4);
		-o-transform: scaleY(2);
		color: rgb(67, 155, 22);
		font-family: Georgia;
		font-size:20px;
		margin-top:-5%;
		letter-spacing:0.3em;
	}

.TitreVal {
		margin-left: 43%;
		-webkit-transform: scaleY(2);
		-moz-transform: scaleY(1.4);
		-o-transform: scaleY(2);
		color: rgb(67, 155, 22);
		font-family: Georgia;
		font-size:20px;
		margin-top:-5%;
		letter-spacing:0.3em;
	}

.TitreHist {
		margin-left: 35%;
		-webkit-transform: scaleY(2);
		-moz-transform: scaleY(1.4);
		-o-transform: scaleY(2);
		color: rgb(67, 155, 22);
		font-family: Georgia;
		font-size:20px;
		margin-top:-5%;
		letter-spacing:0.3em;
	}
	
.TitreActvt {
		margin-left: 40%;
		-webkit-transform: scaleY(2);
		-moz-transform: scaleY(1.4);
		-o-transform: scaleY(2);
		color: rgb(67, 155, 22);
		font-family: Georgia;
		font-size:20px;
		margin-top:-5%;
		letter-spacing:0.3em;
	}
	
	
	
	

/* 3 PARTIES */

.Bloc1{
	
	float: left;
	width: 18.5%;
	height: 400px;
	margin-top:4%;
	margin-left:1%;
	
}

	.Projets {
		background-color:rgba(255, 158, 64, 0.8);
		border-radius : 5%;
		margin-top: 20%;
		height:60%;
	}
	
	.FB {
		border-radius:5%;
	}

	
.Bloc2 {
	margin-left: 25%;
	margin-top: 5%;
	margin-right: 25%;
	height: 60%;
}

	.texte {
		text-align: center;
		color: rgb(192, 99, 31);
	}
	
	.LiB2 {
		color: rgb(182, 53, 18);
		margin-left: 45%;
		
		
	}
	
	.aB2 {
		color:rgb(182, 53, 18);
	}
	
	.GdImg {
		margin-left:10%;
		margin-top:2%;
		border-radius:2%;
		
	}
	
	.ImgPres {
		margin-left: 70%;
		margin-top: -34%;
		border-radius:2%;
	}
	
	.QualEnv {
		color : green;
		text-decoration:none;
	}
	
	.Ref0 {
		text-align:center;
		margin-top:-1%;
		
	}
	
	.Ref1 {
		text-decoration:none;
		text-align:center;
		
	}
	
	.Ref2 {
		text-decoration:none;
		text-align:center;
		color:green;
	}
	
	.texteTransp {
		color: rgb(192, 99, 31); 
		margin-left: 2%; 
		margin-right: 5%; 
		margin-top: 6%
	}
	
	.Convoi {
		
		border-radius: 5%; 
		margin-left: 15%;
		margin-top: 1%;
	}
	
	.contacter {
		color:green;
		font-size:16px;
	}
	
	
	
	
.Bloc2Val {
	margin-left: 25%;
	margin-top: 6%;
	margin-right: 25%;
	height: 120%;
}
	
	.ISO {
		margin-left: 85%;
		margin-top: -14%;
	}
	
	.Texte1 {
		color: rgb(192, 99, 31); 
		margin-top: -6%;
	}
	
	.Texte2 {
		color: rgb(192, 99, 31); 
		margin-top: -7%;
	}
	
.Bloc2Trav {
	margin-left: 25%;
	margin-top: 6%;
	margin-right: 25%;
	height: 100%;
}

.Bloc2Ass{
	margin-left: 25%;
	margin-top: 7%;
	margin-right: 25%;
	height: 85%;
	
}

.Bloc2Transp{
	margin-left: 25%;
	margin-top: 7%;
	margin-right: 25%;
	height: 80%;
	
}

.Bloc2Loc{
	margin-left: 25%;
	margin-top: 7%;
	margin-right: 25%;
	height: 50%;
	
}

.Bloc2Mat {
	margin-left: 25%;
	margin-top: 7%;
	margin-right: 25%;
	height: 170%;
}




.Bloc3Acc {
	float: right;
	width: 18.5%;
	height: 22%;
	margin-top: -43.5%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}

.Bloc3Dates {
	float: right;
	width: 18.5%;
	height: 22%;
	margin-top: -43.5%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}

	.texteB3 {
				text-align:center;
			}
			
.Bloc3Val {
	float: right;
	width: 18.5%;
	height: 23%;
	margin-top: -84%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}

.Bloc3Trav {
	float: right;
	width: 18.5%;
	height: 20%;
	margin-top: -71%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}
		
.Bloc3Ass {
	float: right;
	width: 18.5%;
	height: 23%;
	margin-top: -66%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}

		
.Bloc3Transp {
	float: right;
	width: 18.5%;
	height: 23%;
	margin-top: -62%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}

.Bloc3Loc {
	float: right;
	width: 18.5%;
	height: 23%;
	margin-top: -40%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}

		

.Bloc3Mat {
	float: right;
	width: 18.5%;
	height: 20%;
	margin-top: -118.5%;
	background-color:rgba(255, 158, 64, 0.8);
	border-radius:5%;
	margin-right:1%;
}


.BlocContact {
	margin-left: 25%;
	margin-top: 5%;
}
/* FIN */

footer{
	background-color: #43a94f;
	color: white;
	text-align: center;
	height: 50px;
	line-height: 2;
	margin-top:0%;

}


.contact {
	margin-top: -20%;
	margin-left: %;
	background-color: rgba(249, 97, 0, 0.83);
	border-radius: 3%;
	margin-right: 65%;
	font-size: 14px;
	float: right;
	width: 33%;
	line-height: 1.6;
}

.logo img {
	border-radius : 2%;
}

/* FORMULAIRE CONTACT */

fieldset
{
    border:2px solid green;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;	
}


input[type="text"]{
	height: 20px;
width: 200px;
font-size: 11px;
margin-left: 20px;
font-family: Verdana;
}

/* FIN */

/* GALERIE IMAGES */

.Galerie {
	background-color: white;
	padding: 4px;
	border-radius: 10%;
	margin-left:5%;
	margin-top: 2%;
}


Merci, et bonne soirée ! Smiley lol
Modérateur
Bonsoir Melgrn,

melgrn a écrit :
Alors je voudrais savoir comment il fallait que je fasse pour que cette div ne bouge plus ? Smiley confused
Un collier et une laisse auto-blocante ! Smiley lol :-P
Désolé, je n'ai pus m'empêcher. Mais je te rassure nous n'avons pas ouvert un concours de blague

Avant tout chose, il y a un truc qui me choque.

Tu déclare ta page html comme ayant un doctype html5
<!DOCTYPE html>

T'es d'accord ?

Alors explique-moi ce que ça fait là ça ?
<center>

et ça ?
<font style="font-weight:bold;">
Et sûrement d'autres mais je suis fatigué.

Ne réponds pas. Je sais que c'est parce que tu es nostalgique du html 4 et que l'usage de balises dépréciées est pour toi un sport. Smiley cligne

Par une lecture en diagonale, je m'aperçois que tu utilise beaucoup d'émargements exprimés en pourcentage. A mon avis tu as un problème de positionnement à ce niveau. Arrivé à une certaine résolution tes pourcentages doivent probablement renvoyer à une valeur +/- grande qui fait bouger tes blocs.

Essaie sans marge en jouant avec la taille de ta fenêtre et applique tes marges bloc/bloc. Je pense qu'en ça, tu trouveras ton salut.

Bonne soirée.

Edit : J'ai faillis oublier. Ne pense pas échapper à l'utilisation des requêtes sur le média (media-queries). Dans la section "Apprendre" il y a de quoi te mettre le pied à l'étrier.
Modifié par Greg_Lumiere (29 Jun 2016 - 21:21)
Aha j'attendais cette remarque Smiley biggrin

Merci pour tes conseils... Mais, comment ça marge bloc ? J'ai pas très bien compris..
Modérateur
Greg_Lumiere a écrit :

Ne réponds pas. Je sais que c'est parce que tu es nostalgique du html 4 et que l'usage de balises dépréciées est pour toi un sport. Smiley cligne

HTML 3, pour être tatillon. Et le status actuel est obsolète, C'était déprécié en HTML 4 Smiley smile

@melgrn
Je confirme il y a bien des problèmes avec les marges. Tu utilises sur ce bloc une marge négative supérieure de -43%. Seulement les marges en pourcentage sont relative à la largeur du parent. Ce qui fait que plus la fenêtre se réduit, plus la marge négative se réduit, ce qui fait descendre l'élément.

De manière générale, le placement des éléments est catastrophique, une marge négative pareille est le signe avant-coureur d'une mise en page mal maîtrisée Smiley smile . Il faut absolument revoir les bases (section apprendre ici déjà nommée) et reprendre ton travail pas à pas. Avec ce que tu as là, on ne peut rien faire pour corriger les multiples problèmes de mise en page. Je force un peu le trait peut-être, si tu ne souhaites que gérer ce problème précis renseigne toi sur les mise en page en 3 colonnes et les manières de le gérer (ordre chronologique: float / display: table / display: flex)
Sujet clos
Aller à