|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
jobetudiant
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
 Posté le : Mer Juin 30, 2004 15:18 Sujet du message: XHTML et CSS sur mon site... |
|
|
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:
| Citation: |
<?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:
| Citation: |
* {
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
WRInaute passionné
Inscrit le: 01 Mai 2004
Messages: 735
Localisation: Paris, France
|
| Posté le : Mer Juin 30, 2004 15:43 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Mer Juin 30, 2004 16:00 Sujet du message: XHTML et CSS sur mon site... |
|
|
| Bon, bien, tout ca est corrigé... mais ca ressemble toujours pas à ce que ca devrait! |
|
| |
|
|
jobetudiant
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Mer Juin 30, 2004 16:08 Sujet du message: XHTML et CSS sur mon site... |
|
|
[quote="wap"]
Les aspects cosmétiques sont assez secondaires.[/quote]
Heu, ben, non... je veux pas que mon site devienne moche juste pour se plier aux standards... |
|
| |
|
|
juliofromlille
WRInaute impliqué
Inscrit le: 15 Fév 2004
Messages: 420
Localisation: Lille by night, Rouen, Genève
|
| Posté le : Mer Juin 30, 2004 16:26 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute passionné
Inscrit le: 01 Mai 2004
Messages: 735
Localisation: Paris, France
|
| Posté le : Mer Juin 30, 2004 16:48 Sujet du message: XHTML et CSS sur mon site... |
|
|
| jobetudiant a écrit: |
| 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
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Jeu Juil 01, 2004 9:13 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute impliqué
Inscrit le: 15 Fév 2004
Messages: 420
Localisation: Lille by night, Rouen, Genève
|
| Posté le : Jeu Juil 01, 2004 9:30 Sujet du message: XHTML et CSS sur mon site... |
|
|
img{
border: 0;
}
backgroound-repeat: repeat; Vérifie la syntaxe tu peux aussi faire du repeat-x, ou y |
|
| |
|
|
jobetudiant
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Jeu Juil 01, 2004 9:45 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute passionné
Inscrit le: 01 Mai 2004
Messages: 735
Localisation: Paris, France
|
| Posté le : Jeu Juil 01, 2004 12:51 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Jeu Juil 01, 2004 13:07 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Jeu Juil 01, 2004 13:09 Sujet du message: XHTML et CSS sur mon site... |
|
|
| Effectivement... mais là d'où je suis je n'ai que IE... je teste avec FireFox, Mozilla, Opera et Safari ce soir. |
|
| |
|
|
wap
WRInaute passionné
Inscrit le: 01 Mai 2004
Messages: 735
Localisation: Paris, France
|
| Posté le : Jeu Juil 01, 2004 13:42 Sujet du message: XHTML et CSS sur mon site... |
|
|
| jobetudiant a écrit: |
| 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
WRInaute impliqué
Inscrit le: 24 Mai 2004
Messages: 288
|
| Posté le : Jeu Juil 01, 2004 13:48 Sujet du message: XHTML et CSS sur mon site... |
|
|
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
WRInaute passionné
Inscrit le: 01 Mai 2004
Messages: 735
Localisation: Paris, France
|
| Posté le : Jeu Juil 01, 2004 13:59 Sujet du message: XHTML et CSS sur mon site... |
|
|
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. |
|
| |
|
|
| |
|
|
