XHTML et CSS sur mon site...

jobetudiant · 30 Juin 2004

Bonjour à tous et toutes...
J'ai décidé de me lancer et de passer tout mon site à XHTML et Css.... c'est dur, mais j'y travaille...

Voilà un premier jet :
http://www.jobetudiant.net/essaiXHTML.html

Comme vous le verrez, j'ai des petits problèmes... Je vous mets le code source :
Le XHTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" lang="fr" xml:lang="fr">
<head>
<link href="jobV5_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="imageHaut"></div>
<div id="partieCentrale">
<span id="bordGauche"></span>
<span id="contenu">
<h1>Mise en Page XHTML et CSS </h1>
<h2>Premier jet</h2>
<p>Bon, j'ai deux problèmes!</p>
<p>Le premier c'est que les traits sur les cotés ne se répètent pas vers le haut!</p>
<p>Le second, c'est tout ces espaces bizarres que je trouve dans ma barre en bas...</p>
<p>Si quelqu'un à des idées, ca marrange! </p>
</span>
<span id="bordDroit"></span>
</div>
<div id="mibas"></div>
<div id="barNavigation">
<span id="coinGauche"></span>
<A href="contact.php" onmouseover="contact.src='jpg/final1_base_clic_03.jpg'" onmouseout="contact.src='jpg/final1_base_08.jpg'"><IMG alt="y" src="jpg/final1_base_08.jpg" name="contact" width="78" height="77" border="0" /></A>
<span id="interBoutton"></span>
<A href="histo.php" onmouseover="histo.src='jpg/final1_base_clic_05.jpg'" onmouseout="histo.src='jpg/final1_base_10.jpg'"><IMG alt="y" src="jpg/final1_base_10.jpg" name="histo" width="78" height="77" border="0" /></A>
<span id="interBoutton"></span>
<A href="faq.php" onmouseover="faq.src='jpg/final1_base_clic_07.jpg'" onmouseout="faq.src='jpg/final1_base_12.jpg'"><IMG alt="y" src="jpg/final1_base_12.jpg" name="faq" width="77" height="77" border="0" /></A>
<span id="interBoutton"></span>
<A href="team.php" onmouseover="team.src='jpg/final1_base_clic_09.jpg'" onmouseout="team.src='jpg/final1_base_14.jpg'"><IMG alt="y" src="jpg/final1_base_14.jpg" name="team" width="78" height="77" border="0" /></A>
<span id="interBouttoncentral"></span>
<A href="emp/index.php" onmouseover="emp.src='jpg/final1_base_clic_11.jpg'" onmouseout="emp.src='jpg/final1_base_16.jpg'"><IMG alt="y" src="jpg/final1_base_16.jpg" name="emp" width="79" height="77" border="0" /></A>
<span id="interBoutton"></span>
<A href="etu/index.php" onmouseover="etu.src='jpg/final1_base_clic_13.jpg'" onmouseout="etu.src='jpg/final1_base_18.jpg'"><IMG alt="y" src="jpg/final1_base_18.jpg" name="etu" width="77" height="77" border="0" /></A>
<span id="coinDroit"></span>
</div>
<div id="imageBas"></div>
</body>
</html>

et le Css:

* {
font-family: Verdana, Arial, Helvetica, sans-serif;
top: 0px;
}
body {
font-size: 10px;
color: #333333;
text-align: center;
white-space: normal;
background-color:#FFFFFF;
margin:0;
padding:0;
}

#imageHaut{
background-image:url(jpg/final1_base_01.jpg);
margin-left: auto;
margin-right: auto;
height:60px;
width: 800px;
}
#imageBas{
background-image:url(jpg/final1_base_20.jpg);
margin-left: auto;
margin-right: auto;
height:18px;
width: 800px;
}

#partieCentrale{
margin-left: auto;
margin-right: auto;
width: 800px;
}
#bordGauche{
background-image:url(jpg/final1_base_03.jpg);
background-repeat:repeat-y;
width: 46px;
}
#bordDroit{
background-image:url(jpg/final1_base_05.jpg);
background-repeat:repeat-y;
width:46px;
}
#contenu{
width:708px;
text-align:justify;
}
#mibas{
background-image:url(jpg/final1_base_06.jpg);
margin-left: auto;
margin-right: auto;
height:29px;
width: 800px;
}
#barreNavigation{
margin-left: auto;
margin-right: auto;
width: 800px;
}
#coinGauche{
background-image:url(jpg/final1_base_07.jpg);
width:46px;
height:77px;
}
#coinDroit{
background-image:url(jpg/final1_base_19.jpg);
width:46px;
height:77px;
}
#interboutton{
background-image:url(jpg/final1_base_11.jpg);
width:43px;
height:77px;
}
#interbouttonCentral{
background-image:url(jpg/final1_base_15.jpg);
width:70px;
height:77px;
}
.titre1 {
text-transform: uppercase;
color: #FF0000;
letter-spacing: 10pt;
font-size: 9px;
text-align: left;
}
.titre2 {
color: #000000;
text-transform: uppercase;
text-indent: 10pt;
text-align: left;
border-bottom: 1px solid #666666;
}
.blabla {
text-align: justify;
}
form {
text-align: center;
border: thin dotted #999999;
text-indent: 10pt;
height: auto;
width: auto;
margin: 10px;
padding: 10px;
}
table {
text-align:center;
}
script {
border: thin dotted #CCCCCC;
}
td {
text-align:justify;
}
a {
color: #FF0000;
text-decoration: underline;
}
.dynblabla {
text-align: justify;
color: #FF0000;
}
h1 {
text-transform: uppercase;
color: #FF0000;
letter-spacing: 10pt;
font-size: 9px;
text-align: left;
font-weight: normal;
margin-top: 20px;
}
h2 {
color: #666666;
text-transform: uppercase;
text-indent: 10pt;
text-align: left;
border-bottom: 1px solid #666666;
font-weight: normal;
font-size: 12px;
}

