fvsch a écrit :
Non. En passant, "Header" n'est pas une balise mais le nom d'un élément. Les balises correspondantes sont <header> et </header>. 
Par ailleurs il peut y avoir plusieurs éléments HEADER (jusqu'à un par section).
La doc est par là (pour une version un peu lisible):
http://developers.whatwg.org/sections.html#the-header-element
Tu as raison, je me suis mal exprimé
Oui, pour la possibilité d'avoir plusieurs HEADER, j'étais au courant.
fvsch a écrit :
Ça c'est de la mise en page. Ça n'a pas un grand rapport avec la sémantique de HTML5, hein. smile
Si tu fais allusion à la capture d'écran, oui, c'est effectivement une mise en page un peu bordel, d'autant plus que j'ai mis une bordure de la même couleur à 2 blocs, cela peut effectivement porter à confusion.
Si par contre tu veux dire qu'il ne s'agit pas d'une question relative au sujet initial, je peux éventuellement poser la question sur une autre section du forum à toi de me dire ce qui est le mieux.
J'ai essayé de revoir le code et je te préviens, j'expérimente, alors cela peut être pas joli joli...
Voici le résultat et le code, dis moi si tu as crié
en voyant "mon oeuvre"
Ce qui est bien, c'est que si je redimensionne la fenêtre, le design suit bien et s'adapte relativement correctement.
http://i46.servimg.com/u/f46/11/06/60/26/captur10.jpg
<!DOCTYPE html )
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Marc Schaefges | Blog</title>
<meta name="author" content="Marc Schaefges">
<link rel="stylesheet" media="all" type="text/css" title="style" href="index.css" />
</head>
<body>
<div class="top">
<header>
<h1 class="titre">La partie blog..</h1>
</header>
<nav>
<ul>
<li><a href="">Accueil</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<div class="middle">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin feugiat erat. Quisque elit augue, dapibus et feugiat ut, ornare id nisl. In id magna eu dui gravida lobortis. Aliquam erat volutpat. Integer a ante nibh, nec placerat risus. Donec nec lectus libero. Maecenas non lacus ac mi tincidunt ullamcorper. Nunc lacus odio, sagittis ac porta id, adipiscing sit amet sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vitae nibh leo. In auctor lorem quis risus congue rutrum sed eu magna. Nulla in consequat neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae neque mi, a porta mi. Integer iaculis metus et augue blandit elementum. Suspendisse ullamcorper ornare augue nec bibendum.
Integer justo arcu, suscipit in euismod vel, eleifend tincidunt ipsum. Pellentesque ligula libero, vulputate ut iaculis at, porttitor ut lorem. Maecenas gravida risus eu erat aliquam porta. Vestibulum id metus ut risus facilisis ultricies. Maecenas at risus non magna sodales euismod vitae non eros. Cras non ultricies lorem. Sed ut ligula lectus. Ut porta tellus et est tempor placerat. Suspendisse potenti. Pellentesque quis tortor et arcu molestie pretium. Aliquam tempus, lectus eu vehicula aliquet, orci ante vulputate massa, in facilisis arcu libero eget lorem. Nulla rhoncus placerat sollicitudin. Nunc accumsan lacinia egestas. Sed posuere, neque ut egestas tincidunt, eros leo mollis mi, ut fringilla elit augue rhoncus dolor. Mauris pretium, dui et luctus lacinia, magna justo scelerisque urna, fringilla semper felis nulla non odio. Donec lacinia eros vitae sapien cursus ultricies. </p>
</article>
<div class="colonne_droite">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin feugiat erat. Quisque elit augue, dapibus et feugiat ut, ornare id nisl. In id magna eu dui gravida lobortis. Aliquam erat volutpat. Integer a ante nibh, nec placerat risus. Donec nec lectus libero. Maecenas non lacus ac mi tincidunt ullamcorper. Nunc lacus odio, sagittis ac porta id, adipiscing sit amet sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vitae nibh leo. In auctor lorem quis risus congue rutrum sed eu magna. Nulla in consequat neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae neque mi, a porta mi. Integer iaculis metus et augue blandit elementum. Suspendisse ullamcorper ornare augue nec bibendum.
Integer justo arcu, suscipit in euismod vel, eleifend tincidunt ipsum. Pellentesque ligula libero, vulputate ut iaculis at, porttitor ut lorem. Maecenas gravida risus eu erat aliquam porta. Vestibulum id metus ut risus facilisis ultricies. Maecenas at risus non magna sodales euismod vitae non eros. Cras non ultricies lorem. Sed ut ligula lectus. Ut porta tellus et est tempor placerat. Suspendisse potenti. Pellentesque quis tortor et arcu molestie pretium. Aliquam tempus, lectus eu vehicula aliquet, orci ante vulputate massa, in facilisis arcu libero eget lorem. Nulla rhoncus placerat sollicitudin. Nunc accumsan lacinia egestas. Sed posuere, neque ut egestas tincidunt, eros leo mollis mi, ut fringilla elit augue rhoncus dolor. Mauris pretium, dui et luctus lacinia, magna justo scelerisque urna, fringilla semper felis nulla non odio. Donec lacinia eros vitae sapien cursus ultricies.
</p>
</div>
</div>
<footer>
</footer>
</body>
@font-face {
font-family: 'BoycottRegular';
src: url('BOYCOTT_-webfont.eot');
src: url('BOYCOTT_-webfont.eot?#iefix') format('embedded-opentype'),
url('BOYCOTT_-webfont.woff') format('woff'),
url('BOYCOTT_-webfont.ttf') format('truetype'),
url('BOYCOTT_-webfont.svg#BoycottRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html
{
}
body
{
background-image: url("fond.gif");
background-repeat: repeat;
width:960px;
padding:0;
margin:0;
width:100%;
min-height:100%;
color:white;
}
.top
{
display:table;
width:100%;
}
header
{
display:table-cell;
width:60%;
padding-left:20px;
}
h1.titre
{
font-family:BoycottRegular;
font-size:3em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 13px #999;
-webkit-box-shadow: 1px 1px 13px #999;
box-shadow: 1px 1px 13px #999;
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
width:400px;
margin-top:100px;
margin-left:50px;
padding-left:20px;
}
nav
{
display:table-cell;
width:40%;
}
nav li
{
list-style-type:none;
display:inline;
padding-left:40px;
}
nav li a
{
font-size:2em;
font-family:BoycottRegular;
color:white;
text-decoration:none;
}
nav li a:hover
{
}
.middle
{
display:table;
width:100%;
margin-top:30px;
}
article
{
display:table-cell;
width:50%;
padding:20px;
}
.colonne_droite
{
display:table-cell;
width:50%;
padding:20px;
}
