bonjour a tous, je suis entrain de creer un site internet, le header est mis, un exemple de texte,
un background, mais j'aimerais faire un conteneur(je crois que ca s'appele comme ca), le rectangle en blanc au milieu de cette page. http://playmusculation.olympe-network.com/
je refais tout un design, j'ai crée l'image que je veux mettre en conteneur(bga.png) j'ai essayé de l'inserer, mais ej dois mal faire les choses, ou je n'ai pas le bon script.
voici ce que j'ai pouyrl'instant, que dois-je inscrire et ou pour faire apparaitre mon conteneur ? il fait 913px de large, la racine : (images/interface/bga.png)
voici le code html :
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
- <head>
- <title>Play-musculation</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <link rel="shortcut icon" href="favicon.gif" type="image/ico" />
- <link rel="stylesheet" type="text/css" href="style.css" title="default" media="screen" />
- </head>
- <body>
- <div id="global">
- <!-- Début du header, ici sera affiché le header et les différents liens qu'il contient -->
- </div>
- <div id="header">
- <h1>Play-musculation</h1> <!-- Modifier le titre, même s'il n'apparaît pas sur le webdesign -->
- </div>
- <!-- Début du contenu, c'est ici que le contenu de votre site est affiché -->
- <div id="contenu">
- <h2><br>Vive play musculation</br></h2>
- <p>
- <br>
- Premier test du site play musculation, c'est pas bau, c'est pourri meme,
- mais je ne peux m'enmpecher d'etre heureux de l'avoir crée
- </br>
- </p>
- <p>
- <br><br><br><br> Dans ce site il y aura :</br></br></br></br>
- </p>
- <p>
- <br>
- <ul>
- <li>une catégorie débutant</li>
- <li>une catégorie materiel</li>
- <li>une catégorie blessures</li>
- <li>...</li>
- </ul>
-
- </br>
- </div>
- <!-- Début du footer -->
- <p id="footer">Interface graphique par <a href="#">Maxime</a> pour <a href="http://play-musculation.com/">play-musculation</a></p>
- </div>
- </body>
- </html>
|
et voici le code css :
Code :
- *{ margin: 0; padding: 0; }
- body {
- width: 913px;
- margin: auto;
- background: #1d1d1d url(images/interface/bg.png) repeat-x;
- background-attachment: url(images/interface/bga.png);
- font-family: Arial, Verdana, Helvetica, sans-serif;
- color: #000;
- font-size: 10pt;
- }
- img {
- border: none;
- }
- a {
- text-decoration: none;
- color: #000;
- }
- a:hover {
- border-bottom: 1px dotted #fff;
- }
- /* CSS de la partie extensible en hauteur
- -----------------------------------------------------*/
- #global {
- background: url(images/interface/extensible.png) repeat-y;
- }
- /* CSS du header
- -----------------------*/
- #header {
- width: 913px;
- height: 233px;
- background: url(images/interface/header.png) no-repeat;
- margin-bottom: 10px;
- text-align: center;
- padding-top: 2px;
- }
- #header h1{
- display: none;
- }
- #header ul {
- display: inline;
- }
- #header li {
- display: inline;
- list-style: none;
- margin-right: 20px;
- }
- /* CSS du contenu
- ------------------------ */
- #contenu {
- margin: -25px 15px 15px 15px;
- }
- #contenu p {
- padding: 0 0 0.5em 0;
- }
- h2 {
- padding: 0 0 0.5em 0;
- font-size: 1.2em;
- }
- /* CSS du footer
- ------------------------*/
- #footer {
- clear: both;
- width: 913px;
- height: 22px;
- background: url(images/interface/footer.png) no-repeat;
- font-size: 8pt;
- text-align: center;
- color: #fff;
- }
|
ne vous foutez pas de moi, je débute, donc ca doit etre super mal organisé....