Création de site, XHTML, CSS

[marc.suisse]

Bon , en reconsultant le code ce matin , bien réveillé , je me rends compte que j'ai oublié de refermer la balise <ul> en mettant </ul> ...
-----

[invite2d24c6c6]

Fait attention si tu met seulement "a" le style que tu définie sera appliqué à tout les liens du site et pas seulement au liens contenu dans la liste (li) du menu (#menu).

[marc.suisse]

Salut

Ah ok , je comprends mieux alors .

Mais dans mon cas , cela n'est pas très grave car je n'aurais que les liens que l'on voit actuellement .

Sauf si la sémantique dit qu'il faut mettre li .

[invite2d24c6c6]

Non la sémantique ne dit rien

[invite2d24c6c6]

Par contre que c'est un site professionnel je te conseille d'aller valider ton code (html et css) sur le site de la W3C, sa fait beaucoup plus professionnel!
Par contre il te faudra mettre toute les couleurs avec leurs valeurs hexadécimal. (un soft pratique pour ça: la boîte à couleurs).
Voilà après c'est juste un plus c'est pas obligatoire

[marc.suisse]

Je viens de faire contrôler le fichier HTML et CSS et cela me dit qu'il n'y a aucune erreur et que c'est conforme , bonne nouvelle donc .

Je dois donc mettre le logo approuvé sur mon site ?

Ok pour la valeur hexadécimal , je m'en occupe dans la journée .

Je te remercie de ton aide

[invite2d24c6c6]

Ben si t'a passé les contrôle sans mettre le couleurs en hexadécimal, fait le pas . Moi il avait pas aimer les noms de couleurs ("black","brown", etc).
Pour le logo c'est mieux de le mettre sinon sa servais à rien de faire les tests !
Tu peut les mettre en bas, généralement c'est las qu'on les mets, il faut que sa reste discret quoi
@+

[marc.suisse]

Ah oui , je pensais encore à une chose .

Il faudra que je fasse en sorte que le site soit extensible selon la résolution de l'écran de celui qui consulte la page .

J'ai cru comprendre qu'il fallait mettre des % au lieu de px .

Je vais essayer de regarder dans le livre que j'ai acheté .

[marc.suisse]

Je viens de mettre le logo en bas

Mais je vais quand même modifier les couleurs en hexadécimal .

[invite2d24c6c6]

J'ai cru comprendre qu'il fallait mettre des % au lieu de px .

Tout à fait
P.S: envoie le lien du site(si il est sur internet)pour voir un peu où tu en es!

[marc.suisse]

Non , il n'est pas encore en ligne ...

Pour l'instant tout ce qui existe est le code que j'ai mis plus haut .

Je vais finir la page principale et j'attaquerais les autres ensuite .

PS : Je vais quand même de transférer le site par filezilla , je vais rechercher les mots de passe .

[marc.suisse]

Bon , je viens de télécharger Filezilla et je me suis connecté sur le serveur de mon hébergeur .

Mais le problème étant qu'il y a plus de fichiers que je ne le pensais .

Ci-dessous une capture d'écran montrant les fichiers dessus .

Je vais devoir continuer à lire pour comprendre quoi envoyer et quoi effacer du serveur .

[invite2d24c6c6]

J'attend la validation de l'image pour pouvoir t'aider!
Mais tu peut deja mettre ton site sans rien enlever:
Tu créer un nouveau répertoire à la racine et tu mets tes sources dedans.
L'url de ton site sera:
http://tonUrlNormal/LeNomDeTonDossier
sinon tu met l'url normal et après les dossier qui sont sur le serveur seront listés et la tu choisie ton dossier

[JPL]

Les fichiers _vti sont le signe que le site a été créé avec Frontpage. Donc plus aucun intérêt maintenant.

[marc.suisse]

Salut

J'ai fais une sauvegarde de l'ancien site , mais impossible de tout supprimer , je pense que je n'ai pas les droits d'accès pour la suppression des fichiers .

[marc.suisse]

Beuh maintenant le site internet ne marche plus , j'ai donc quand même effacé quelque chose ...

[marc.suisse]

Bon voilà le site est en ligne :

http://www.telepermanence.ch

Mais j'ai quelques petites difficultées à comprendre comment positionner les blocs dans la page.

Genre le bloc corps qui comprends le gif animé et le texe site en construction...

J'ai mis les choses suivantes :

<div id="corps">
Site en construction , merci de votre compréhension !!
<img src="en_construction.gif" alt="en construction"/> 
</div>

#corps{
margin-top= 20px;
margin-left= 500px;
font-weight: bold;
font-size= 50px;
}

