Bonjour à tous,
je viens de terminer un travail personnel et j'aimerai avoir votre avis sur le code que j'y emploie et connaitre vos remarques sur ma structre (aussi bien xhtml que css et javascript).
D'avance, merci de prendre un peu de votre temps pour moi
http://www.atelier143.com/charte/
index.html :
styles.css :
redim.js :
Modifié par mpop (23 Dec 2006 - 16:04)
je viens de terminer un travail personnel et j'aimerai avoir votre avis sur le code que j'y emploie et connaitre vos remarques sur ma structre (aussi bien xhtml que css et javascript).
D'avance, merci de prendre un peu de votre temps pour moi
http://www.atelier143.com/charte/
index.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="en" lang="en">
<head>
<title>Atelier 143 - Blog de Benoit Henry - Analyste, développeur et infographiste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Scite" />
<link rel="alternate" type="application/rss+xml" title="Get RSS 2.0 Feed" href="rss.php" />
<link rel="alternate" type="application/rdf+xml" title="Get RDF 1.0 Feed" href="rdf.php" />
<link rel="alternate" type="application/atom+xml" title="Get Atom 0.3 Feed" href="atom.php" />
<meta name="author" content="Bhen" />
<meta name="keywords" content="atelier, Atelier, blog, Blog, henry, Henry, Benoit, Benoit, orgied, Orgied, analyste, Analyste, développeur, Développeur, developpeur, Developpeur, programmeur, Programmeur, infographiste, Infographiste, projet, Projet, projets, Projets, PHP, php, SQL, sql, Javascript, javascript, pure, basic, Pure, Basic, XHTML, xhtml, html, HTML, css, CSS, web, Web, internet, Internet, flash, Flash, Actionscript, actionscript, Photoshop, photoshop, illustrator, Illustrator" />
<meta name="description" content="Atelier 143, blog de Benoit Henry, analyste, développeur et infographiste pour le web. Présentation de mes projets, de codes sources, de scripts, de tutoriaux en php, xhtml, javascript, css, photoshop, etc." />
<meta name="resource-type" content="document" />
<meta name="distribution" content="GLOBAL" />
<meta name="copyright" content="" />
<meta name="robots" content="ALL,INDEX,FOLLOW,ARCHIVE" />
<meta name="revisit-after" content="7 days" />
<link rel="shortcut icon" href="fav/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/redim.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<p id="note">
Blog de Benoit Henry<br />
analyste, développeur et infographiste
</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. In quis enim volutpat ligula sollicitudin pulvinar. Praesent nisi. Phasellus consequat, erat in aliquam fermentum, ligula sapien lobortis lectus, at tempor nibh enim in velit. Maecenas scelerisque eros non massa. Sed pulvinar, libero et nonummy blandit, mauris purus euismod libero, eu scelerisque neque massa ac arcu. Vivamus congue nunc et leo. Nunc fringilla risus pulvinar ante. Nam adipiscing. Suspendisse potenti. Integer augue velit, tristique at, lacinia et, dapibus scelerisque, felis.
</div>
<div id="left">
<a href="#" class="link">PHP</a>
<a href="#" class="link">XHTML</a>
<form method="post" action="#">
<fieldset>
<span>RECHERCHER</span>
<input type="text" name="src" value="" class="src" />
<input type="image" src="i/sbm.jpg" class="sbm" />
</fieldset>
</form>
<table id="calendar" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>
<a href="#" title="Mois précédent">
<img src="i/clf.jpg" width="18" height="18" alt="Mois précédent" />
</a>
</td>
<td colspan="5">Septembre 2006</td>
<td>
<a href="#" title="Mois suivant">
<img src="i/crg.jpg" width="18" height="18" alt="Mois suivant" />
</a>
</td>
</tr>
<tr>
<td>Dim</td>
<td>Lun</td>
<td>Mar</td>
<td>Mer</td>
<td>Jeu</td>
<td>Ven</td>
<td>Sam</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p id="lbtm">
<a href="#" title="Technologie PHP"><img src="i/php.jpg" width="78" height="13" alt="Technologie PHP" /></a>
<a href="#" title="Technologie PHP"><img src="i/txt.jpg" width="78" height="13" alt="Contenu Texte" /></a>
<a href="#" title="Technologie PHP"><img src="i/rss.jpg" width="78" height="13" alt="Flux RSS" /></a>
<a href="#" title="Technologie PHP"><img src="i/xml.jpg" width="78" height="13" alt="Flux Atom" /></a>
<a href="#" title="Technologie PHP"><img src="i/rdf.jpg" width="78" height="13" alt="Flux RDF" /></a>
</p>
</div>
<div id="footer">Réalisé par Benoit Henry - Atelier 143 - Année 2007 - Merci de contribuer à l'évolution de ce site</div>
</div>
</body>
</html>
styles.css :
html {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
background-color: #434040;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 11px;
}
body div#container {
position: relative;
margin: 0px auto;
padding: 0px;
width: 980px;
background-image: url(../i/bbk.jpg);
background-position: center;
background-repeat: repeat-y;
}
body div#content {
position: relative;
margin: 0px;
padding: 244px 85px 0px 225px;
width: 670px;
background-image: url(../i/top.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
}
div#content p#note {
margin: 0px;
padding: 0px;
position: absolute;
top: 175px;
right: 18px;
text-align: right;
}
body div#left {
position: absolute;
margin: 0px;
padding: 0px;
top: 152px;
left: 15px;
width: 195px;
z-index: 5;
}
div#left a.link {
margin: 0px;
padding: 15px 5px 0px 0px;
display: block;
width: 190px;
height: 24px;
background-color: #FFFFFF;
background-image: url(../i/btn.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
text-align: right;
text-decoration: none;
color: #999999;
}
div#left form {
position: relative;
margin: 0px;
padding: 0px;
display: block;
width: 195px;
height: 71px;
background-image: url(../i/src.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
}
div#left form fieldset {
position: relative;
margin: 0px;
padding: 0px;
border: none;
}
div#left form fieldset span {
margin: 0px;
padding: 0px;
position: absolute;
top: 15px;
right: 3px;
background-color: #FFFFFF;
color: #999999;
}
div#left form input.src {
margin: 0px;
padding: 0px;
position: absolute;
top: 37px;
left: 9px;
border: none;
width: 151px;
height: 18px;
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
}
div#left form input.sbm {
margin: 0px;
padding: 0px;
position: absolute;
top: 35px;
right: 3px;
border: none;
width: 25px;
height: 22px;
}
div#left table#calendar {
margin: 0px;
padding: 0px;
width: 195px;
height: 165px;
background-color: #FFFFFF;
background-image: url(../i/cal.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
border: none;
color: #999999;
font-size: 10px;
}
table#calendar thead {
margin: 0px;
padding: 0px;
}
table#calendar thead td {
margin: 0px;
padding: 0px;
text-align: center;
}
table#calendar thead img {
margin: 0px;
padding: 0px;
border: none;
}
table#calendar tfoot {
margin: 0px;
padding: 0px;
}
table#calendar tfoot td {
margin: 0px;
padding: 0px;
text-align: center;
}
table#calendar tbody {
margin: 0px;
padding: 0px;
}
table#calendar tbody td {
margin: 0px;
padding: 0px;
text-align: center;
}
div#left p#lbtm {
margin: 0px;
padding: 15px 10px 15px 10px;
width: 175px;
height: 67px;
background-image: url(../i/btm.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
text-align: center;
}
p#lbtm img {
margin: 0px;
padding: 0px;
border: none;
}
div#container div#footer {
position: relative;
margin: 0px;
padding: 15px 75px 0px 300px;
width: 605px;
height: 31px;
background-color: #FFFFFF;
background-image: url(../i/ftr.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
text-align: right;
font-size: 10px;
color: #CCCCCC;
z-index: 1;
}
redim.js :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContainer() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight+244;
var leftHeight = document.getElementById('left').offsetHeight+152;
if (contentHeight < leftHeight) {
var maxHeight = leftHeight;
var dimHeight = 290;
var rdimHeight = 0;
} else {
var maxHeight = contentHeight;
var dimHeight = 488;
var rdimHeight = 244;
}
if (maxHeight > windowHeight) {
var contentElement = document.getElementById('content');
contentElement.style.height = (maxHeight-dimHeight) + 'px';
var containerElement = document.getElementById('container');
containerElement.style.height = (maxHeight-rdimHeight) + 'px';
} else {
var contentElement = document.getElementById('content');
contentElement.style.height = (windowHeight-290) + 'px';
var containerElement = document.getElementById('container');
containerElement.style.height = windowHeight + 'px';
}
}
}
}
window.onload = function() {
setContainer();
}
Modifié par mpop (23 Dec 2006 - 16:04)
