28173 sujets

CSS et mise en forme, CSS3

écart entre bloc H1 et bloc P

bonjour, j'ai un probleme avec un titre et un paragraphe impossible de trouver coment suprimé l'espace entre c'est deux blocs
j'ai cherché mais rien trouvé, peut etre parce que je ne connais pas les bon termes a chercher,
merci de m'aider stp
mon code 

	  		<div id="bloc">
			<h1>BLABLABLA</h1>
			<p>Pouet pouet pouet</p>
			</div>

le css 

div#bloc p {
margin: 0 5px 0 10px;

}
div#bloc h1 {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFFFFF;
text-align: left;
margin:0 0 0 10px;
position: relative;
top: -2em;

}

Modifié par Wilhou (08 Sep 2006 - 20:15)
Bonsoir,

div#bloc h1 , div#bloc p {border: 1px solid silver;}

div#bloc h1 {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFFFFF;
text-align: left;
margin:0 0 0 10px;
position: relative;
top:[b]0[/b];
}


J'ai ajouté un bordure, juste que tu vois qu'ils sont bien collés.
Modifié par Hum (08 Sep 2006 - 20:42)
Bonjour,

Un petit coup de position relative et absolute (voir tutoriels sur le forum super bien fait même moi j'ai compris) et voilou.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
/* CSS  */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background: url(images/bg.gif);
font-size: 0.8em;
margin: 0;
padding: 0;
}

div#cadre1 {/* conteneur global et arrière-plan du titre du cadre */
width: 487px;
padding-top: 38px;
background: url(cadre1_01.jpg) top left no-repeat;
position: relative;
}
div#bloccadre1 {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(cadre1_02.gif) bottom left no-repeat;

}
div#bloccadre1 p {
margin: 0 5px 0 10px;

}
div#bloccadre1 h1 {	
position: absolute;
left: 100px;
top:5px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#fff;
margin:0;


}
</style>
</head>

<body>
Sujet clos
Aller à