Mais je ne comprends pas , genre la taille des polices n'est pas prise en compte et le positionnement ne se fait pas comment je le voudrais .

Je vais encore essayer de regarder ça ce soir .

Egalement cette histoire de % à la place des px .

[marc.suisse]

En y réfléchissant , je me demande si avoir bien fait d'avoir utiliser les propriétés margin pour positionner mes blocs .

Je crois plutôt qu'il faudrait que j'utilise top: , left: , right: , bottom: , .

A votre avis ?

[zoup1]

J'ai pas vraiment suivi le signe, mais il faut que tu remplaces les = par des : dans tes définitions CSS

#corps{
margin-top: 20px;
margin-left: 500px;
font-weight: bold;
font-size: 50px;
}

Je te conseille d'utiliser firefox avec l'extension firebug pour faire tes développement... cela te permet facilement de visualiser et de modifier les propriétés CSS de tes objets et de visualiser immédiatement le résultat.

C'est ultra cool...
https://addons.mozilla.org/fr/firefox/addon/1843

[marc.suisse]

Voilà , cette fois j'arrive à quelque chose , donc en pourcentage le site devrait donc s'adapter à la résolution de l'ordinateur qui le visionne :

http://www.telepermanence.ch/

Voilà le code CSS modifié :

body {
background: #ff9900 ; 
}

#titre{
color: white;
font-size: 50px;
font-family: "Arial", Verdana, serif;
top: 5% ;
position: absolute ; 
left: 15% ;

}

#sous_titre{
color:white;
font-size: 50px;
font-family: "Arial" , Verdana , Serif ;
position: absolute ; 
top: 15% ; 
left: 25% ; 
}

#menu{
font-weight: bold;
font-size: 22px;
font-family: "Comic Sans MS", Arial, Verdana, serif;
position: absolute ; 
top: 40% ;
left: 8% ;

}

a
{
color: navy;
text-decoration: none;
}

a:hover
{
color:blue;
}

a:active
{
color: white ;
}


ul {

color: navy;

}

#corps{
position: absolute ; 
top: 50% ; 
left: 40% ;
font-size: 20px ;


}

#pied_de_page{
position: absolute ; 
top: 90% ;
left: 40% ;

}

Je te conseille d'utiliser firefox avec l'extension firebug pour faire tes développement... cela te permet facilement de visualiser et de modifier les propriétés CSS de tes objets et de visualiser immédiatement le résultat.

Je ne comprends pas très bien , cela signale les bugs ?

[zoup1]

Je ne comprends pas très bien , cela signale les bugs ?

