Center Website
Résolu
kizibag
Messages postés
85
Date d'inscription
Statut
Membre
Dernière intervention
-
kizibag -
kizibag -
Bonjour, je suis en train de créer mon site internet, sauf qu'il y a un petit problème, j'ai essayé plusieurs moyen pour centrer ma page au complet rien ne fonctionne, voilà mon code html dîtes moi ce qui ne vas pas :
<!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=utf-8" />
<title>Accueil GS-Prod.fr</title>
<style type="text/css">
<!--
body {
background-image: url(fond.gif);
background-repeat: repeat;
}
-->
</style>
<!-- Some META tags to help with Search Engine Optimization. Please
note however that META tags are NOT a magic bullet to get your web page
to the top of search engine rankings. They are just part of that effort. You
can get more information by googling SEO or visiting the style Online forums. -->
<meta name="description" content="Put the description of this page here" />
<meta name="keywords" content="Put keywords for this page here separated by commas" />
<meta name="generator" content="style Online - Dynamic Web Pages from your Photoshop Design in seconds" />
<!-- The CSS Reset from Eric Meyers -->
<!-- <link rel="stylesheet" type="text/css" href="cssreset.css" media="screen" /> -->
<!-- The Primary External CSS style sheet. -->
<!-- We use the jquery javascript library for DOM manipulation and
some javascript tricks. We serve the script from Google because it's
faster than most ISPs. Get more information and documentation
at https://jquery.com/ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- This is a jquery PNG fix script that fixes the PNG
transparency problem with IE6. It's available from here:
http://campbellsdigitalsoup.co.uk -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="jquerypngfix.js"></script>
<![endif]-->
<!-- All the javascript generated for your design is in this file -->
<script type="text/javascript" src="style.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */
if(document.images)
{
i478377 = new Image;
i478377 = "logo_s.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>
</center><body>
<!-- This is 'Conteneur' -->
<div id="Layer-1" >
<div align="center"><img src="Layer-1.png" width="1024" height="700" alt="Conteneur" />
<!-- This is 'cat' -->
</div>
<div id="Layer-4" >
<div align="center"><img src="Layer-4.png" width="193" height="39" alt="cat" /></div>
</div>
<div align="center">
<!-- This is 'nav' -->
</div>
<div id="Layer-3" >
<div align="center"><img src="Layer-3.png" width="193" height="40" alt="nav" /></div>
</div>
</div>
<!-- This is 'footer' -->
<div id="Layer-2" >
<img src="Layer-2.png" width="1024" height="62" alt="footer" /></div>
<!-- This is 'header' -->
<div id="Layer-5" >
<img src="Layer-5.png" alt="header" width="1024" height="138" align="absmiddle" />
<!-- This is 'logo_n' -->
<div id="Layer-11" ><!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
-->
<A HREF="#" onMouseOver="i478377.src='logo_s.png'" onMouseOut="i478377.src='Layer-11.png'"><IMG SRC="Layer-11.png" BORDER=0 NAME="i478377" ALT="logo" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript></div>
</div>
</div>
</body></center>
</html>
http://www.gs-prod.fr/ voila ma page pour que cela soit plus compréhensible
<!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=utf-8" />
<title>Accueil GS-Prod.fr</title>
<style type="text/css">
<!--
body {
background-image: url(fond.gif);
background-repeat: repeat;
}
-->
</style>
<!-- Some META tags to help with Search Engine Optimization. Please
note however that META tags are NOT a magic bullet to get your web page
to the top of search engine rankings. They are just part of that effort. You
can get more information by googling SEO or visiting the style Online forums. -->
<meta name="description" content="Put the description of this page here" />
<meta name="keywords" content="Put keywords for this page here separated by commas" />
<meta name="generator" content="style Online - Dynamic Web Pages from your Photoshop Design in seconds" />
<!-- The CSS Reset from Eric Meyers -->
<!-- <link rel="stylesheet" type="text/css" href="cssreset.css" media="screen" /> -->
<!-- The Primary External CSS style sheet. -->
<!-- We use the jquery javascript library for DOM manipulation and
some javascript tricks. We serve the script from Google because it's
faster than most ISPs. Get more information and documentation
at https://jquery.com/ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- This is a jquery PNG fix script that fixes the PNG
transparency problem with IE6. It's available from here:
http://campbellsdigitalsoup.co.uk -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="jquerypngfix.js"></script>
<![endif]-->
<!-- All the javascript generated for your design is in this file -->
<script type="text/javascript" src="style.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */
if(document.images)
{
i478377 = new Image;
i478377 = "logo_s.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>
</center><body>
<!-- This is 'Conteneur' -->
<div id="Layer-1" >
<div align="center"><img src="Layer-1.png" width="1024" height="700" alt="Conteneur" />
<!-- This is 'cat' -->
</div>
<div id="Layer-4" >
<div align="center"><img src="Layer-4.png" width="193" height="39" alt="cat" /></div>
</div>
<div align="center">
<!-- This is 'nav' -->
</div>
<div id="Layer-3" >
<div align="center"><img src="Layer-3.png" width="193" height="40" alt="nav" /></div>
</div>
</div>
<!-- This is 'footer' -->
<div id="Layer-2" >
<img src="Layer-2.png" width="1024" height="62" alt="footer" /></div>
<!-- This is 'header' -->
<div id="Layer-5" >
<img src="Layer-5.png" alt="header" width="1024" height="138" align="absmiddle" />
<!-- This is 'logo_n' -->
<div id="Layer-11" ><!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
-->
<A HREF="#" onMouseOver="i478377.src='logo_s.png'" onMouseOut="i478377.src='Layer-11.png'"><IMG SRC="Layer-11.png" BORDER=0 NAME="i478377" ALT="logo" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript></div>
</div>
</div>
</body></center>
</html>
http://www.gs-prod.fr/ voila ma page pour que cela soit plus compréhensible
Configuration: Windows Vista Firefox 3.5.3
A voir également:
- Center Website
- Control center 4 - Télécharger - Divers Utilitaires
- Copytrans control center - Télécharger - Divers Utilitaires
- Catalyst control center - Télécharger - Pilotes & Matériel
- Website auditor - Télécharger - Référencement & SEO
- Création website - Guide
8 réponses
J'aurais pensé à la chose suivante:
dans div qui "engloberait" tout votre site, mettre une taille en pourcent ou en px ainsi que ceci:
Par exemple, pour une page qui ferait 70% de l'écran, ça donnerait ceci:
A ajouter après <body>
A ajouter avant </body>
Autre remarque:
remplacer:
par
et
par
Luan.
dans div qui "engloberait" tout votre site, mettre une taille en pourcent ou en px ainsi que ceci:
margin-left: auto; margin-right: auto;
Par exemple, pour une page qui ferait 70% de l'écran, ça donnerait ceci:
A ajouter après <body>
<div style="width: 70%; margin-left: auto; margin-right: auto;>
A ajouter avant </body>
</div>
Autre remarque:
remplacer:
</center><body>
par
</body>
et
</body></center>
par
</body>
Luan.
Puis-je voir le nouveau code, j'aimerais juste m'assurer que tout a été mis selon la façon à laquelle je pensais... Je m'explique mal des fois alors qui sait.
voila le nouveau code :
<!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=utf-8" />
<title>Accueil GS-Prod.fr</title>
<style type="text/css">
<!--
body {
background-image: url(fond.gif);
background-repeat: repeat;
}
-->
</style>
<!-- Some META tags to help with Search Engine Optimization. Please
note however that META tags are NOT a magic bullet to get your web page
to the top of search engine rankings. They are just part of that effort. You
can get more information by googling SEO or visiting the style Online forums. -->
<meta name="description" content="Put the description of this page here" />
<meta name="keywords" content="Put keywords for this page here separated by commas" />
<meta name="generator" content="style Online - Dynamic Web Pages from your Photoshop Design in seconds" />
<!-- The CSS Reset from Eric Meyers -->
<!-- <link rel="stylesheet" type="text/css" href="cssreset.css" media="screen" /> -->
<!-- The Primary External CSS style sheet. -->
<!-- We use the jquery javascript library for DOM manipulation and
some javascript tricks. We serve the script from Google because it's
faster than most ISPs. Get more information and documentation
at https://jquery.com/ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- This is a jquery PNG fix script that fixes the PNG
transparency problem with IE6. It's available from here:
http://campbellsdigitalsoup.co.uk -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="jquerypngfix.js"></script>
<![endif]-->
<!-- All the javascript generated for your design is in this file -->
<script type="text/javascript" src="style.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */
if(document.images)
{
i478377 = new Image;
i478377 = "logo_s.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>
<body><div style="width: 100%; margin-left: auto; margin-right: auto;>
<!-- This is 'Conteneur' -->
<div id="Layer-1" >
<div align="center"><img src="Layer-1.png" width="1024" height="700" alt="Conteneur" />
<!-- This is 'cat' -->
</div>
<div id="Layer-4" >
<div align="center"><img src="Layer-4.png" width="193" height="39" alt="cat" /></div>
</div>
<div align="center">
<!-- This is 'nav' -->
</div>
<div id="Layer-3" >
<div align="center"><img src="Layer-3.png" width="193" height="40" alt="nav" /></div>
</div>
</div>
<!-- This is 'footer' -->
<div id="Layer-2" >
<img src="Layer-2.png" width="1024" height="62" alt="footer" /></div>
<!-- This is 'header' -->
<div id="Layer-5" >
<img src="Layer-5.png" alt="header" width="1024" height="138" align="absmiddle" />
<!-- This is 'logo_n' -->
<div id="Layer-11" ><!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
-->
<A HREF="#" onMouseOver="i478377.src='logo_s.png'" onMouseOut="i478377.src='Layer-11.png'"><IMG SRC="Layer-11.png" BORDER=0 NAME="i478377" ALT="logo" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript></div>
</div>
</div></body>
</html>
<!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=utf-8" />
<title>Accueil GS-Prod.fr</title>
<style type="text/css">
<!--
body {
background-image: url(fond.gif);
background-repeat: repeat;
}
-->
</style>
<!-- Some META tags to help with Search Engine Optimization. Please
note however that META tags are NOT a magic bullet to get your web page
to the top of search engine rankings. They are just part of that effort. You
can get more information by googling SEO or visiting the style Online forums. -->
<meta name="description" content="Put the description of this page here" />
<meta name="keywords" content="Put keywords for this page here separated by commas" />
<meta name="generator" content="style Online - Dynamic Web Pages from your Photoshop Design in seconds" />
<!-- The CSS Reset from Eric Meyers -->
<!-- <link rel="stylesheet" type="text/css" href="cssreset.css" media="screen" /> -->
<!-- The Primary External CSS style sheet. -->
<!-- We use the jquery javascript library for DOM manipulation and
some javascript tricks. We serve the script from Google because it's
faster than most ISPs. Get more information and documentation
at https://jquery.com/ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- This is a jquery PNG fix script that fixes the PNG
transparency problem with IE6. It's available from here:
http://campbellsdigitalsoup.co.uk -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="jquerypngfix.js"></script>
<![endif]-->
<!-- All the javascript generated for your design is in this file -->
<script type="text/javascript" src="style.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */
if(document.images)
{
i478377 = new Image;
i478377 = "logo_s.png";
}
</SCRIPT>
<!-- FIN DU SCRIPT -->
</head>
<body><div style="width: 100%; margin-left: auto; margin-right: auto;>
<!-- This is 'Conteneur' -->
<div id="Layer-1" >
<div align="center"><img src="Layer-1.png" width="1024" height="700" alt="Conteneur" />
<!-- This is 'cat' -->
</div>
<div id="Layer-4" >
<div align="center"><img src="Layer-4.png" width="193" height="39" alt="cat" /></div>
</div>
<div align="center">
<!-- This is 'nav' -->
</div>
<div id="Layer-3" >
<div align="center"><img src="Layer-3.png" width="193" height="40" alt="nav" /></div>
</div>
</div>
<!-- This is 'footer' -->
<div id="Layer-2" >
<img src="Layer-2.png" width="1024" height="62" alt="footer" /></div>
<!-- This is 'header' -->
<div id="Layer-5" >
<img src="Layer-5.png" alt="header" width="1024" height="138" align="absmiddle" />
<!-- This is 'logo_n' -->
<div id="Layer-11" ><!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
-->
<A HREF="#" onMouseOver="i478377.src='logo_s.png'" onMouseOut="i478377.src='Layer-11.png'"><IMG SRC="Layer-11.png" BORDER=0 NAME="i478377" ALT="logo" HSPACE=0 VSPACE=0></A>
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript></div>
</div>
</div></body>
</html>
Bonjour,
A la place de 100% (raison pour laquelle ça ne marche probablement pas), mettez en PX la taille du corps du site (le fond bleu clair).
Luan.
A la place de 100% (raison pour laquelle ça ne marche probablement pas), mettez en PX la taille du corps du site (le fond bleu clair).
Luan.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour, mon site est en 1024x900 px pourrait-tu me donner le code avec les bon réglage
merci d'avance
merci d'avance
http://www.gs-prod.fr/ voila c'est résolu je n'avais pas fait attention à mon code css il y avait un gros beug merci à tous
voila mon code html :
<!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>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/gif" href="/anifavicon.gif" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accueil GS-Prod.fr</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head><style type="text/css">
<!--
body {
background-image: url(fond.gif);
background-repeat: repeat;
}
-->
</style>
<body>
<div id="grand_conteneur">
<div id="header">
<div id="logo"></div>
</div>
<div id="menu">
<a href="index.html" title="index">Accueil</a>
<a href="creation.html" title="création">Création</a>
<a href="contact.html" title="contact">Contact</a>
<a href="faq.html" title="faq">Faq</a>
<a href="livredor.html" title="livredor">Livre d'or</a>
</div>
<div id="haut"></div>
<div id="conteneur">
<div id="container">
<h1>Les dernieres news</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus ultricies tortor, vitae sodales lorem aliquet eget. Vivamus sit amet arcu et tellus porta iaculis eleifend ut tellus. Cras varius ornare lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras ut erat nec elit viverra posuere. Curabitur blandit lectus egestas erat ornare id aliquam eros dignissim. Duis egestas luctus odio eu sollicitudin. Vivamus interdum rhoncus lorem, quis ultrices enim suscipit vel. Vestibulum quis orci nunc, ac congue diam. Donec cursus, nisi non auctor porttitor, nisl risus aliquet felis, et molestie tortor arcu in lorem. Nulla orci sem, consequat vitae ornare eu, pellentesque eu tortor. Aenean ultrices mattis sodales. Cras in sollicitudin turpis. Vivamus et pellentesque tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nec lectus id erat semper cursus.
Curabitur <b>ultrices</b> varius velit eget ullamcorper. Aenean mauris nunc, commodo eu mattis nec, posuere vel odio. Curabitur in nunc eu ligula volutpat varius. Fusce in fermentum nunc. Aenean sollicitudin consectetur risus, quis consectetur odio hendrerit et. Cras sodales, augue congue scelerisque euismod, orci tortor feugiat sapien, at accumsan lectus tellus sit amet nisi. Aliquam sed tristique ligula. Nullam non mauris sed mauris dictum elementum eu luctus elit. Ut eu tortor at mi mattis dapibus at quis urna. Curabitur a purus velit, tempor gravida odio. Curabitur massa nisl, semper eu suscipit eu, ornare at dolor. Etiam in nisi massa. Duis massa nibh, aliquam sit amet euismod a, varius at nisl. Vivamus vel est ut arcu dapibus eleifend sed nec lacus.
Cras accumsan ipsum felis. Nulla sed mauris in mauris mollis imperdiet et eu massa. Aenean quis odio at eros fringilla lobortis. Nam tristique lectus sed massa egestas vel egestas diam ornare. Ut pellentesque adipiscing dolor vel placerat. Etiam eget mauris neque, a molestie nisi. Quisque sed blandit ligula. Phasellus fermentum, metus sed pharetra vestibulum, nisl libero tristique eros, ut tincidunt quam purus non massa. Maecenas tincidunt egestas pulvinar. Nullam sed libero eu ante molestie pretium a a lectus. Suspendisse elementum, dolor et commodo dictum, ante est sagittis enim, ac elementum lorem odio ut tortor. Aenean vel eros ac felis gravida vehicula vitae quis nibh. Donec sollicitudin, enim in venenatis suscipit, justo felis gravida eros, sed varius nunc dui sit amet metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse auctor, purus in rhoncus mattis, leo lacus eleifend odio, vel convallis lectus orci quis quam. Curabitur ut dolor et urna vulputate pretium eget eget nunc. Nullam consequat posuere porta. Aliquam ac laoreet urna.
Nulla massa ipsum, elementum sed iaculis ac, elementum eu augue. Suspendisse potenti. Quisque nec lorem ligula, quis cursus lorem. In hac habitasse platea dictumst. Sed tellus sem, tincidunt at aliquet et, lacinia in leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et magna eget ligula placerat gravida quis ut lectus. Vivamus venenatis est non nunc accumsan gravida. Donec ultricies felis vel arcu lobortis aliquet. Donec convallis pellentesque consequat. Aenean tempus pulvinar tellus, iaculis aliquet augue vestibulum in. Mauris pharetra ipsum et sem pellentesque eget rhoncus lectus consequat. Suspendisse rhoncus mollis aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque condimentum tellus eu justo pretium volutpat. Mauris auctor tellus at urna fringilla ac suscipit odio vehicula. Nullam porta urna ornare lacus consequat condimentum sagittis est elementum.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla viverra, odio fringilla imperdiet consectetur, nulla eros tristique tortor, a hendrerit nisl massa in enim. Etiam et egestas augue. Ut iaculis dignissim ultricies. Integer interdum rhoncus ante, nec ultrices quam vehicula vitae. Mauris lorem magna, tristique accumsan vestibulum lobortis, adipiscing sit amet mi. Sed ornare gravida egestas. Morbi sollicitudin semper pulvinar. Sed euismod vehicula est, sed adipiscing nunc ultrices sit amet. Maecenas egestas lobortis semper. Nunc auctor ullamcorper diam, id porttitor elit ultricies id. Praesent eu diam sapien, eget porta mauris. Pellentesque a vulputate nisi. Nam at orci sit amet felis ultrices congue interdum in massa. Phasellus fermentum facilisis mattis. Morbi ac turpis id urna convallis blandit. Aenean eu odio mi. Fusce eget commodo nunc. Integer et rhoncus sem. Aenean varius, magna sed dignissim condimentum, nisl sapien egestas risus, id imperdiet tortor ante sit amet urna. <br/>
</div>
<div id="sidebar">
<h1>Navigation</h1>
<ul>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
</ul>
<h1>Categories</h1>
<ul>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="bas"></div>
<div id="footer">©2009 GS-PROD All rights reserved</div>
</div>
</body>
</html>
et mon code CSS :
.clear {
margin: 0 auto;
font-size: 1px;
clear: both;
}
body{
background-color: #ffffff;
margin:0;
padding:0;
font-family: verdana , geneva , sans-serif;
font-size:9px;
}
#grand_conteneur{
width:1024px;
margin:0 auto 0 auto;
}
#header{
height:105px;
width:1024px;
background:url(themes/header.png) no-repeat top center ;
margin:0 auto 0 auto;
}
#logo{
height:56px;
background:url(themes/logo.png) no-repeat center ;
padding-top:40px;
margin:0 0 0 0;
}
#menu{
height:29px;
background:url(themes/menu.png) no-repeat top center ;
margin: 0 auto 0 auto;
width:1024px;
float:left;
}
#menu a{
display:block;
font-size:15px;
line-height:29px;
text-align: center;
float:left;
text-decoration: none;
width: 135px;
height: 29px;
color: #0099FF;
}
#menu a:hover{
color:#c0d2ff;
font-size:18px;
}
#haut{
background:url(themes/haut_conteneur.png) no-repeat top center;
height:13px;
width:1024px;
margin:22px auto 0 auto;
}
#conteneur{
background:url(themes/conteneur.png) repeat-y center ;
width:950px;
margin:0 auto 0 auto;
padding-left:70px;
color:#000000;
}
#container{
width:588px;
margin:0 0 0 0;
float:left;
font-size:12px;
}
#container h1{
margin:0 0 0 0;
color:#0083fd;
}
#bas{
background:url(themes/bas_conteneur.png) no-repeat center;
height:13px;
width:1024px;
margin:0 auto 0 auto;
}
#sidebar {
width: 238px;
margin:20px 0 0 0;
float: right;
padding:0 32px 0 0 ;
}
#sidebar a {
color: #b4b4b4;
padding:0 0 0 0;
margin:0 0 0 0;
font-size:12px;
text-decoration:none;
font-weight:bold;
}
#sidebar a:hover {
font-weight: bold;
color: #0083fd;
display:inline;
}
#sidebar h1{
background:url(themes/cat_nav.png) no-repeat center;
width:180px;
color:#ffffff;
margin:0 15px 0;
text-align: center;
font-family:myriad web pro;
}
#footer{
background:url(themes/footer.png) no-repeat left ;
margin:0 auto 0 auto;
color:#ffffff;
text-align:center;
line-height:60px;
width:1024px;
height:60px;
font-size:15px;
}
<!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>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/gif" href="/anifavicon.gif" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accueil GS-Prod.fr</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head><style type="text/css">
<!--
body {
background-image: url(fond.gif);
background-repeat: repeat;
}
-->
</style>
<body>
<div id="grand_conteneur">
<div id="header">
<div id="logo"></div>
</div>
<div id="menu">
<a href="index.html" title="index">Accueil</a>
<a href="creation.html" title="création">Création</a>
<a href="contact.html" title="contact">Contact</a>
<a href="faq.html" title="faq">Faq</a>
<a href="livredor.html" title="livredor">Livre d'or</a>
</div>
<div id="haut"></div>
<div id="conteneur">
<div id="container">
<h1>Les dernieres news</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus ultricies tortor, vitae sodales lorem aliquet eget. Vivamus sit amet arcu et tellus porta iaculis eleifend ut tellus. Cras varius ornare lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras ut erat nec elit viverra posuere. Curabitur blandit lectus egestas erat ornare id aliquam eros dignissim. Duis egestas luctus odio eu sollicitudin. Vivamus interdum rhoncus lorem, quis ultrices enim suscipit vel. Vestibulum quis orci nunc, ac congue diam. Donec cursus, nisi non auctor porttitor, nisl risus aliquet felis, et molestie tortor arcu in lorem. Nulla orci sem, consequat vitae ornare eu, pellentesque eu tortor. Aenean ultrices mattis sodales. Cras in sollicitudin turpis. Vivamus et pellentesque tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nec lectus id erat semper cursus.
Curabitur <b>ultrices</b> varius velit eget ullamcorper. Aenean mauris nunc, commodo eu mattis nec, posuere vel odio. Curabitur in nunc eu ligula volutpat varius. Fusce in fermentum nunc. Aenean sollicitudin consectetur risus, quis consectetur odio hendrerit et. Cras sodales, augue congue scelerisque euismod, orci tortor feugiat sapien, at accumsan lectus tellus sit amet nisi. Aliquam sed tristique ligula. Nullam non mauris sed mauris dictum elementum eu luctus elit. Ut eu tortor at mi mattis dapibus at quis urna. Curabitur a purus velit, tempor gravida odio. Curabitur massa nisl, semper eu suscipit eu, ornare at dolor. Etiam in nisi massa. Duis massa nibh, aliquam sit amet euismod a, varius at nisl. Vivamus vel est ut arcu dapibus eleifend sed nec lacus.
Cras accumsan ipsum felis. Nulla sed mauris in mauris mollis imperdiet et eu massa. Aenean quis odio at eros fringilla lobortis. Nam tristique lectus sed massa egestas vel egestas diam ornare. Ut pellentesque adipiscing dolor vel placerat. Etiam eget mauris neque, a molestie nisi. Quisque sed blandit ligula. Phasellus fermentum, metus sed pharetra vestibulum, nisl libero tristique eros, ut tincidunt quam purus non massa. Maecenas tincidunt egestas pulvinar. Nullam sed libero eu ante molestie pretium a a lectus. Suspendisse elementum, dolor et commodo dictum, ante est sagittis enim, ac elementum lorem odio ut tortor. Aenean vel eros ac felis gravida vehicula vitae quis nibh. Donec sollicitudin, enim in venenatis suscipit, justo felis gravida eros, sed varius nunc dui sit amet metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse auctor, purus in rhoncus mattis, leo lacus eleifend odio, vel convallis lectus orci quis quam. Curabitur ut dolor et urna vulputate pretium eget eget nunc. Nullam consequat posuere porta. Aliquam ac laoreet urna.
Nulla massa ipsum, elementum sed iaculis ac, elementum eu augue. Suspendisse potenti. Quisque nec lorem ligula, quis cursus lorem. In hac habitasse platea dictumst. Sed tellus sem, tincidunt at aliquet et, lacinia in leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et magna eget ligula placerat gravida quis ut lectus. Vivamus venenatis est non nunc accumsan gravida. Donec ultricies felis vel arcu lobortis aliquet. Donec convallis pellentesque consequat. Aenean tempus pulvinar tellus, iaculis aliquet augue vestibulum in. Mauris pharetra ipsum et sem pellentesque eget rhoncus lectus consequat. Suspendisse rhoncus mollis aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque condimentum tellus eu justo pretium volutpat. Mauris auctor tellus at urna fringilla ac suscipit odio vehicula. Nullam porta urna ornare lacus consequat condimentum sagittis est elementum.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla viverra, odio fringilla imperdiet consectetur, nulla eros tristique tortor, a hendrerit nisl massa in enim. Etiam et egestas augue. Ut iaculis dignissim ultricies. Integer interdum rhoncus ante, nec ultrices quam vehicula vitae. Mauris lorem magna, tristique accumsan vestibulum lobortis, adipiscing sit amet mi. Sed ornare gravida egestas. Morbi sollicitudin semper pulvinar. Sed euismod vehicula est, sed adipiscing nunc ultrices sit amet. Maecenas egestas lobortis semper. Nunc auctor ullamcorper diam, id porttitor elit ultricies id. Praesent eu diam sapien, eget porta mauris. Pellentesque a vulputate nisi. Nam at orci sit amet felis ultrices congue interdum in massa. Phasellus fermentum facilisis mattis. Morbi ac turpis id urna convallis blandit. Aenean eu odio mi. Fusce eget commodo nunc. Integer et rhoncus sem. Aenean varius, magna sed dignissim condimentum, nisl sapien egestas risus, id imperdiet tortor ante sit amet urna. <br/>
</div>
<div id="sidebar">
<h1>Navigation</h1>
<ul>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
</ul>
<h1>Categories</h1>
<ul>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
<li><a href="#" title="Accueil">liens</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="bas"></div>
<div id="footer">©2009 GS-PROD All rights reserved</div>
</div>
</body>
</html>
et mon code CSS :
.clear {
margin: 0 auto;
font-size: 1px;
clear: both;
}
body{
background-color: #ffffff;
margin:0;
padding:0;
font-family: verdana , geneva , sans-serif;
font-size:9px;
}
#grand_conteneur{
width:1024px;
margin:0 auto 0 auto;
}
#header{
height:105px;
width:1024px;
background:url(themes/header.png) no-repeat top center ;
margin:0 auto 0 auto;
}
#logo{
height:56px;
background:url(themes/logo.png) no-repeat center ;
padding-top:40px;
margin:0 0 0 0;
}
#menu{
height:29px;
background:url(themes/menu.png) no-repeat top center ;
margin: 0 auto 0 auto;
width:1024px;
float:left;
}
#menu a{
display:block;
font-size:15px;
line-height:29px;
text-align: center;
float:left;
text-decoration: none;
width: 135px;
height: 29px;
color: #0099FF;
}
#menu a:hover{
color:#c0d2ff;
font-size:18px;
}
#haut{
background:url(themes/haut_conteneur.png) no-repeat top center;
height:13px;
width:1024px;
margin:22px auto 0 auto;
}
#conteneur{
background:url(themes/conteneur.png) repeat-y center ;
width:950px;
margin:0 auto 0 auto;
padding-left:70px;
color:#000000;
}
#container{
width:588px;
margin:0 0 0 0;
float:left;
font-size:12px;
}
#container h1{
margin:0 0 0 0;
color:#0083fd;
}
#bas{
background:url(themes/bas_conteneur.png) no-repeat center;
height:13px;
width:1024px;
margin:0 auto 0 auto;
}
#sidebar {
width: 238px;
margin:20px 0 0 0;
float: right;
padding:0 32px 0 0 ;
}
#sidebar a {
color: #b4b4b4;
padding:0 0 0 0;
margin:0 0 0 0;
font-size:12px;
text-decoration:none;
font-weight:bold;
}
#sidebar a:hover {
font-weight: bold;
color: #0083fd;
display:inline;
}
#sidebar h1{
background:url(themes/cat_nav.png) no-repeat center;
width:180px;
color:#ffffff;
margin:0 15px 0;
text-align: center;
font-family:myriad web pro;
}
#footer{
background:url(themes/footer.png) no-repeat left ;
margin:0 auto 0 auto;
color:#ffffff;
text-align:center;
line-height:60px;
width:1024px;
height:60px;
font-size:15px;
}
<img> http://img197.yfrog.com/img197/4206/sanstitrext.jpg </img>