Discussion :

[granulederiz]

Bonjour à tous!
je viens ici pour bénéficier de vos lumières car là, j'avoue, je sèche!

je suis en train de développer mon site et voila mon problème:

sous Firefox, quand je met une bordure à une de mes div, celle du dessous se place directement collée à celle ci (ce que je veux). Or, si je retire dans mon css ma bordure, hop, je ne sais pas pourquoi, ma div du dessous (le contenu) est décalée de 2 fois la hauteur de ma div du haut. ex: div du haut, hauteur:300 px. avec bordure pas de souci. Si pas de bordure, ma div "contenu" est décalée de 300px vers le bas par rapport à ma div du haut.

Voici en image en PJ : la première c'est avec bordure, la deuxième sans bordure.

voici mon code HTML (avec du php car pour wordpress):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<?php get_header(); ?> <!-- ouvrir header,php -->
 
<div id="global"><!--partie 2 du site-->
 
 
<div id="elements-du-header">
	<div id="haut-sidebar"></div>	
</div>
 
 
<div id="corps">
 
	<div id="centre">
 
		<div id="principal">
			<?php if(have_posts()) : ?><?php while(have_posts()) : the_post();?>
 
 
			<div class= "post" id="post-<?php the_ID(); ?>"><!-- à partir du "id="post" c'est une fonction pour donner un ID a chaque post-->
 
                                  <div class="titre-article"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><!--titre de l'article--></div>
 
			<div class="post_content">
				<div class="vignette">
 
					<?php
    if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
    the_post_thumbnail(array( 152,152 ), array( 'alt' => 'alttext', 'title' => '<?php the_title(); ?>'));
} else {
    echo '<img src="http://www.granulo-production.fr/wp-content/uploads/2010/06/sans.jpg" alt="mettre image en ligne" title="image" />'; }
 
?>
				</div>
 
			<div class="extrait">
				<?php the_excerpt('Lire la suite &raquo;'); ?>
			</div>
 
			</div><!-- ferme balise "post-content"-->
 
			<div class="postmetadata">
				Posté par <?php the_author() ?> <span class="tirets">|</span> Cat&eacute;gorie: <?php the_category(', ') ?><span class="tirets">|</span><?php edit_post_link('Edit'); ?> <div class="commentaires"><?php comments_popup_link('0', '1', '%'); ?></div>
			</div><!-- ferme la class postmetadata-->
 
 
			</div><!-- ferme balise "post"-->
			<div class="separation" id="separation"></div>
 
 
 
			<?php endwhile; ?>
 
	<div id="page-navigation">
	<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>  
	</div><!--ferme balise "page-navigation"-->
 
	<?php edit_post_link('Modifier cette page', '<p>', '</p>'); ?>
 
	<?php else : ?>
		<h2>Oooopppsss...</h2>
		<p>désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .</p>
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>
 
	<?php endif; ?>
 
		</div><!-- #principal -->
<?php get_sidebar(); ?><!--on apelle la SIDEBAR-->
 
 
	</div><!-- #centre -->
 
</div>
 
</div><!-- ferme global-->
 
	<?php get_footer(); ?><!-- on apelle le footer sous la sidebar-->

Puis mon CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
html{
margin:0;
padding:0;}
 
body {
 
background: url(img/body-bg3.jpg) repeat;
	margin-left:auto;
	margin-right:auto;
	padding: 0px 5px;
	width:1200px;
 
}
 
 
/* conteneur général a site*/
#global {
 
margin-left:auto;
margin-right:auto;
	width: 1024px;
	background: url(img/body-bg3.jpg) repeat;
	background-attachment:fixed;
 
}
 
#elements-du-header{
height:355px;
width:1024px;
 
 
}
 
 
#haut-sidebar{
 
width:371px;
height:	116px;
background:url(img/envoyez1.jpg) no-repeat;
margin-top:239px;
margin-left:604px;
border:1px dotted yellow;
 
}
 
 
	#corps{
background:url(img/bgcentre1.jpg) repeat;
border-top:1px solid grey;
	width:1024px;
margin-top:none;
	}

j'ai pas mis toute ma CSS mais juste les div concernée.

La div ou j'applique la bordure est la "elements-du-header" et celle qui est décalée est la "corps".

Si vous avez besoin de renseignements, dites moi, et encore merci à tous ceux qui voudront bien m'aider!

[granulederiz]

j'ai vu qu'il fallait mettre un "display:inline" sur la div en question.

je sais même pas pourquoi.... mais le principal c'est que ca marche!

[Erwan31]

Mieux vaut chercher à comprendre le problème que de l'éviter par n'importe quel moyen, c'est en rapport avec le phénomène de fusion des marges.