oui, entre autre, cela signale les eurreurs CSS, Javascript aussi...
Cela permet de debugguer le Javascript (positionner des points d'arrêts et de visualiser des variables...)
Mais aussi visualiser les propriétés d'un objet dans une page ; Ses propriéts DOM et CSS complètes avec la cascade d'héritage. Tu peux également les modifiés directement, sans avoir besoin de recharger ta page...

L'essayer c'est l'adopter !!!!!!!!!

[invite82b4d03d]

Bravo, t'avances bien depuis la dernière fois que je suis passé sur le forum, t'as même mis le site en ligne, par contre quand on te parlait de %, il faut pas non plus en mettre partout... Il y a des choses qui doivent rester fixes, si tu vois ce que je veux dire... non ? change la taille de ton navigateur en essayant plusieurs tailles au hasard, tu verras les textes se chevaucher...
Pour FileZilla, si tu ne peux pas tout effacer, c'est parce que c'est pas tout le contenu qui est le site, quelques dossiers servent pour y stocker les infos de ton site (comme les log du serveur...) Ton site est dans le dossier web, donc il n'y a que dans web que tu peux tout sauvegarder et tout supprimer pour mettre ton site... mais c'est surement déjà fait puisque ton site est en ligne. Par contre ce que tu pouvais faire et que je redis à plein de monde, c'est que quand il y a une balise qui sert spécialement à afficher un titre (par exemple), c'est pas très joli d'utiliser une balise div pour la remplacer...
Au lieu de div titre et div sous titre, tu mes juste une balise h1 par exemple avec tes 2 lignes séparées par 1 ou 2 <br /> (retour à la ligne normal sans faire un nouveau paragraphe) Et si tu veux mieux régler l'espacement entre les lignes plutôt que de jouer avec les retours à la ligne, il existe une propriété CSS pour définir l'espacement des lignes, mais je ne me souviens plus de son nom. Il y a même une propriété CSS qui écrit automatiquement le texte en majuscule plutôt que de le faire toi même.
Désolé si vous trouvez que je parle trop

[marc.suisse]

Hello

change la taille de ton navigateur en essayant plusieurs tailles au hasard, tu verras les textes se chevaucher...
Il y a des choses qui doivent rester fixes, si tu vois ce que je veux dire... non ?

Honnêtement pas , j'ai cru qu'il fallait positionner chaque bloc et donc mettre des pourcentages pour réagir avec l'écran de celui qui le visionne.

Au lieu de div titre et div sous titre, tu mes juste une balise h1 par exemple avec tes 2 lignes séparées par 1 ou 2 <br /> (retour à la ligne normal sans faire un nouveau paragraphe)

Mais tu veux dire en laissant quand même le div titre ?

Car si j'enlève tout et si je mets le titre avec les balises h1 , je n'arrive pas à la grandeur de texte voulue .

Merci encore de ton aide

[invite2d24c6c6]

ce qu'il veut dire (du moins d'après ce que j'ai compris ) c'est qu'au lieu de mettre div titre tu mets <h1> et tu fait pareil dans ton CSS(h1 pas #h1 hein ). La balise h1 est faite pour encadrer les titres donc il faut s'en servir!
Si tu la redéfinie après dans ton CSS sa fait exactement pareil que si tu mets div titre.
Pour les sous-titre tu as h2, h3, etc (je sais plus jusqu'à combien sa va )

[marc.suisse]

Salut

Je comprends mieux , merci de la précision

Et concernant cette histoire de pourcentages , c'est quoi qui serait en trop dans mon CSS ?

Merci encore .

[invite2d24c6c6]

Pour les pourcentages je peut pas trop t'aider j'ai toujours fait sa au pif (tu test sa marche pas tu change jusqu'a ce que sa marche mais une explications plus clair serait mieu je pense ^^.)

[marc.suisse]

Hello

Ok merci pour ton explication

Par contre en faisant comme ça , je n'ai pas encore compris comment faire pour faire en sorte que le Telepermanence soit décalé juste au milieu en dessous du bienvenue sur le site de ...

Pour être clair , je ne sais pas comment faire des espaces .

Car même si je définis la position de h1 dans le CSS , je déplace simultanément le titre et le sous titre .

En gros , ce n'est pas clair

Sinon concernant les pourcentages , je n'ai pas encore compris , mais peut être qu'il ne faut pas mettre de pourcentages pour le titre ....

Suis un peu perdu là , bon vais me coucher

Ciao ciao MARC ..

[invite2d24c6c6]

BIENVENUE SUR LE SITE DE
TELEPERMANENCE
Alors déjà mets toute cette phrase dans une seule et même balise (h1) et tu définie l'alignement de ta div <h1> comme ça:
h1{
....
text-align: center;
}
Normalement ton texte sera comme tu le souhaite

[marc.suisse]

Hello

Je te remercie

Je viens d'essayer , j'ai juste rajouter 2 lignes .

h1{
text-align: center;
font-size: 45px;
color: white;
font-family:Arial , "Comic Sans MS", Verdana, serif;
}

Cela donne exactement comme je le souhaite .

Voilà si jamais le XHTML :

<h1>BIENVENUE SUR LE SITE DE
TELEPERMANENCE</h1>

Je vais le mettre en ligne direct .

Merci encore

[invite2d24c6c6]

De rien!
Mais tu ne devrait pas plutôt faire un belle bannière plutôt que du texte?
Enfin après voit avec ceux qui t'ont demandé le site