28173 sujets

CSS et mise en forme, CSS3

Code correct ?

Bonjour tout le monde,

après avoir compris que je ne comprenais rien au CSS (lol) j'ai investi dans le livre CSS2 Pratique du design web, et je suis enfin parvenu à faire la première page du site d'un copain tel qu'il l'imaginait. Je ne suis cependant pas certain d'avoir fait ce qu'il y a de plus simple en codage / mise en forme. Si vous pouvez regarder et me donner votre avis Smiley ravi Merci !!!

http://www.sanchezandre.com/test/



body {
font-family: Verdana;
font-size: 12px;
color:#ffffff;
background: #000000;
margin:0;
padding:0;
}

a:link {color:#ffffff; text-decoration:none;}
a:visited{color:#ffffff; text-decoration:none;}
a:hover {color:#cccccc; background:#666666}
a:active {text-decoration:none;}

div#conteneur {
position: absolute;
left: 50%;
top: 50%;
width: 780px;
height: 585px;
margin-top: -292px;
margin-left: -390px;
background-image: url(layout/fond-premiere.jpg);
border: 1px solid #111111;
}

p#titre {
margin-top: 10px;
margin-left: 20px;
font-size: 14px;
}

p#pied-de-page {
margin-top: 5px;
margin-left: 20px;
font-size: 10px;
color: #cccccc;
}

img {
margin-top: 0;
margin-left: 20px;
}

div#navig {
position: absolute;
left: 600px;
top: 47px;
width: 120px;
height: 140px;
margin: auto;
}

ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu a {
display: block;
width: 120px;
line-height: 15px; 
text-align: left;
}





<!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">

<link rel="stylesheet" type="text/css" href="style-principal.css" />

<head>
<title>André Sanchez : Photographism / Creative Retouching / Digital Composing</title>
<meta name="keywords" content="andre sanchez, ANDRE SANCHEZ, photographist, photographiste, photographism, photographisme, digital composing, retouching">
<meta name="description" content="André Sanchez, Paris - France, photographist.">

<script type="text/javascript" language="JavaScript">

NumberOfImagesToRotate = 7;

FirstPart = '<img src="http://andresanchez.com/test/randomizer/random';
LastPart = '.jpg" height="510" width="510">';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>

</head>

<body>

<div id="conteneur">
<p id="titre"><strong>André Sanchez</strong> {Photographism / Creative Retouching / Digital Composing}</h1>

<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>

<p id="pied-de-page">All the images on this website are copyright © André Sanchez. Reproduction prohibited.</p>

<div id="navig">

<ul id="menu">
<li><a href="index.html">INDEX</a></li>
<li><a href="artwork.htm">ARTWORK</a></li> 
<li><a href="editorial.htm">EDITORIAL</a></li> 
<li><a href="graphicdesign.htm">GRAPHIC DESIGN</a></li> 
<li><a href="illustration.htm">ILLUSTRATION</a></li> 
<li><a href="biography.htm">BIOGRAPHY</a></li> 
<li><a href="store.htm">STORE</a></li> 
<li><a href="links.htm">LINKS</a></li> 
<li><a href="contact.htm">CONTACT</a></li> 
</ul>

</div>

</div>

</body>
tu peux te servir des outils de validation du W3C pour le xhtml
http://validator.w3.org/
et pour le css :
http://jigsaw.w3.org/css-validator/

deja il y'a une erreur fatale car ton entete ne contient pas de declaration de caractere essayes plutot ca : 



<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8 "/>
voici un code correct pour ta page :




<!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>

<meta http-equiv="content-type" content="text/html; charset=UTF-8 "/>

<link rel="stylesheet" type="text/css" href="style-principal.css" />
<title>André Sanchez : Photographism / Creative Retouching / Digital Composing</title>
<meta name="keywords" content="andre sanchez, ANDRE SANCHEZ, photographist, photographiste, photographism, photographisme, digital composing, retouching" />
<meta name="description" content="André Sanchez, Paris - France, photographist." />

<script type="text/javascript">

NumberOfImagesToRotate = 7;

FirstPart = '<img src="http://andresanchez.com/test/randomizer/random';
LastPart = '.jpg" height="510" width="510">';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>

</head>

<body>

<div id="conteneur">
<h1 id="titre"><strong>André Sanchez</strong> {Photographism / Creative Retouching / Digital Composing}</h1></p>

<script type="text/javascript" ><!--
printImage();
//--></script>

<p id="pied-de-page">All the images on this website are copyright © André Sanchez. Reproduction prohibited.</p>

<div id="navig">

<ul id="menu">

<li><a href="index.html">INDEX</a></li>
<li><a href="artwork.htm">ARTWORK</a></li> 
<li><a href="editorial.htm">EDITORIAL</a></li> 
<li><a href="graphicdesign.htm">GRAPHIC DESIGN</a></li> 
<li><a href="illustration.htm">ILLUSTRATION</a></li> 
<li><a href="biography.htm">BIOGRAPHY</a></li> 
<li><a href="store.htm">STORE</a></li> 
<li><a href="links.htm">LINKS</a></li> 
<li><a href="contact.htm">CONTACT</a></li> 

</ul>

</div>

</div>

</body>
</html>
ah et avec le code que je t'ai donné pense a remplacer 

p#titre {

margin-top: 10px;

margin-left: 20px;

font-size: 14px;

}


par 

h1#titre {

margin-top: 10px;

margin-left: 20px;

font-size: 14px;

}
C'est bizarre, avec la declaration de caractere le "é" ne s'affiche pas et est remplacé par un carré... ?

commodo a écrit :
tu peux te servir des outils de validation du W3C pour le xhtml
http://validator.w3.org/
et pour le css :
http://jigsaw.w3.org/css-validator/

deja il y'a une erreur fatale car ton entete ne contient pas de declaration de caractere essayes plutot ca : 



<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8 "/>
si tu utilises des caracteres francophone alors : 

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>


et puis c'est mieux d'ecrire &eacute; que é
Salut,
commodo a écrit :
et puis c'est mieux d'ecrire &eacute; que é

Non, ce n'est pas "mieux" ou "moins bien". Si l'encodage est correctement défini, il est en général bien plus simple d'écrire directement le caractère. Smiley cligne
Sujet clos
Aller à