28172 sujets

CSS et mise en forme, CSS3

Problème de marges?

Bonjour à tous,

Malgré la lecture approfondie de l'article sur la fusion des marges CSS, je n'ai pas trouvé de solution à mon problème.

Au sein d'une div comprenant une image en "float: left", le titre h5 s'affiche avec un margin-top qui vient de je ne sais où. J'aimerais que le titre h5 soit collé en haut de la div (c'est-à-dire aligné contre le haut de l'image).

Ca donne ça:
http://img41.imageshack.us/img41/2171/pbm01.jpg
(j'ai mis des bordures pour y voir plus clair)

http://img41.imageshack.us/img41/4034/pbm02.jpg
Le surlignement de FireBug. A quoi correspond cette zone jaune?


Le code HTML est le suivant:


<div class="vmin"> <span><a href=#><img src="../images/video-square.png" alt="vidéo 1" /></a>
        <h5>Titre 1</h5>
        <h6>Titre 2</h6>
        <p>Suspendisse potenti. Quisque eget libero vitae velit porta iaculis. </p>
        <p class="infos">Infos</p>
        	</span></div>  
            </div>


Le code CSS:


@charset "utf-8";
/* CSS Document */


body {
	background-color: #CCC;
}
img {
	border:0;
}

h1 {
	font-family: Impact;
	font-size: 36px;
	line-height: 5px;
	font-weight: lighter;
	word-spacing: 5px;
	letter-spacing: 1.5px;
	color: #FFFF00;
}
h2 {
	font-family: Impact;
	font-size: 1.2em;
	font-weight: 100;
	line-height: 10px;
}
h3 {
	font-family: Impact;
	font-size: 24px;
	color: #FFFF00;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 100;
}
h4 {
	color: #FFFFFF;
	text-indent: 50px;
	font-size: 1.4em;
}
p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	color: #CCCCCC;
	padding:10px;
}

a {
	color: #FFFF00;
	text-decoration: none;
}

h5 {
	font-family: Impact;
	font-size: 24px;
	color: #FFFFFF;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 100;
	line-height: normal;
	padding:10px;
	border:medium solid #0C3;
}

h6 {
	font-family: Impact;
	font-size: 18px;
	color: #CCC;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: normal;
	padding-left:10px;
	border:medium solid #0C3;
}

.vmin {
	line-height:2.4em;
	margin-bottom: 50px;
	border:medium solid #0C3;
}

.vmin img {
	border:medium solid #0C3;
	float: left;
}

.vmin span {
	vertical-align: top;
	display:inline-block;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	color: #FFFF00;
	border:medium solid #0C3;
}
.vmin p {
	color: #FF0;
	margin: 0px;
	padding: 0px;
	padding-left:10px;
	padding-bottom:10px;
	width: 570px;
	line-height: 25px;
}

.vmin span span {
	padding: 10px;}
	border:medium solid #0C3;
}

h5 a {
	color: #FFFF00;
	text-decoration: underline;
}

h5 a:hover {
	color: #CCCCCC;
	text-decoration: underline;
}

.vmin h5 {
	color: #FFFF00;
}

.vmin a:hover{
	color: #CCCCCC;
	text-decoration: underline;
}


Ca vient pour sûr de mon CSS, car j'ai essayé la même configuration sur une page vierge et ça fonctionne. De quel élément une balise h5 peut-elle être l'enfant?

Merci pour votre aide.
Modifié par Neossir (28 May 2009 - 11:45)
Tu veux dire que le fait de savoir que tous les titres (entre autres éléments de type bloc) ont des marges par défaut ne t'a pas aidé ? Smiley cligne
Honte à moi Smiley confused . Tu parlais de ce passage?

a écrit :
Prendre connaissance de cette feuille de style d'exemple permet de comprendre pourquoi les éléments <blockquote> et <ul> ont un espace à gauche par défaut, pourquoi les titres de niveau 1 (<h1>) ont une taille et des marges plus grandes que les titres de niveaux inférieurs, pourquoi les paragraphes sont séparés par des marges, etc.


Il suffisait effectivement d'appliquer un margin et padding de 0 dans mon titre H5...

Merci! Smiley ravi
Sujet clos
Aller à