Si des esxperts pouvaient me donner un coup de main... ca serait bien gentil de leur part...

Merci!

wap · 30 Juin 2004

Bravo pour cette décision !

Tu peux peut-être déjà commencer par essayer de régler les points indiqués par -http://validator.w3.org/check?uri=http://www.jobetudiant.net/essaiXHTML.html

Les aspects cosmétiques sont assez secondaires.

jobetudiant · 30 Juin 2004

Bon, bien, tout ca est corrigé... mais ca ressemble toujours pas à ce que ca devrait!

jobetudiant · 30 Juin 2004

wap a dit:
Les aspects cosmétiques sont assez secondaires.

Heu, ben, non... je veux pas que mon site devienne moche juste pour se plier aux standards...

juliofromlille · 30 Juin 2004

Hello,

déja, pour tes onmouseover, réalise plutôt cela : http://www.alsacreations.com/articles/anim/

Ensuite l'ID est unique contrairement à la clase ! attention à cela !

Voili voilou pour le début !

wap · 30 Juin 2004

jobetudiant a dit:
Heu, ben, non... je veux pas que mon site devienne moche juste pour se plier aux standards...

Ce n'est pas ce que j'ai dit.

Mais chercher à faire un design qui soit en tout le même que celui que tu avais avant ne sera pas forcément possible.

La manière de penser une mise en page en XHTML est complètement différente de ce qui se fait pour du HTML... C'est surtout à ce niveau là que la transition va te poser quelques soucis au début.

Pose-toi les bonnes questions. Par exemple : "est-il vraiment avantageux d'utiliser des images pour encadrer le contenu ? Ne serait-il pas à la fois plus simple et plus avantageux d'utiliser tout simplement un "border" dans la CSS ?"

Enfin, n'oublie pas de tester sous différents navigateurs. Actuellement, les bugs d'affichage que tu signales ne sont pas les mêmes sous Mozilla et sous IE.

jobetudiant · 1 Juillet 2004

Bon, est-ce que quelqu'un sait comment supprimer ces contours autour de mes liens images?

Et puis aussi comment on fait pour répeter les images des cotés?

juliofromlille · 1 Juillet 2004

img{
border: 0;
}

backgroound-repeat: repeat; Vérifie la syntaxe tu peux aussi faire du repeat-x, ou y

jobetudiant · 1 Juillet 2004

Oki, merci... ca avance doucement mais surement!

Bon j'ai uplaodé la dernière version à jour....

Il reste toujours le probleme du fond qui ne se repete pas sur les cotes...En fait ca vient surement du fait que ma div ne prends pas la taille maximale... comment faire?

Une autre question, pourquoi mes images mettent du temps a se recharger (boutons) alors qu'elles l'ont déjà été?

On touche au but:

http://www.jobetudiant.net/jobV5_styles_XHTML.css
et
http://www.jobetudiant.net/essaiXHTML.html

Merci de votre aide...

wap · 1 Juillet 2004

Euh... je ne voudrais pas te démoraliser (je trouve ça génial que tu aies décidé de te lancer dans le XHTML !) mais aujourd'hui, il n'y a plus que la partie haute de ton site qui s'affiche :-(

Je n'ai pas testé sous IE mais faire du XHTML pour que ce ne soit visible que sous IE, ça serait un parfait contre-sens...

jobetudiant · 1 Juillet 2004

Effectivement... mais là d'où je suis je n'ai que IE... je teste avec FireFox, Mozilla, Opera et Safari ce soir.

En revanche, c'est quand même dommage que je sois XHTML strict Valide, et que cela ne s'affiche pas sous ce que tu utilises!

jobetudiant · 1 Juillet 2004

Effectivement... mais là d'où je suis je n'ai que IE... je teste avec FireFox, Mozilla, Opera et Safari ce soir.

wap · 1 Juillet 2004

