Espace entre un titre et un div ?

Bonjour,

Ca fait deja 30min que je cherche comment espacer un h2 et un div tout deux contenu ds un div "contenu" (oui j'ai lu les tutoriels alsacréations =)

J'ai tenté du des margin, du paddings et en desespoir de cause du <br> ds le html, rien n'y fait...

Tant que j'y suis sur la mm page, les photos étaient au départ alignées deux par deux, et sans que j'ai touché à quoique ce soit tant au niveau du css que du html, elles se retrouvent aujourd'hui à une par ligne...

Bref, si une bonne ame veut se pencher sur ce code pour éclaircir un peu ma lanterne ce serait bien urbain. Je crois qu'a force d'avoir le nez dans le guidon je me mélange un peu les rayons...

Voila le lien de la page en question:

http://www.cyberbreizh.com/wip/hdf/ballade.html

et le css qui l'accompagne:

body {	
	margin: 0 ;
	padding: 0 ;
	text-align: justify ;
	font: small, arial, helvetica, sans-serif ;
	background: #669966;
	

	}

div#conteneur
	{	
		width: 738px;
		margin: 0 auto ;
		background: #003399;
		text-align:center;
		
		
	}


h1#header
	{
		height: 243px ;
		background: red;
		padding: 0;
				
	}

h1#header a
	{
		width: 735px ;
		height: 243px ;
		border-color: white;
		border-style: solid;
		display: block ;
		background: url(pix/logo.gif) no-repeat ;
		position: absolute;
			margin-left: -371px;
			left:50%;
		
		text-indent: -5000px;
	}


#nav {
				list-style: none;
				margin-top: 10;
				text-align: center;
					
				
				}

			#nav li {
				display: inline ;
				margin-right: 1px;
				color: #fff ;
				background: #003399;
				}

			#nav li a {
				background: #003399;
				color: #fff ;
				border: 2px solid white;
				font: 1em "Trebuchet MS",Arial,sans-serif;
				line-height: 1em;
				padding: 2px 35px;
				text-decoration: none;
	
				}
			#nav li a:hover, #nav li a:focus, #nav li a:active {
				background: white ;
				color: #003399;
				text-decoration: underline;
				
				}
		

#flag {
	text-decoration: none;
	text-align: left;      }
	
	#flag img {border: none;}

	

		

			
#contenu {
		text-align: justify;
		font: 1.1em;
		background: #003399;
		color: white;
		margin: 0px;
		font-size: 1em;
		padding: 30px;
		border: solid 3px white; 
		

		}

#contenu h2 { 

	text-align: left; 
	margin: 0;
	font-size: 1.1em;
	font-weight: bold;
	margin: 10px;
	
	
	}
	

#coord a {

		
		color: white;
		font-weight: bold;

	}

		

#tof_pano {

		width: 680;
		height: 170;
		padding-top: 20px;
		
		

		}

#tof_gauche {
		text-align: left;
		margin-top: 20;
		margin-bottom: 20;	
		}

#tof_droite {

		
		text-align: right;
		margin-top: 20;
		margin-bottom: 20;	

		}
		
#tof_ballade {	
		text-align: center;
		
			
		}
#footer a {

		text-decoration: none;
		color: white;
		font-weight: bold

	}

Modifié par xis (08 Jun 2007 - 16:57)

Salut,

Regarde un peu ce lien:

Lien

Je pense que c'est du à un problème de fusion des marges.

Je remarque aussi que tu aurais oublié des mesures en pixel:

#nav {
				list-style: none;
				margin-top: 10[#red]px?[/#];
				text-align: center;
				}
#tof_pano {
		width: 680[#red]px?[/#];
		height: 170[#red]px?[/#];
		padding-top: 20px;
		}
#tof_gauche {
		text-align: left;
		margin-top: 20[#red]px?[/#];
		margin-bottom: 20[#red]px?[/#];	
		}
#tof_droite {
		text-align: right;
		margin-top: 20[#red]px?[/#];
		margin-bottom: 20[#red]px?[/#];	
		}

Modifié par Oryo (08 Jun 2007 - 17:27)

Tu parle du titre "Ballades en Cornouailles..." et de la div tof_gauche?

Il me semble que ca fonctionne en modifiant les marges de #contenu h2 (que tu as déclaré à 10px).

Merci à tous les deux

Nicolas: c'est ce que j'avais déjà essayé, avant que Oryo me rappelle ce pb de fusion des marges

Oryo: ton idée m'a parue séduisante sur le coup, mais s'il s'agissait d'un pb de fusion de marge ce serait entre l'élément parent div="contenu" et les class="tof_ballade".
Or une des solutions pour éviter la fusion des marges est d'appliquer un border à l'élément parent ce qui est deja le cas =).

Ca se voit mieux avec des couleurs pour chaque élément de bloc:

http://www.cyberbreizh.com/wip/trucs/ballade.html

( Ya du mieux concernant le placements des photos ^^ )

Heu... et c'est quoi le résultat souhaité, au fait ?

Réduire l'écart entre les titres et les images ? L'augmenter ? Réduire l'écart avec le haut ? L'augmenter ?

Sinon, une erreur de syntaxe à corriger (un coup de validateur HTML l'aurait signalée...) :

<h2>Photos de quelques uns des sites visités:[#red]</h>[/#]

Pour le reste... c'est normal que les marges des h2 soient mises à zéro (et plutôt deux fois qu'une...) ?

#contenu h2 { 
	margin: 0;
	...
	margin: 0px;
}

Pourquoi mettre les marges à zéro si c'est pour être obligé de rajouter des <br> par la suite ?

Ça manque un petit peu de rigueur tout ça.