je suis en train de refaire un site ... un de plus ! (on finit par passer plus de temps à faire les sites que ses créations personnelles et pour moi c'est pourtant là ma passion !)
j'ai trouvé un 'modèle' dont je voudrais m'inspirer pour faire quelques modifs ... mais je tatonne sans arrêt et souvent sans grand résultat ... alors : SOS !!! je sais qu'ici il y a des "groses têtes" (c'est admiratif comme terme !)
serait-ce possible de me mettre à côté des lignes de codes leur signification ou utilité (en français svp) pour que cela permette d'accélérer mon travail GRAND MERCI A L' AVANCE !!!
voici les 2 fichiers dont je dispose:
un css et html:
- css:
html, body {
margin: 0;
padding: 0;
height: 100%
}
body {
margin: 0;
padding: 0;
background-color : #fff;
text-align : center;
font-family : verdana;
font-size : 12px;
color : #000;
}
#haut {width : 100% ; background-color : #ccf; height : 10px; }
#haut2 {width : 100% ; background-color : #aaa; height : 100px; }
#content {
width :90%;
margin-left : auto;
margin-right : auto;
background-color : #fff;
border-top : 1px solid #fff;
height : 100%; }
html>body #content {height : auto; min-height : 100%; }
.expo {
margin-top : 0px ;
width : 100% ;
height : 150px;
background-image : url(images/haut.jpg)}
ul {
list-style : none ;
margin-left : auto ;
margin-right : auto;
margin-top : 10px;
padding : 0 00 10px 0 ;
background-color : transparent;
text-transform : uppercase ;
font-weight : bold;
font-size : 14px; }
li {float : left ; margin : 0 0 0 10px}
li a {color : #ccc; text-decoration : none}
li a:hover {color : #000; text-decoration : none}
.logo { margin-left : 70px ; margin-top : 0px; margin-right : 50px; position : absolute;}
.spacer {clear : both ; height : 13px}
.gauche {float : left ; width :31% ; ; margin-left : 0 ; text-align : left; }
.centre {float : left ; width : 33% ; margin-left : 2% ; text-align : left;}
.droite {float : right ; width : 31% ; margin-left : 0 ; text-align : left;}
.img_float { padding-right : 10px}
.bas {clear : both ; height : 10px; background-color : #ccc ; margin-top : 20px}
.bas2 {clear : both ; height : 13px; background-color : #ccc ; margin-top : 10px}
.top {margin : 10px 0 0 0}
.img_exo {width : 100% ; height : 150px; background-image : url(images/haut.jpg); margin : 10px 0 0 0}
h2 {
width : 100%; font-size : 14px ; padding : O ; margin : 10px 0 0 0}
p {text-indent : 20px ;
background-image : url(images/fleche.gif);
background-position : top left;
background-repeat : no-repeat;
text-align : justify;
line-height : 13px ; margin : 10px 0 0 0}
.liresuite {float : right; background-image : url(images/no.gif);}
a {color : #B0B211; text-decoration : underline}
.img_exo_002 {width : 100% ; height : 150px; background-image : url(images/0019.jpg); margin : 10px 0 0 0}
.img_exo_003 {width : 100% ; height : 150px; background-image : url(images/0020.jpg); margin : 10px 0 0 0}
.img_exo_004 {width : 100% ; height : 150px; background-image : url(images/0021.jpg); margin : 10px 0 0 0}
.img_exo_005 {width : 100% ; height : 150px; background-image : url(images/0022.jpg); margin : 10px 0 0 0}
.spacer {clear : both ; height : 13px}
- 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>
<title>kits graphique très fléxible et qui reste en place </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="haut"></div>
<div id="haut2"></div>
<div id="content">
<ul>
<li><a href="#">Index</a></li>
<li><a href="pages/images.html">Images</a></li>
<li><a href="pages/sites.html">Sites</a></li>
<li><a href="pages/photos.html">Photos</a></li>
<li><a href="pages/contact.html">Contact</a></li>
<li><a href="pages/unesourisetmoi.html">unesourisetmoi</a></li>
<li><a href="pages/page1.html">page1</a></li>
<li><a href="pages/page2.html">page2</a></li>
</ul>
<div class="expo"></div>
<div class="englobe">
<div class="gauche">
<h2>Index</h2>
<p>la bande du haut N°1 se commande par la ligne:</p>
<p>#haut {width : 100% ; background-color : #ccf; height : 10px; }</p>
<p>la bande du haut N°2 se commande par la ligne:</p>
<p>#haut {width : 100% ; background-color : #aaa; height : 100px; }</p>
<p>les liens du menu se commandent par les lignes :</p>
<p><ul><br />
<li><a href="#">Index</a></li><br />
<li><a href="#">Images</a></li><br />
<li><a href="#">Sites</a></li><br />
<li><a href="#">Photos</a></li><br />
<li><a href="#">Contact</a></li><br />
<li><a href="#">unesourisetmoi</a></li><br />
</ul></p>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait
tibique pertinax quo. Et mea ornatus facilisis, cum legendos eleifend
consulatu et. Paulo nostrum tincidunt quo ut. Discere apeirian probatus
an sed, an albucius omittantur mea. Possim eloquentiam eos et. Idque putent
inermis te eos, te quidam dolorum expetendis est, tota summo semper sea
id.</p>
<div class="img_exo"></div>
<p>le retour à la igne entraine (commandé par css): p {text-indent
: 20px ;<br />
background-image : url(images/fleche.gif); <br />
background-position : top left;<br />
background-repeat : no-repeat; <br />
text-align : justify; <br />
line-height : 13px ; margin : 10px 0 0 0} et donne la flèche sur
le côté gauche</p>
<p>Ei esse dic</p>
<p>ta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique
pertinax quo. Et mea ornatus facilisis, cum legendos eleifend consulatu
et. Paulo nostrum tincidunt quo ut. Discere apeirian probatus an sed,
an albucius omittantur mea. Possim eloquentiam eos et. Idque putent inermis
te eos, te quidam dolorum expetendis est, tota summo semper sea id.</p>
<p class="liresuite"><a href="#">lire la suite</a></p>
<h2>000 - 001</h2>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et.</p>
<div class="img_exo_002"></div>
<p>Possim eloquentiam eos et.
Idque putent inermis te eos, te quidam dolorum expetendis est, tota summo semper sea id.</p>
<p class="liresuite"><a href="#">lire la suite</a></p>
</div>
<div class="centre">
<h2>001</h2>
<div class="img_exo_003"></div>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et. </p>
<p>Paulo nostrum tincidunt quo ut.
Discere apeirian probatus an sed, an albucius omittantur mea. Possim eloquentiam eos et.
Idque putent inermis te eos, te quidam dolorum expetendis est, tota summo semper sea id.</p>
<div class="img_exo_005"></div>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et. Paulo nostrum tincidunt quo ut.
Discere apeirian probatus an sed, an albucius omittantur mea. Possim eloquentiam eos et.
Idque putent inermis te eos, te quidam dolorum expetendis est, tota summo semper sea id.</p>
<p class="liresuite"><a href="#">lire la suite</a></p>
</div>
<div class="droite">
<h2>002</h2>
<p class="top">Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et. Paulo nostrum tincidunt quo ut.
Discere apeirian probatus an sed, an albucius omittantur mea. Possim eloquentiam eos et.
Idque putent inermis te eos, te quidam dolorum expetendis est, tota summo semper sea id.</p>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et.</p>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et.</p>
<p class="liresuite"><a href="#">lire la suite</a></p>
<h2>004</h2>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et.</p>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et.</p>
<div class="img_exo_004"></div>
<p>Ei esse dicta epicuri sea. Dicant sanctus scripserit id usu, et feugait tibique pertinax quo.
Et mea ornatus facilisis, cum legendos eleifend consulatu et. Paulo nostrum tincidunt quo ut.
Discere apeirian probatus an sed, an albucius omittantur mea. Possim eloquentiam eos et.
Idque putent inermis te eos, te quidam dolorum expetendis est, tota summo semper sea id.</p>
</div>
</div>
</div><div class="spacer"></div>
<div class="bas"></div>
</body>
</html>
----------- je compte sur vous comme dirait einstein !
@mitiés
bg
ce que je cherche en plus c'est d'avoir des commentaires inscrits de ces manières sur les lignes de codes que j'ai postées car pour certaines ... je ne comprend pas leur fonction !
@mitiés
b g