Bonjour, ayant essayer vos suggestions, je n'ai toujours pas réussi. Cependant je part sur un nouveau design que je réussi beaucoup plus. Je cherche à faire un site de streaming.
Ici, mon problème est le suivant :
J'aimerais centrer la div contenu et la sidebar qui est en contact avec la div contenu.
J'aimerais les centré pour que toutes les résolutions d'écran les voit, c'est-à-dire qu'un margin ne résout pas l'affaire.
Voici mon code HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>FamilyStream</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- début header -->
<div id="header">
<div id="logo"><a href="#"><img src="images/logo.png"></a></div>
<ul>
<li><a href="">Accueil</a> |</li>
<li><a href="">Streameurs</a> |</li>
<li><a href="">Aide</a> |</li>
<li><a href="">Nous Contacter</a></li>
</ul>
</div>
<!-- fin header -->
<!-- début contenu -->
<section id="contenu">
<article>
<h1><span class="orange">B</span>lafikox</h1>
<iframe src="http://www.twitch.tv/blafikox/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/blafikox?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a>
</article>
<article>
<h1><span class="orange">I</span>nformations</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
</section>
<!-- fin contenu -->
<!-- début aside -->
<aside id="sidebar">
<section>
<h2><center><span class="orange">D</span>iscussion</center></h2>
<div id="tchat">
<iframe src="http://www.twitch.tv/blafikox/chat?popout=" frameborder="0" scrolling="no" height="740" width="300"></iframe>
</div>
</section>
</aside>
<!-- fin aside -->
<!-- début footer -->
<footer id="footer">
<p>Copyright - By Blafikox</p>
</footer>
<!-- fin footer -->
</div>
</body>
</html>
CSS :
@charset "utf-8";
/* CSS Document */
body {background-color: #E3E3E3; margin: 0; padding: 0; background:url(images/bg.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
h1 {color: #000000; margin: 0; padding: 0;}
p {margin: 0; padding: 0; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
/* Header */
ul {margin: 0; padding: 0;}
#header {top: 0; right: 0; left: 0; height: 120px; position: fixed; line-height: 120px; background-color: #A0A0A0; text-align: center; font-size: 30px; border-bottom: #000000 solid 2px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
#header li {list-style-type: none; display: inline-block;}
#header li a {text-decoration: none; color: #222222; transition: color .5s; -webkit-transition: color .5s; -moz-transition: color .5s; -o-transition: color .5s;}
#header li a:hover {color: #E8740E;}
#logo {width: 20%; height: 0px; text-align: center;}
/* Contenu */
#contenu {height: 790px; width: 625px; background-color: #C9C9C9; padding: 20px; padding-top: 140px; float: left; border-left: #000000 solid 2px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
#contenu p {color: #222222; font-size: 13px; line-height: 18px; margin-bottom: 20px;}
#contenu p:first-letter {color: #E8740E; display:block; float: left; font-size: 34px; padding: 5px; line-height: 25px;}
#contenu h1 {margin-bottom: 20px; background:url(images/icon.png) no-repeat; height: 30px; padding-left: 30px; line-height: 30px; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s;}
#contenu h1:hover {background:url(images/icon.png) 0 8px no-repeat;}
/* Aside */
#sidebar {width: 300px; background-color: #BCBCBC; float: left; height: 790px; padding: 20px; padding-top: 140px; border-right: #000000 solid 2px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
#sidebar h2 {color: #000000; margin: 5px; padding: 0; font-size: 17px;}
#tchat {padding-top: 7px;}
/* Footer */
#footer {background-color: #A0A0A0; position: fixed; bottom: 0; left: 0; right: 0; height: 70px; text-align: center; color: #000000; font-size: 20px; line-height: 75px; border-top: #000000 solid 2px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
/* Couleur*/
.orange {color: #E8740E;}
Merci d'avance aux personnes qui sauront m'aider