jobetudiant a dit:
c'est quand même dommage que je sois XHTML strict Valide, et que cela ne s'affiche pas sous ce que tu utilises!

J'utilise surtout Mozilla, qui est connu pour respecter les standards du Web et pour afficher les pages web en interprétant correctement le code source (ce qui permet aux webmasters de savoir comment leur page s'affichera et de coder en toute confiance, en appliquant les normes).

Ce que je trouve dommage c'est plutôt qu'IE affiche des pages en interprétant le code source à sa manière personnelle... Puisque là, en tant que webmasters, nous sommes obligés de nous livrer à toutes sortes d'astuces parfois vraiment tirées par les cheuveux pour que nos pages s'affichent correctement sous IE.

Le problème que je t'ai signalé n'est pas lié à Mozilla, ni au XHTML. Ce qui est "anormal" c'est que ton site s'affiche de manière conforme au design que tu avais en tête sous IE. Il faut faire attention à ne pas confondre XHTML valide et code sémantique ou design réussi... même si beaucoup de gens font encore cette erreur.

jobetudiant · 1 Juillet 2004

Oki.... mais alors, où est le problème?

J'ai cru comprendre que c'était le balise <div> ou <span> qui étaint à la fois imbriquées dans une autre et vides qui n'étaient pas interprétées... Comment faire?

wap · 1 Juillet 2004

Je n'ai pas le temps de voir dans le détail. Mais comme je te l'ai dit avant, le problème vient sûrement du fait que tu as essayé de traduire du HTML en XHTML alors que ces deux langages ont une logique de fonctionnement complètement différente.

Je peux te donner un conseil par contre : évite de développer en testant principalement sous IE. Garde le juste sous la main (de toute manière sous Windows il ne risque pas de s'envoler...) pour voir de temps en temps s'il ne fait pas n'importe quoi.

jobetudiant · 1 Juillet 2004

Bon... ca commence a ressembler a quelque chose sérieusement..

Sauf que j'ai toujours pas ces £-*$ de bords qui se répètent.... Quand je mets une taille pour la div qui les contient (genre 100px), ils s'agrandissent... Le problème c'est que je ne peux jamais savoir combien ils doivent mesurer vu que le contenu va etre dynamique...

HElp!!

wap · 1 Juillet 2004

Perso, j'oublierais l'utilisation d'une image pour les bords. Plus simple, plus propre, plus léger... Si encore c'était une image vraiment originale, mais dans ton cas je ne vois pas trop ce que ça apporte si ce n'est des soucis ;-)

Courage ! Ca va finir par marcher

jobetudiant · 1 Juillet 2004

Bon.... je vais voir, y'a moy de faire un contour que sur les cotés?

wap · 2 Juillet 2004

jobetudiant a dit:
y'a moy de faire un contour que sur les cotés?

border-right et border-left sont tes amis ;-)

Sinon, un autre conseil : promène toi sur quelques sites XHTML bien faits et étudie un peu leurs sources. C'est extrêmement formateur !

jobetudiant · 2 Juillet 2004

Bon, j'ai fait avec Border-right et border-left...

J'ai un leger decalage de couleur mais je devrais survivre... Par contre, malgré mes longs efforts, j'arrive pas à me debarrasser de ces espaces au dessus et au dessous de mes bordures...

http://www.jobetudiant.net/essaiXHTML.html

jobetudiant · 2 Juillet 2004

Hop...

Ca y est je crois que le résultat est là... Il ne reste plus qu'à intégrer le contenu maintenant!

wap · 2 Juillet 2004

Tu as un tout petit problème de couleur entre les borders et les images du contour en haut et en bas. Trois fois rien mais tant qu'à faire... ;-)

En tout cas, FELICITATIONS !

jobetudiant · 5 Juillet 2004

Oui, je sais, j'arrive pas à trouver le bonne couleur en HTML.... snif! L'idéal serait une image :twisted:

wap · 5 Juillet 2004

jobetudiant a dit:
j'arrive pas à trouver le bonne couleur en HTML... snif! L'idéal serait une image :twisted:

Héhé. Tu peux faire l'inverse : tu choisis une couleur HTML qui te va et tu modifies en conséquence les images que tu utilises ;-)

jobetudiant · 8 Juillet 2004

Bon, ca y est, je passe petit à petit mes pages en XHTML Css.. Encore quelques petites imperfections, maix ca vient.

Par contre, c'est très très bizarre, mais j'ai l'impression facheuse que IE ne mets pas en cache ma page css... donc il la recharge poiur chaque nouvelle page du site, c'est un peu couillon, non? commen faire alors pour l'obliger à garder les styles d'une pae sur l'autre?

Juxener · 14 Juillet 2004

Je laisse juste un petit post pour féliciter et encourager cette initiative, j'ai passé www.jsand.net en XHTML-CSS il n'y a pas longtemps et bien que ce soit bcp de choses à apprendre, c'est extrémement formateur quant à la création de VRAI site web

!

Courage

!