Bien le bonjours voilà mon probleme ne trouvant quasi pas de tuto sur les sites "fluides" et galere un peu en générale.
J'avance pas a pas mais je suis bloqué sur le conteneur arrondi.
en fait voila ma page actuel http://argent-sur-internet.fr
Comme vous pouvez le voir ce site en tableau ne respect pas le w3c .....
Donc j'ai pris un template banal valide xhtml1.0 strict avec css et je commence a adapter mon site dedans.
Bon tout ca pour vous fournir le code qui correspond a ce que j'ai en local et le lien c'est le rendu que je souhaiteré optenir.
le but de la manoeuvre et d'avoir mon menu en arrondi qui prend 18% a gauche et le contenu 78% a droite le menu étant également en arrondi.
et voila le code que j'utilise en local.
le css
et le html
j'ai mis tout le code au cas ou il y aurais une parti du code qui ne soit pas bon pour mettre le site fluide et j'aimerais également utiliser les em au lieu des px mais pas moyen de trouver un tableau de correspondance correcte.
Modifié par hadesjack (10 Feb 2007 - 19:36)
J'avance pas a pas mais je suis bloqué sur le conteneur arrondi.
en fait voila ma page actuel http://argent-sur-internet.fr
Comme vous pouvez le voir ce site en tableau ne respect pas le w3c .....
Donc j'ai pris un template banal valide xhtml1.0 strict avec css et je commence a adapter mon site dedans.
Bon tout ca pour vous fournir le code qui correspond a ce que j'ai en local et le lien c'est le rendu que je souhaiteré optenir.
le but de la manoeuvre et d'avoir mon menu en arrondi qui prend 18% a gauche et le contenu 78% a droite le menu étant également en arrondi.
et voila le code que j'utilise en local.
le css
/* ===========================================================
Elements de Page ========================================== */
* {
margin: 0;
padding: 0;
}
body {
font-size: 1em; font-weight: bold; font-family: Verdana; color: #84B5FF;
color: #464646;
background: url(./test.jpg);
}
ul, li {
list-style-type: none;
}
img {
border: 0;
}
/* ===========================================================
Structure de la Page ====================================== */
div#global {
padding-top: 0.5em;
width: 95%;
margin: 0 auto 0 auto;
}
/* ===========================================================
Header ==================================================== */
div#header {
padding-top: 0.5em;
height: 100%;
width: 98%;
margin-left:1%;
}
div#header img.fond {
width: 100%;
}
div#header img.pub {
position:absolute;
vertical-align:middle;
left:50%;
margin-left:-239px;
margin-top:15px;
}
[#blue]
/* ===========================================================
menu gauche ================================================= */
div#menugauche {
width: 18%;
float: left;
}
div#menugauche div.titreg {
width: 7px;
height: 18px;
background: url(./box-top-left.gif) no-repeat;
font-size: 1px;
float: left;
margin-top: 5px;
}
div#menugauche h3 {
font-size: 1em;
text-align: center;
background: url(./box-top-center.png) repeat-x;
height: 18px; /*18*/
float: left;
color: #92a620;
margin-top: 5px;
}
div#menugauche h3 span { color: #54545; }
div#menugauche div.titred {
width: 7px;
height: 18px;
background: url(./box-top-right.gif) no-repeat;
font-size: 1px;
float: right;
margin-top: 5px;
}
div#menugauche div.boxmenu {
padding: 5px 0 0 13px;
border-left:solid 1px;
border-right:solid 1px;
background-color:#FFFFFF;
margin: 0 0 0 0;
clear: left;
}
div#menugauche div.titregb {
width: 7px;
height: 7px;
background: url(./box-bottom-left.gif) no-repeat;
font-size: 1px;
float: left;
}
div#menugauche div.centre {
background: url(./box-bottom-center.gif) repeat-x;
height: 7px; /*18*/
float: right;
}
div#menugauche div.titredb {
width: 7px;
height: 7px;
background: url(./box-bottom-right.gif) no-repeat;
font-size: 1px;
float: left;
}
div#menugauche div.boxmenu ul li a {
color: #54545;
text-decoration: none;
}
div#menugauche div.boxmenu ul li a:hover {
color: #454545;
text-decoration: none;
border-bottom: 1px dashed #454545;
}
div#menugauche div.boxmenu li {
List-Style-Image:URL(puce.gif);
}
===========================================================
menu droite ================================================= */
div#menudroite {
width: 20%;
float: left;
margin: 0 0 5px 18px;
}
div#menudroite div.titreg {
width: 7px;
height: 18px;
background: url(./box-top-left.gif) no-repeat;
font-size: 1px;
float: left;
}
div#menudroite h3 {
font-size: 10px;
text-align: right;
background: url(./box-top-center.png) repeat-x;
height: 15px; /*18*/
padding: 3px 0 0 0;
float: left;
color: #92a620;
}
div#menudroite h3 span { color: #454545; }
div#menudroite div.titred {
width: 7px;
height: 18px;
background: url(./box-top-right.gif) no-repeat;
font-size: 1px;
float: right;
}
div#menudroite div.boxmenu {
border: 1px solid #dbdbdb;
padding: 0 0 3px 13px;
margin: 0 0 7px 0;
clear: left;
}
div#menudroite div.boxmenu ul li a {
color: #454545;
text-decoration: none;
}
div#menudroite div.boxmenu ul li a:hover {
color: #454545;
text-decoration: none;
border-bottom: 1px dashed #454545;
}
/* ===========================================================
contenu ============================================ */
div#contenu {
width: 78%;
margin: 0 0 5px 18px;
float: right;
}
div#contenu div.titreg {
width: 7px;
height: 18px;
background: url(./box-top-left.gif) no-repeat;
font-size: 1px;
float: left;
}
div#contenu h1 {
font-size: 13px;
background: url(./box-top-center.png) repeat-x;
height: 18px;
text-align: right;
width: 385px;
float: left;
color: #92a620;
}
div#contenu h1 span { color: #454545; }
div#contenu div.titred {
width: 7px;
height: 18px;
background: url(./box-top-right.gif) no-repeat;
font-size: 1px;
float: left;
}
div#contenu div.boxcontenu {
border: 1px solid #dbdbdb;
}
div#contenu h2 {
height: 17px; /*21*/
background: #e1e1e1;
color: #474747;
font-size: 11px;
padding: 4px 0 0 3px;
margin: 17px 0 0 0;
text-align: left;
}
div#contenu div.boxcontenu p {
padding: 10px 15px 5px 15px;
text-align: justify;
font-size: 11px;
}
div#contenu div.boxcontenu p.par {
font-size: 10px;
text-align: right;
font-style: italic;
}
p#footer {
clear: both;
font-size: 10px;
margin: 0 0 0 150px;
}
p#footer a {
font-style: italic;
}
/* ===========================================================
Liens généraux ============================================ */
a:link, a:active, a:visited {
color: #454545;
text-decoration: none;
}
a:hover {
color: #454545;
text-decoration: none;
}et le 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>
<title>Guigro.com</title>
<link rel="stylesheet" href="./utils/style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
</head>
<body>
<div id="header">
<img src="./utils/barre.png" alt="Header d'argent-sur-internet.fr" class="fond" /><img src="./utils/yo.gif" alt="les meillieurs offres en rotation" class="pub" /></div>
<div id="global">
[#blue]
<!--//////////////////// Menu de gauche ////////////////////-->
<div id="menugauche">
<div class="titreg"></div>
<h3><span>+</span> Menu </h3>
<div class="titred"></div>
<div class="boxmenu">
<ul>
<li><a href="http://argent-sur-internet.fr/News/News.php" title="afficher les news">News</a></li>
</ul>
</div>
<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>
<div class="titreg"></div><h3><span>+</span> Internet</h3><div class="titred"></div>
<div class="boxmenu">
<ul>
<li><a href="#" title="#">Lien</a></li>
<li><a href="#" title="#">Lien</a></li>
<li><a href="#" title="#">Lien</a></li>
<li><a href="#" title="#">Lien</a></li>
</ul>
</div>
<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>
<div class="titreg"></div><h3><span>+</span> Images</h3><div class="titred"></div>
<div class="boxmenu">
<ul>
<li><a href="#" title="#">Lien</a></li>
<li><a href="#" title="#">Lien</a></li>
<li><a href="#" title="#">Lien</a></li>
<li><a href="#" title="#">Lien</a></li>
</ul>
</div>
<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>
</div>
[/#]
<!--//////////////////// Contenu ////////////////////-->
<div id="contenu">
<div class="titreg"></div><h1><span>+</span> News</h1><div class="titred"></div>
<div class="boxcontenu">
<h2>Titre de la news</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a</p>
<p class="par">par guiro le 17/01/07 a 21h36</p>
<h2>Test</h2>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. L</p>
<p class="par">par guiro le 20/08/07 a 6h30</p>
</div>
</div>
<p id="footer">Découpe et intégration <a href="" title="Validation xhtml">xhtml</a> / <a href="" title="Validation css2">css</a> par Bo pour <a href="http://decoupe-fr.net/forums/index.php" title="Forum de Découpe-fr">Découpe-fr.net</a></p>
</div>
</body>
</html>j'ai mis tout le code au cas ou il y aurais une parti du code qui ne soit pas bon pour mettre le site fluide et j'aimerais également utiliser les em au lieu des px mais pas moyen de trouver un tableau de correspondance correcte.
Modifié par hadesjack (10 Feb 2007 - 19:36)
(Ceci dit, j'suis curieux de savoir quel programme t'a généré un code pareil)
.
</modération> 