28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de décalage vertical quand je supprime CSS Thickbox

Bonjour à tous.

Je me suis créé quelques modèles de sites que je personnalise ensuite (dimensions, couleurs...). À l'époque, j'utilisais Thickbox et j'avais incorporé la CSS Thickbox dans ma feuille de style principale. Or j'utilise maintenant Fancybox donc je n'ai plus l'utilité de la CSS Thickbox.

Mais quand je supprime cette CSS, je constate un décalage vertical dans mes DIV. Dans un container, j'ai un header, une DIV gauche, une DIV droite et un footer. Dans les DIV gauche et droite j'ai une DIV pour l'arrondi du dessus, une DIV centrale et une DIV d'arrondi du bas. Ça me permet de faire des extrémités ornementales au lieu d'un simple border-radius.

Vous pouvez voir un brouillon ici : http://balsamomagicien.free.fr/NEW Quand je supprime les ligne Thickbox dans ma feuille de style, j'obtiens ceci : http://balsamomagicien.free.fr/NEW/indextest.php Il y a un espace vertical entre les DIV menuhaut, menucontenu et menubas, ainsi qu'entre les DIV textehaut et textecontenu. Étrangement, il n'y en a pas pour la div textebas. De plus, la DIV textecontenu ne respecte plus la line-height de 22 px.

Je vous copie ici la CSS avec les ligne Thickbox (donc affichage correct) et le code HTML :

HTML, BODY {
	margin:0px;
	padding:0px;
    background: #FFFFFF;
	height:100%;
}


#container {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}

#header {
	height: 154px;
	text-align: center;
	background-image: url(images/header.png);
}

#lignehaut {
	height: 38px;
	width:1000px;
}

#gauche {
	float: left;
	width: 270px;
	padding-top:0px;
}

#droite {
	margin-left: 270px;
	padding-top:0px;
}

#menuhaut {
	height: 72px;
	width:270px;
	background-image:url(images/menuhaut2.png);
	background-repeat:no-repeat;
}

#menucontenu {
	width:270px;
background-image:url(images/menufond.png);
background-repeat:repeat-y;
}

#menubas {
	height: 38px;
	width:270px;
	background-image:url(images/menubas.png);
	background-repeat:no-repeat;
}

#textehaut {
	height: 38px;
	width:730px;
	background-image:url(images/textehaut.png);
	background-repeat:no-repeat;
}
#textecontenu {

width:730px;
background-image:url(images/textefond.png);
background-repeat:repeat-y;
}


#textebas {
	height: 38px;
	width:730px;
	background-image:url(images/textebas.png);
	background-repeat:no-repeat;
}


#footer {
clear: both;
margin: 0;
height: 50px;
width: 1000px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	font-size: 10px;
	line-height: 12px;
color: #464646;
background-image: url(images/footer.png);
}



#footercentre {
float:left;
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: FFFFFF;
font-family: "Arial", Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
}

#footercentre a:link {
	text-decoration: none;
	color:#FFFFFF;
		text-align: center;
}
#footercentre a:hover {
	text-decoration: none;
	color:#FFFFFF;
		text-align: center;
}

#footercentre a:visited {
	color:#FFFFFF;
	text-decoration: none;
		text-align: center;
}
#footercentre a:visited:hover {
	text-decoration: none;
	color:#FFFFFF;
		text-align: center;
}


#footermagicienmagie {
width: 1000px;
padding-top: 6px;
text-align: center;
	font-family: "Arial", Arial, Helvetica, sans-serif;
	color:#b03645;
	font-size: 8px;
	line-height: 16px;
}

#footermagicienmagie a:link {
	text-decoration: none;
	color:#b03645;
		text-align: center;
}
#footermagicienmagie a:hover {
	text-decoration: none;
	color:#b03645;
		text-align: center;
}

#footermagicienmagie a:visited {
	color:#b03645;
	text-decoration: none;
		text-align: center;
}
#footermagiemagicien a:visited:hover {
	text-decoration: none;
	color:#b03645;
		text-align: center;
}

#centragetexte {
width: 730px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.footer {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	font-size: 10px;
	line-height: 12px;
	color: #FFFFFF;
}


.styletexte {
	font-family: "Arial", Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: justify;
	font-size: 14px;
	line-height: 26px;
	padding-right: 10px;
	padding-left: 20px;
}

.stylemenu{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: justify;
	font-size: 14px;
	font-weight:bold;
	line-height: 22px;
	padding-right: 10px;
	padding-left: 10px;
}

.floatleft{
float: left;
margin-right: 6px;
}
.floatright{
float: right;
margin-left: 6px;
}

