28173 sujets

CSS et mise en forme, CSS3

[résolu] Marge verticale non nulle (sous FF et IE)

Bonjour

Je suis désolé car je suis certain que ma question a due être posée déjà au moins 100 fois, mais ça fait 4 heures que je me prends la tête... alors je craque. Smiley bawling

Soient deux blocs div que je voudrais afficher "collés" l'un en dessous de l'autre.

Problème, malgré des margin et padding nuls, il subsiste un espace entre le premier bloc et le second.

J'ai appliqué la technique des bordure et j'ai ainsi pu identifier que cet espace appartenait au premier bloc div.

Si par contre je ne mets que les bordures verticales, alors celles-ci s'arrêtent pile poil au raz de la photo contenue dans le premier bloc div... mais alors le fameux espace apparait.

Voir les captures avec bordure D et G

upload/13114-avecbordur.jpg

Voici la mise en page du premier bloc
.entry-content
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
border: solid #FFFFFF;
border-width: 0px 1px 0px 1px;
}


Et celui du second:
.entry-footer
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 15px;
height: 30px;
line-height: 30px;
background: url(http://leblogautomobile.blogs.com/files/grand_bas_noir.gif) bottom left no-repeat;
color: #FFFFFF;
border: solid #FFFFFF;
border-width: 1px 1px 1px 1px;
}


Merci pour votre aide Smiley smile
Modifié par StephaneLeChat (05 Jul 2007 - 20:10)
Salut,

Sans une page en ligne, ou au minimum l'intégralité du code html et css, j'ai bien peur qu'il soit impossible de t'aider. Smiley cligne
Modifié par Mikachu (04 Jul 2007 - 21:54)
Bonjour et merci pour ta réponse Mikachu

Voici donc le gabarit en HTML:

<$MTInclude module="head-index"$>
<body>
<$MTWeblogIncludeModule module="body-header"$>
	<div id="conteneur">
	<$MTWeblogIncludeModule module="container-header"$>
			
		<div id="banniere"><img alt="LeBlogAutomobile" title="LeBlogAutomobile" src="http://leblogautomobile.blogs.com/LeBlogAutomobile/files/bannire_noire.jpg" border="0" height="124" width="627">
		</div>

		<div id="bloc_gauche">
	  		<div id="contenu_bloc_gauche">		

          			<!-- entries -->
	 			<MTEntries>
	 			<MTWeblogPostIfShow field="date_header">
	  			<MTDateHeader><h2 class="date-header"><$MTEntryDate format_weblog_date="1"$></h2></MTDateHeader>
	  			</MTWeblogPostIfShow>

				<div class="entry" id="entry-<$MTEntryID$>">
		      			<MTWeblogPostIfShow field="post_title">
					<h1 id="titre_note"><$MTEntryTitle$></h1>
                        		<div class="sous_lignage"></div>
		        		</MTWeblogPostIfShow>
			
					<div class="entry-content">
						<div class="entry-body">
						<$MTEntryBody$>
						</div>

						<MTEntryIfExtended>
						<p class="entry-more-link">
						<a href="<$MTEntryPermalink$>#more"><$MTTrans phrase="Continue reading"$> "<$MTEntryTitle$>" &raquo;</a>
						</p>
						</MTEntryIfExtended>
					</div>

                			<div class="entry-footer">Publié le <$MTEntryDate format="%e %B %Y"$> <MTEntryIfCategories> | <MTEntryCategories glue=", "><MTBlogIfArchives archive_type="Category"><a href="<$MTCategoryArchiveLink$>">Autres notes <$MTCategoryLabel$></a>
		       			<MTElse><$MTCategoryLabel$></MTElse>
		       			</MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">Permalien</a>
					<MTEntryIfAllowComments>
					| <a href="<$MTEntryPermalink$>#comments"><$MTTrans phrase="Comments"$> (<$MTEntryCommentCount$>)</a>
					</MTEntryIfAllowComments>
		        		</div>

				</div>
				</MTEntries>
          		</div>
		</div> 

		<div id="bloc_pub_300x250">
			<div id="pub_300x250">
			<img alt="Publicité" title="Publicité" src="http://leblogautomobile.blogs.com/LeBlogAutomobile/files/300x250.jpg" border="0" height="250" width="300">
			</div>
		</div>


		<div id="colonne_droite">
			<div id="contenu_colonne_droite">
			<!--#include virtual="/<$MTBlogDirname$>/sidebar2.inc"-->	
			</div>
		</div>

		<div id="colonne_gauche">
			<div id="contenu_colonne_gauche">
			<!--#include virtual="/<$MTBlogDirname$>/sidebar1.inc"-->	
			</div>
		</div>
	
		<div id="saut"></div>
		<div id="pied_de_page">Mention légale</div>
	
	</div>	  
</body>
</html>


Et voici la feuille de style:

a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:active { color: #FFFFFF; }
a:hover { color: #FFFFFF; }


#conteneur
{
width: 970px;
background-color: #101010;
margin-left: auto;
margin-right: auto;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/Fond_article.gif) 0 0 repeat-y;
}

#banniere
{
margin: 0;
/* width: 970px; */
line-height: 130px;               /* hauteur de ligne identique à hauteur du bloc pour centrer le texte verticalement */
height: 130px;
background-color: #101010;
color: #FFFFFF;
font-family: arial;
letter-spacing: .3em;
font-size: 48px;
font-weight: bold;
text-align: left;
padding-left: 15px;
}

#bloc_gauche
{
float: left;
width: 655px;
background-color:#101010;
}

#contenu_bloc_gauche {
margin-left: 10px;
margin-right: 5px;
margin-top: 00px;
margin-bottom: 0px;
}

