Bonjour,
Familière de la position FLOAT en Xhtml/Css, j'ai voulu me lancer dans dans la refonte d'un site version Html5/Css. Suite à la lecture du dernier opus de Raphael Goetter j'ai voulu tenter la mise en page en tableau CSS. Ne parvenant pas à mes fins, je me suis tournée vers le position via display: inline-block... mais là je m'arrache les cheveux :
Dans mes blocs <div> mes paragraphes <p> ne se positionnent pas en haut du <div> et je ne comprends pas pourquoi. J'ai tout tenté pour résoudre le problème mais sans succès. Voici ce que j'obtiens :
et voici mon code html5 :
et voici la partie Css :
Je pense que c'est une étourderie de ma part mais à force de modifier le code pour tenter de résoudre mon problème je ne "vois" plus rien !
ahhh le positionnement en float c'est de la rigolade à côté !
Ah votre bon coeur !
Marie
Modifié par Marie08 (13 Jun 2012 - 08:57)
Familière de la position FLOAT en Xhtml/Css, j'ai voulu me lancer dans dans la refonte d'un site version Html5/Css. Suite à la lecture du dernier opus de Raphael Goetter j'ai voulu tenter la mise en page en tableau CSS. Ne parvenant pas à mes fins, je me suis tournée vers le position via display: inline-block... mais là je m'arrache les cheveux :
Dans mes blocs <div> mes paragraphes <p> ne se positionnent pas en haut du <div> et je ne comprends pas pourquoi. J'ai tout tenté pour résoudre le problème mais sans succès. Voici ce que j'obtiens :
et voici mon code html5 :
<?php include("haut.php"); ?><a id="haut"></a>
<header>
<div id="entete"><?php include("entete.php"); ?></div>
<ul id="lienevitement"><?php include("lienevitement.php"); ?></ul>
<ul id="menuhaut"><?php include("menu-haut.php"); ?></ul>
<div id="moteurderecherche"><?php include("moteurderecherche.php"); ?></div>
</header>
<div id="bandeau"><?php include("bandeau.php"); ?></div>
<section id="adherent">
<div id="bloc1"><?php include("bloc1.php");?></div>
<div id="bloc2"><?php include("bloc2.php"); ?></div>
<div id="bloc3"><?php include("bloc3.php"); ?></div>
</section>
<!--
<nav id="menudroit">
<dl><?php include("menu-droit.php"); ?></dl><a id="ancremenudroit"></a>
</nav>
<section id="fil">
<ul>
<li><a href="index.php" accesskey="1" title="Accueil">Accueil</a></li>
<li class="findufil">» Bienvenue</li>
</ul>
</section>
<section id="centre"><a id="ancrecontenu"></a><h1></h1>
<h2>sous-titre 1</h2>
<p>Xxxxxxxxxxxxx</p>
<h2>sous-titre 2</h2>
<p>Xxxxxxxxxxxxx</p>
<h2>sous-titre3</h2>
<p>Xxxxxxxxxxxxx</p>
</section>
-->
<footer>
<?php include("copyright.php"); ?>
</footer>
<?php include("bas.php"); ?>
et voici la partie Css :
/* =BODY */
body {
width: auto;
margin: 0;
padding: 0;
text-align: justify;
font: 90% "Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Helvetica,Sans-Serif;
line-height: 1.5em;
color: #333;
background-color: #fff;
border: none;
}
/* =CONTENEUR */
#conteneur {
width: 90%;
max-width: 980px;
height: auto;
margin: 0 auto;
padding: 0;
background-color: #fff;
border: 1px solid green;
}
/* =TRAITEMENT DES HYPERLIENS EN GENERAL */
a {
font-weight: 500;
font-size: 95%;
color: #000;
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:hover, a:focus, a:active {
border-bottom: 1px dotted #333;
}
/* =TRAITEMENT DES IMAGES EN GENERAL */
img {
border: none;
}
.image1 {
}
.image2{
}
/* =TRAITEMENT DU TEXTE EN GENERAL */
hr {
width: 80%;
margin: auto;
color: #efefef;
}
h1 {
margin: 10px 0 0 0;
font: bold 130% Georgia, "Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Verdana,Tahoma,Helvetica,Sans-Serif;
color: #333;
}
h2 {
margin: 25px 0 -10px 0;
font: bold 130% Georgia, "Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Verdana,Tahoma,Helvetica,Sans-Serif;
color: #cc3266;
}
h3 {
color: #000;
}
h4 {
color: #000;
}
h5 {
color: #000;
}
h6 {
color: #000;
}
em, strong {
font-size: 100%;
font-style: normal;
font-weight: bold;
color: #333;
}
abbr {
border-bottom: 1px dotted #333;
}
kbd {
margin: 0;
padding: 0 3px;
color: #000;
background: #f1f1f1;
border: 1px solid #888;
box-shadow: 1px 1px 0px #888;
}
blockquote {
width: 60%;
margin: 0 0 0 20px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #efefef;
}
.aligndroite {
text-align: right;
}
.asteris {
font-style: italic;
font-size: 80%;
color: #333;
}
.attention {
color: #cc3266;
}
.capitale {
font-variant: small-caps;
letter-spacing: -0.05em
}
.centrer {
text-align: center;
}
.ensavoirplus a {
color: #bf152b;
text-decoration: none;
}
/* =TRAITEMENT DIVERS */
.aide {
cursor: help;
}
.print {
display: none;
}
/* ===HEADER=== */
header {
width: 100%;
text-align: right;
vertical-align: middle;
}
/* =EN-TETE */
#entete {
display: inline-block;
width: auto;
margin: 0;
padding: 0;
border: none;
}
#entete > a {
text-decoration: none;
border: none;
}
/* =LIENS EVITEMENT */
#lienevitement {
display: inline-block;
width: auto;
margin: 0;
padding: 0;
list-style: none;
font-size: 20%;
color: #fff;
background-color: #fff;
border: none;
}
#lienevitement > li {
display: inline;
}
#lienevitement a {
color: #fff;
text-decoration: none;
border: none;
}
/* =MENU HAUT */
#menuhaut {
display: inline-block;
width: auto;
height: auto;
list-style: none;
margin: 0;
padding: 0 10px;
font-size: 90%;
border: 1px solid green;
}
#menuhaut > li {
display: inline;
border: none;
}
#menuhaut > li + li { /* mettre une bordure sauf pour le premier <li> */
padding-left: 5px;
border-left: 1px solid #efefef;
}
#menuhaut a:link, #menuhaut a:visited {
color: #333;
text-decoration: none;
}
#menuhaut a:hover, #menuhaut a:focus, #menuhaut a:active {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #333;
}
/* =MOTEUR DE RECHERCHE */
#moteurderecherche {
display: inline-block;
width: auto;
height: auto;
margin: 0 5px 0 0;
padding: 0;
border: 1px solid red;
}
#moteurderecherche > form {
margin: 0;
padding: 0;
border: none;
}
#moteurderecherche p {
margin: 0;
padding: 0;
}
#requete {
text-align: left;
color: #333;
background-color: #fff;
border: 1px solid #efefef;
}
.bouton {
margin: 0;
padding: 2px 1px;
font-weight: normal;
color: #333;
border: none;
}
/* ===FIN HEADER=== */
/* BANDEAU */
#bandeau {
width: auto;
height: 150px;
margin: 0 5px;
padding: 0;
border: 1px solid black;
}
#bandeau > a {
border: none;
}
/* ==SECTION ADHERENT== */
#adherent {
width: 100%;
margin: 0 5px;
padding: 0;
}
#adherent > div {
display: inline-block;
width: 32.5%;
height: 95px;
margin: 0;
padding: 0;
border-spacing: 3px;
vertical-align: top;
background-color: #fff;
font-weight: normal;
color: #333;
border-radius: 5px;
/*border: 1px solid #efefef;*/
border: 1px solid #000;
}
/* BLOC1 */
#bloc1 > p {
margin: 0;
padding: 0;
text-align: center;
border: 1px solid red;
}
/* BLOC2 */
#bloc2 > p {
margin: 0;
padding: 0;
text-align: center;
border: 1px solid red;
}
#bloc2 a {
font-weight: normal;
color: #cc3266;
text-decoration: none;
}
#bloc2 img {
margin: 0;
padding: 0 0 0 1px;
border: none;
}
/* BLOC3 */
#bloc3 > p {
margin: 0;
padding: 0;
text-align: center;
border: 1px solid red;
}
#bloc3 > form {
width: 100%;
margin: 0;
padding: 0;
border: none;
}
#bloc3 label {
float: left;
display: block;
width: 95px;
margin: 0 0 0 5px;
padding: 0;
color: #333;
border: none;
}
#bloc3 input {
width: auto;
margin: 0 auto 2px auto;
padding: 2px;
}
#bloc3 .bouton {
width: auto;
margin: 0;
padding: 3px 0;
font-weight: normal;
color: #333;
background-color: #fff;
border: none;
}
/* ===FIN SECTION ADHERENT=== */
Je pense que c'est une étourderie de ma part mais à force de modifier le code pour tenter de résoudre mon problème je ne "vois" plus rien !
ahhh le positionnement en float c'est de la rigolade à côté !
Ah votre bon coeur !
Marie
Modifié par Marie08 (13 Jun 2012 - 08:57)
) et les margins à l’intérieure. 