.centrage {
margin-left: auto;
margin-right: auto;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---- global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{
	text-align: justify;
	margin: 0px;
	padding: 0;
	z-index: 0;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---- thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---- thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Magicien Besan&ccedil;on Magicien Doubs Magicien Franche-Comt&eacute; - Accueil</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="BALSAMO MAGICIEN - Magie en close-up pour l'événementiel et les fêtes privées. Balsamo vous propose d’utiliser la magie pour animer et promouvoir vos événements professionnels et commerciaux ainsi que vos fêtes privées.">
<meta name="Keywords" lang="fr" content="Balsamo, magicien, prestidigitateur, illusionniste, cartomane, magie, evenementiel, animation artistique, besançon, franche-comté, doubs, illusionnisme, prestidigitation, cartomagie, illusion, close-up, closeup, close up, intermittent, spectacle, animateur, magique, artiste">
<meta name="Identifier-url" content="http://balsamomagicien.free.fr">
<meta name= "author" content= "BALSAMO MAGICIEN">
<meta name="Publisher" content="BALSAMO MAGICIEN">
<meta name="geography" content= "Besancon, France, 25000">
<meta name="rating" content= "general">
<meta http-equiv="content-language" content="fr">

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="bgstretcher.css" />


<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="bgstretcher.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
	
        //  Initialize Backgound Stretcher	   
		$('BODY').bgStretcher({
			images: ['images/fond-1.jpg', 'images/fond-2.jpg', 'images/fond-3.jpg', 'images/fond-4.jpg', 'images/fond-5.jpg', 'images/fond-6.jpg'],
			imageWidth: 1024, 
			imageHeight: 768, 
			slideDirection: 'N',
			slideShowSpeed: 1000,
			transitionEffect: 'fade',
			sequenceMode: 'normal',
			buttonPrev: '#prev',
			buttonNext: '#next',
			pagination: '#nav',
			anchoring: 'left center',
			anchoringImg: 'left center'
		});
		
	});
</script>



<title>Magicien Besan&ccedil;on Magicien Doubs Magicien Franche-Comt&eacute; - Accueil</title></head>
<body>
<div id="container">
	<!-- La DIV container contient TOUT -->
   <div id="header"></div>

	<div id="gauche">
	<div id="menuhaut"></div> <!-- DIV menuhaut -->
<div id="menucontenu">
	      <p class="stylemenu">accueil</p>
	      <p class="stylemenu">close-up pour les professionnels</p>
	      <p class="stylemenu"> close-up pour les particuliers</p>
	      <p class="stylemenu">biographie</p>
	      <p class="stylemenu">r&eacute;f&eacute;rences</p>
	      <p class="stylemenu">revue de presse</p>
	      <p class="stylemenu">contact</p>
	      <p class="stylemenu">liens</p>
	      <p class="stylemenu">&nbsp;</p>
	      <p class="stylemenu"><img src="images/accueil.jpg" width="250" height="250" /></p>
</div>
		<div id="menubas"></div> <!-- DIV menubas --> 
	</div> <!-- DIV gauche -->
	<div id="droite">
		<div id="textehaut"></div> <!-- DIV textehaut -->
	  <div id="textecontenu">
	  <p class="styletexte"><img src="images/enluminure1.png" width="200" height="150" class="floatleft" />	  <p class="styletexte">&nbsp;</p>
	  <p class="styletexte">Plein de texte ici, il faut plusieurs lignes pour que le problème de décalage apparaisse, si une seule ligne il n'y a pas de décalage vertical.</p>
	  <p class="styletexte">&nbsp;</p>
	  <p class="styletexte">Remplissage pour être sûr d'avoir au moins deux lignes.</p>
	  <p class="styletexte">&nbsp;</p>
	  
	  <div id="centragetexte"><img src="images/findepage.png" width="157" height="44" /></div> <!-- DIV centragetexte -->
	  </div> <!-- DIV textecontenu -->
	<div id="textebas"></div> <!-- DIV textebas -->
  </div> <!-- DIV droite -->
  <div id="footer">
  <div id="footermagicienmagie"><a href="http://www.magicien-magie.com" target="_blank">magicien-magie.com</a></div> <!-- DIV footermagicienmagie -->
   <div class="footer" id="footercentre">
     <p class="footer"><a href="http://deniscostille.free.fr/webmaster" target="_blank">Conception et r&eacute;alisation : Denis Costille</a> - <a href="credits.php">Cr&eacute;dits photographiques</a> - <a href="mentionslegales.php">Mentions l&eacute;gales</a></p>
    </div> <!-- DIV footercentre -->
</div>  <!-- DIV footer -->
</div> <!-- DIV container -->
     </body>
</html>


Comme il ne s'agit que d'un brouillon il manque plein de choses, mais c'est aussi bien pour cerner plus facilement le problème.

Si l'un d'entre vous avait la gentillesse de m'expliquer la source du problème, ce serait génial. Merci beaucoup. Smiley smile
Modifié par themadwizard (01 Apr 2013 - 18:42)
Bon, j'ai trouvé la solution :

1/ supprimer mes paddings de mes styles menu et texte et les mettre dans les div menucontenu et textecontenu (en diminuant bien sûr leur largeur en conséquence);

2/ au lieu d'avoir des : 

<p class="styletexte">paragraphe 1 </p><p class"styletexte">paragraphe 2</p>


je fais : 
<span class="styletexte">paragraphe 1<br /><br />paragraphe 2</span>


et je n'ai plus aucun décalage vertical maintenant, et la line-height est respectée. Smiley smile
Modifié par themadwizard (07 Apr 2013 - 12:19)
Sujet clos
Aller à