#titre_note {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
font-family: arial;
letter-spacing: .1em;
font-size: 12px;
font-weight: bold;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/grande_entte_noire_haut.gif) 0 0 no-repeat;
}

h1 {
margin: 0;
padding: 0;
font-family: arial;
font-size: 12px;
text-align: left;
color: #FFFFFF;
}

.sous_lignage
{
margin: 0;
padding: 0;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/sous_ligne_titre_note.gif) 0 0 no-repeat;
line-height: 3px;
height: 3px;
}

.entry-content
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
border: solid #FFFFFF;
border-width: 0px 1px 0px 1px;
}

.entry-body
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
font-family: arial;
/* line-height: normal; */
text-align: left;
font-size: 12px;
background-color:#101010;
color: #FFFFFF;        /* était CCCCCC */
border: solid #686868;
border-width: 0px 1px 0px 1px;
}

.entry-footer
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 15px;
height: 30px;
line-height: 30px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/grand_bas_noir.gif) bottom left no-repeat;
color: #FFFFFF;
border: solid #FFFFFF;     /* pour technique des bordures uniquement */
border-width: 1px 1px 1px 1px; /* pour technique des bordures uniquement */
}


.entry-footer_inter
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 15px;
font-family: arial;
/* line-height: normal; */
font-size: 11px;
height: 30px;
line-height: 30px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) bottom left repeat-y;
color: #FFFFFF;
}

#bloc_pub_300x250
{
float: left;
width: 315px;
height: 270px;
background-color:#101010;
}

#pub_300x250
{
margin-top: 00px;
margin-left: 5px;
padding-top: 0px;
}

#colonne_droite {
float: right;
width: 135px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color:#101010;
}

#contenu_colonne_droite {
margin-left: 5px;
margin-right: 10px;
margin-top: 0px;
}

#pub_120x600 {
margin: 0px;
padding-top: 0px;
padding-right; 5px;
padding-bottom: 0px;
padding-left: 0px;
background-color:#101010;
}

#pub_120x600 li {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}

#colonne_gauche {
float: right;
width: 180px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color:#101010;
}

#contenu_colonne_gauche {
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
}

#entete_champ_Google
{
margin: 0px;
padding: 0px;
line-height: 39px;
height: 39px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_entete_google.gif) 0 0 no-repeat;
}

#contenu_champ_Google
{
margin: 0px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 15px;
border: solid #686868;
border-width: 0px 1px 0px 1px;    
background-color: #101010;
}

#bas_titre
{
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding: 0;
height: 10px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/bas_noire.gif) 0 0 no-repeat;
}

#entete_menu_notes
{
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
border-width: 1px 1px 1px 1px;
line-height: 39px;
height: 39px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/entte_noire.gif) 0 0 no-repeat;
font-family: arial;
letter-spacing: .3em;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#menu_notes,
#menu_marques
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
line-height: normal;
letter-spacing: .1em;
text-align: left;
font-size: 10px;
background-color:#101010;
}

ul#liste_notes,
ul#liste_marques
{
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px; 
background-color:#101010;
border: solid #686868;
border-width: 0px 1px 0px 1px;
}

#liste_notes li,
#liste_marques li
{
list-style-type: disc;
list-style-position: inside;
margin: 0px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 5px;
background-color:#101010;
color: #FFFFFF;
}

#entete_menu_marque
{
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
font-family: arial;
letter-spacing: .3em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;  
/* border: 1px solid #686868; */
line-height: 39px;               /* hauteur de ligne identique à hauteur du bloc pour centrer le texte verticalement */
height: 39px;
/* background: url(Fond_Une_4.gif) -6px 0 no-repeat;    décalage de -6 px à reporter sur la larguer de l'image côté droit */
background-color:#CBCBCB;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/entte_noire.gif) 0 0 no-repeat;
}

#saut
{
clear: both;
width: 970px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
height: 20px;
background-color: #101010;
}

#pied_de_page
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 970px;
background-color:#101010;
font-family: arial;
letter-spacing: .1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;  
line-height: 50px;
height: 50px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pied_de_page.gif) bottom left no-repeat;
}

.comments-open-header,
.comments-open-content,
.comments-open-moderated,
.comments-open-footer,
.comments-header,
.comment-content,
.comment-footer
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0 10px 0 10px;
color: #FFFFFF;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) 0 0 repeat-y;
}

.séparation
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0 10px 0 10px;
height: 1px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/sparation_640x1.gif) 0 0 repeat-y;
}

#pub468x60
{
margin: 0;
padding: 0 0 0 30px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) 0 0 repeat-y;
}


Je suppose évidemment que vous auriez trouvé tous seuls, mais le passage qui me pose problème concerne les CSS de
.entry-body et
.entry-footer

Si vous avez besoin de plus d'info, je suis à disposition.

PS: je sollicite l'indulgence pour les erreurs et autres maladresses, sûrement nombreuses, que vous allez déceler dans ce codage. Smiley confused
Modifié par StephaneLeChat (05 Jul 2007 - 15:47)
Bonjour à tous

Bon, j'ai continué à chercher et j'ai fini par trouver quelques erreurs. (style sur p en particulier) qui explique le problème pour lequel j'ai ouvert ce sujet.

Je sens que je suis proche du but pour les quelques défauts qui subsistent.

Bonne soirée.
Sujet clos
Aller à