Création de site, XHTML, CSS

invite2d24c6c6 · 04/06/2008, 07h38

Envoyé par marc.suisse

Hello

Des kits graphique me permettant d'éviter de créer moi-même l'arrière plan du site , c'est déjà ça en moins pour l'instant pour pouvoir apprendre le reste .

Est-ce une bonne idée ?

Je ne sais pas si tu connait les CMS mais c'est un outils bien pratique pour mettre en place un site sans avoir une connaissance des langage web très pousser.
Joomla! est un CMS que j'ai utilisé pour une réalisation de site il est bien pratique et surtout il y a plein de doc et d'aide sur internet!
Maintenant pour un site de presentation ce n'est peut être pas le mieux! A toi de voir après

Cette discussion provient de la scission d'une discussion précédente.
JPL, modérateur

**marc.suisse** · 07/06/2008, 22h23

Bonsoir à tous

J'avance gentiment mais sûrement dans l'apprentissage du code HTML et du CSS grâce au très bon cours du site du zéro .

J'ai d'ailleurs commandé le livre écris par l'auteur des cours de ce site , histoire d'avoir quand même un livre dans les mains .

Cymoud

Je te remercie beaucoup de ton explication clair et détaillée .

Je vais continuer à apprendre le codage HTML et autre et ensuite je te reposerais des questions plus précise dans le but d'envoyer les fichiers que j'aurais écris sur le serveur de l'hébergeur .

Sinon j'ai un programme appelé FTP Expert v1 , cela irait pour envoyer les fichiers sur le serveur ?

Merci encore de ton aide

Envoyé par marc.suisse

Mais il n'existe pas des hébergeurs gratuits ?

Envoyé par Bruno

Si : Olympe Network. Sinon, pour les pas cher il y a OVH (1and1 a des pratiques de facturation étranges : tu dois résilier par recommandé, alors qu'il suffit d'arrêter de payer chez d'autres, certains se sont retrouvé avec de jolies factures au bout de plusieurs mois).
04/06/2008 01h41

Pour l'instant je vais laisser comme ça et quand j'aurai un peu mieux compris le monde de la création de sites , je me poserais la question si changer ou pas d'hébergeur .

Envoyé par Kedja

Je ne sais pas si tu connait les CMS mais c'est un outils bien pratique pour mettre en place un site sans avoir une connaissance des langage web très pousser.
Joomla! est un CMS que j'ai utilisé pour une réalisation de site il est bien pratique et surtout il y a plein de doc et d'aide sur internet!
Maintenant pour un site de presentation ce n'est peut être pas le mieux! A toi de voir après

Je te remercie , je vais faire quelques recherches sur ce logiciel , je te redis .

**Bruno** · 08/06/2008, 00h07

Envoyé par marc.suisse

Sinon j'ai un programme appelé FTP Expert v1 , cela irait pour envoyer les fichiers sur le serveur ?

Salut,

Ce programme a l'air trop compliqué et bcp de fonctions inutiles, prend-en un plus simple comme FileZilla.

invite82b4d03d · 08/06/2008, 22h25

Il est nickel FTP Expert à part que sur la capture, il a l'air à peu près comme FileZilla (tous les logiciels FTP se ressemblent), qu'il est payant alors que FileZilla non, et qu'il est plus compliqué et que si tu utilises FileZilla, je me ferais une joie de t'aider si tu as un problème avec alors que FTP Expert, je ne le téléchargerais pas pour te dire quoi faire

Sinon pour envoyer les fichiers au serveur, tu peux me demander, si je ne répond pas sur le forum parce que ça fait trop longtemps, PM moi

Bonne chance pour ton apprentissage.
Essai quand même un kit graphique gratuit du lien que je t'ai donné dans mon précédent message, c'est un bon exemple de page web bien codée en HTML et CSS, tu peux t'en inspirer et c'est toujours plus facile de comprendre avec des exemples concret enfin je crois

A voir en vidéo sur Futura · Aujourd'hui

**marc.suisse** · 09/06/2008, 21h24

Hello

Ok , alors j'utiliserais FileZilla

Merci beaucoup encore de ton aide

J'ai téléchargé un exemple de kit graphique et je suis en train d'essayer de comprendre quelque chose , car c'est encore assez obscure.

Dans l'exemple suivant , j'ai voulu modifier la taille du titre " telepermanence " en mettant h3 à la place de h1 , en voulant visualiser le résultat , je me rends compte qu'il n'y a aucun changement par rapport à avant .

Code HTML:

</head>
<body>
<div id="page" >
	<div id="header"> 
		<div id="navbar">
			<ul>
				<li id="Acceuil"><a href="index.html">home</a></li>
				<li id="news"><a href="news.html">news</a></li>
				<li id="links"><a href="links.html">links</a></li>
				<li id="about"><a href="about.html">about</a></li>
				<li id="contact"><a href="contact.html">contact</a></li>
				</ul>
			</div> <!-- end of navbar -->
		<h1 id="title">Telepermanence</h1>
			<p id="slogan">standard | design</p>
	</div> <!-- end of header -->

J'ai donc été dans le fichier CSS

Code HTML:

#title {
     color: #ffffff;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
     text-align: right;
	 font-size: 2.2em;
     position: relative;
     right: 35px;
     top: -85px;
     }

Et là en modifiant l'attribut font-size ( c'est bien un attribut ? ) , j'arrive à modifier la taille du titre , donc si je comprends bien , le CSS prends la supériorité dans ce cas de figure ?

Sinon , que pouvez-vous me dire sur les balises div ? Car mon exemple en est pleins .

Merci d'avance de votre aide

invite82b4d03d · 09/06/2008, 23h01

Salut, oui oui le CSS prend le dessus sur les balises concernées. Pour faire simple, chaque balise a des attributs par défaut fixés par le navigateur que tu utilises et ces attributs peuvent varier d'un navigateur à l'autre. Avec le CSS, tu définis les attributs que tu veux sur la balise (en tenant compte quand même des attributs supportés par la balise utilisée) et les valeurs que tu donnes aux attributs permettent d'afficher ton texte ou ou autre exactement comme tu veux.
Pour le div, il s'agit d'un conteneur universel (enfin j'appelle ça comme ça, je sais pas si ça s'appelle vraiment comme ça...) Tu peux te le représenter en tant que bloc, c'est une boite

Les balises div sont souvent utilisées alors qu'elles peuvent être remplacées par une autre balise plus appropriée. Par exemple la balise <p> qui désigne un paragraphe, il s'agit en fait d'un bloc avec une marge par défaut, une alinéa prédéfini par le navigateur... Bas le div rassemble tous les attributs possibles dans un bloc, les marges extérieurs, les mages inférieurs, la couleur ou l'image de fond, la bordure du bloc (applicable aussi à <p>), la position relative ou absolue du bloc... C'est souvent pour la position et la taille que sont utilisés les bloc de balise div.
Ce que tu peux faire pour visualiser concrètement le bloc div, c'est lui attribuer une bordure solide de 1px d'épaisseur, c'est ce que je fais souvent quand je fais une page web plutôt que de travailler dans l'abstrait...
Donc pour ça, dans le CSS, pour chaque bloc div ou autre blocs qui le supportent (<p> par exemple ou <td> qui est une cellule de tableau), tu peux ajouter la ligne border: 1px solid black;
1px pour l'épaisseur, solid pour dire que c'est une ligne continue et non pointillée ou autre, et black pour la couleur, une couleur par div c'est pas mal et quand tu t'y retrouves, tu vires les bordures. Tu as plein de couleurs en anglais, black, red, green, blue, yellow... et plein d'autres.
Encore un détail au cas où sur position: relative; right: 35px; top: -85px;
Là la balise h1 utilisée pour le titre a une position relative qui s'ajoute à la position du dernier bloc défini si mes souvenirs sont bons... donc le titre apparaitra 85 pixels plus haut que la liste des liens je crois, j'ai pas testé mais si c'est ça, j'ai bon

H1 est un titre prédéfini mais tu peux changer ses attributs sans changer de balise, ça ne pose pas de problème, si tu veux changer la balise, change la aussi dans le CSS. Utiliser les balises par défauts te permet de personnaliser plusieurs balises de titre avec des tailles, couleurs, polices... différentes.
J'ai tout répondu je crois, bonne nuit

**marc.suisse** · 10/06/2008, 21h31

Hello

Tu parles de position relative , cela tombe bien .

Tout en haut du graphique , il y a des mots cliquables ( des ancres si je me souviens du cours ) .

Ils étaient disposés un peu en vague , voir la capture d'écran que je mets en pièce jointe .

Je me suis dis que j'allais modifier ces mots pour mettre les miens , mais simplement on changeant le nom , ben les mots se décalent dans la page .

J'ai voulu modifier les paramètres dans le fichier CSS , par exemple top , width , mais ils sont sans effets , pourquoi ??

Ci-dessous le code HTML et CSS

Code HTML:

" >
	<div id="header"> 
		<div id="navbar">
			<ul>
				<li id="acceuil"><a href="index.html">Accueil</a></li>
				<li id="dépannages"><a href="dépannages.html">dépannages</a></li>
				<li id="satellite"><a href="satellite.html">satellite</a></li>
				<li id="Interphones"><a href="about.html">Interphones</a></li>
				<li id="contact"><a href="contact.html">contact</a></li>
				</ul>
			</div> <!-- end of navbar -->
		<h1 id="title">Telepermanence</h1>
			</div> <!-- end of header -->
	<div id="wrapper">
		<div id="submenu"> 
			<h3 class="menutitle">MENU</h3><ul>
					<li><a class="menuactive" href="#">item1</a></li>
					<li><a href="#">item2</a></li>
					<li><a href="#">item3</a></li>
					<li><a href="#">item4</a></li>
					</ul>

Code HTML:

#navbar a {
     color: #ffffff;
     font-family: Arial, Helvetica, sans-serif;
     font-size: .75em;
}

#navbar a:hover {
     color: #650B14;
}

#Acceuil {
     position: relative;
     width: 75px;
     left: 225px;
     top: -2px;  
}



#dépannages {
    position: relative;
	left: 330px;
    top: 54px;
	width: 75px; 
}



#satellite{
     position: relative;
     left: 460px;
     top: 99px;
     width: 75px; 
}



#Interphones {
     position: relative;
     top: 128px;
     width: 75px;
     left: 620px; 
}



#contact {
     position: relative;
     left: 790px;
     top:128px;
     width: 75px; 
}

Je te remercie d'avance

A propos , tu crées des sites internet pour le travail ?

C'est super sympa en tout cas

invite82b4d03d · 11/06/2008, 10h17

Pour la simple et bonne raison qu'un ID en CSS ne doit pas contenir d'accent donc ton lien dépannage n'a pas le style CSS que tu lui as attribué et se calle juste en dessous de Accueil.
Remplace id="dépannages" par id="depannages" par exemple
et #dépannages par #depannages
Et non ça ne s'appelle pas des ancres mais des liens. Les ancres sont des positions repérées dans la page pour y accéder à partir d'un lien, là ce n'est pas le cas, tes liens ouvrent d'autres pages.

**marc.suisse** · 11/06/2008, 21h07

Hello

Je viens d'essayer et effectivement cela va bien mieux

Mais n'empêche , cela me dérange d'avoir une sorte de faute d'orthographe dans cette banière .

Il n'existe pas une solution pour pouvoir mettre quand même un accent sur les mots qui le nécessite ?

Sinon je viens de recevoir le livre que j'avais commandé :

http://www.amazon.fr/gp/reader/22121...pt#reader-link

Un bon livre de chevet en perspective

Du même auteur du " site du zéro " , c'est donc une bonne référence .

invited78e0bbb · 11/06/2008, 23h20

Mouais... Pour les débutants débutants très bien mais bon si tu veux pousser un peu il faudra changer de site.
Sinon pour les accents tu t'en fiches un peu lorsqu'il s'agit d'un id personne ne le verra c'est vraiment pas important de mettre depannage au lieu de dépannage. Te complique pas la tâche, en général les accents en programmation on essaie d'éviter.
Par contre si tu veux écrire dépannage dans ta page XHTML tu devras écrire dépannage.
Une liste sur le premier site que j'ai trouvé :
http://usinaquiz.free.fr/html/accent.pdf
voila
bonne nuit

invite82b4d03d · 11/06/2008, 23h58

Oui, je t'ai dis de retirer l'accent sur l'ID depannage, pas sur le mot qui s'affiche sur la page...
flostein a raison il vaut mieu remplacer tes accents par leur code HTML ( é = é )
Par contre pour les ID, il n'en faut pas du tout, ni même son code HTML.

**Towl** · 12/06/2008, 06h24

Hum ? pourquoi continuer à vouloir utiliser les horribles &eacutes et autres ? On a tout à fait la possibilité d'utiliser les accents directement. Il suffit juste que le serveur précise quel encodage utiliser (UTF-8 généralement) et d'enregistrer son fichier avec.
Après, je ne sais pas comment cela marche sous windows pour changer l'encodage. Mais cela fera beaucop plus propre et facile à relire

**marc.suisse** · 12/06/2008, 07h04

Bonjour à tous et merci de vos réponses

Envoyé par flostein

Mouais... Pour les débutants débutants très bien mais bon si tu veux pousser un peu il faudra changer de site

Je suis un débutant-débutant .

Envoyé par flostein

Sinon pour les accents tu t'en fiches un peu lorsqu'il s'agit d'un id personne ne le verra c'est vraiment pas important de mettre depannage au lieu de dépannage

Envoyé par Cymoud

Oui, je t'ai dis de retirer l'accent sur l'ID depannage, pas sur le mot qui s'affiche sur la page...

Ok , j'ai compris , j'ai confondu ID et le mot en lui-même qui s'affichera sur la page

Ah ces apprentis , ils n'écoutent rien

Envoyé par Towl

Hum ? pourquoi continuer à vouloir utiliser les horribles &eacutes et autres ? On a tout à fait la possibilité d'utiliser les accents directement. Il suffit juste que le serveur précise quel encodage utiliser (UTF-8 généralement) et d'enregistrer son fichier avec.
Après, je ne sais pas comment cela marche sous windows pour changer l'encodage. Mais cela fera beaucop plus propre et facile à relire

Bon alors là , mon niveau me permet de ne comprendre que moyennement cette affirmation

invited78e0bbb · 12/06/2008, 07h54

L'UTF-8 ? pour ce qu'il souhaite faire ? Tu m'expliques l'utilité ?
La norme ISO 8859-1 qui correspond à l'alphabet latin est largement suffisante.
Tu déclares le type d'encodage dans le charset.
et j'imagine que tu veux afficher les accents ensuite en utilisant des é
tout de suite c'est plus clair...

invite82b4d03d · 13/06/2008, 00h01

Envoyé par Towl

Hum ? pourquoi continuer à vouloir utiliser les horribles &eacutes et autres ? On a tout à fait la possibilité d'utiliser les accents directement. Il suffit juste que le serveur précise quel encodage utiliser (UTF-8 généralement) et d'enregistrer son fichier avec.
Après, je ne sais pas comment cela marche sous windows pour changer l'encodage. Mais cela fera beaucop plus propre et facile à relire

On utilise &eacutes car l'affichage des accents ne dépend pas que du serveur !
Chaque système avec navigateur a son codage de caractère. Si sur Windows, le codage est le même pour tout le monde par défaut, sur linux, ce n'est pas forcément le même. Combien de fois j'ai vu des petits carrés ou des points d'interrogation à la place des é,è,ê,à ou ù... sur linux en me promenant sur une page web ? Si tout le monde utilisait leur équivalent en code HTML, ce qui permet au navigateur d'afficher le bon caractère, je n'aurais même pas eu besoin de chercher pendant 3h sur Internet comment changer le codage par défaut de tout mon Linux... (Bon ok il suffisait de modifier dans Firefox mais je n'avais pas le problème que dans les pages web)

marc.suisse, t'occupes pas de tout ça, utilise les codes HTML pour tes accents pour garantir que tous les navigateurs de tous les OS l'affichent comme tu le souhaites, c'est plus propre et ça a pour but la bonne compatibilité de tes pages web.

Merci flostein

invite82b4d03d · 13/06/2008, 00h07

Elle est jolie ma capture non ? J'ai mis Firefox en UTF-8 pour avoir ça... Comme quoi c'est pas la solution ^^
Ce forum ne fait même pas la conversion automatique des accents en codes HTML, je suis surpris...

**JPL** · 13/06/2008, 00h17

Ces codes sont une méthode archaïque et le forum n'a pas à convertir les caractères accentués comme tu le dis ! Que diable, tous les navigateurs ont bien l'option ISO 8859-1 ou bien la détection automatique de l'encodage, pourvu que celui-ci soit spécifiée dans le Head de la page sous la forme :
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Et puis mettre à la main un encodage baroque qui ne correspond pas à la page, c'est nul !

**Towl** · 13/06/2008, 06h31

L'UTF-8 ? pour ce qu'il souhaite faire ? Tu m'expliques l'utilité ?

On trouve de plus en plus de systeme et/ou documents en UTF-8. Après c'est vrai que j'avais zappé que Windows n'est pas en UTF-8 par défaut et qu'il n'est peut etre pas trivial de le faire.

Ensuite, cela peut etre interressant de passer directement en UTF-8 si un jour il souhaite mettre des caractères non latin sur une page, pour ce que cela coute.

Mais l'ISO 8859-1 convient bien aussi, il faut juste penser à le signaler, comme n'importe quel encodage

@Cymoud : il ne faut jamais forcer l'encodage d'une page dans le navigateur, sauf si le site à été développé avec les pieds (annonce d'UTF-8 par le serveur avec une page en ISO 8859-1 par exemple). Et sincèrement, les sites avec des ?, on en voit plus (enfin ca doit faire des années que j'en ai pas vu

)

invite82b4d03d · 13/06/2008, 09h42

Moi non plus j'en vois plus des "?" mais sur Linux, selon les distributions, j'en vois encore des fois... Et ce n'est pas toujours la faute du serveur... Je vois souvant des gens faire une page web sous Windows et en la transférant sur un serveur linux, ça s'affiche mal... Quoi que c'est pas fréquent, ce que je vois le plus, ce sont les quelques personnes qui font directement leur page web sur Ubuntu et qui l'envoient au serveur et là ça s'affiche encore mal...
Enfin bref, tant mieux si le codage est bien choisi par défaut et qu'on fait pas un site avec les pieds, mais en utilisant ce que tu appelles la méthode archaïque, même en changeant volontairement ou non le codage de la page ou du navigateur, la page s'affichera toujours aussi bien...
marc.suisse, je t'attends pour la suite si tu as besoin d'aide (ce débat n'a rien à faire sur son petit topic de création XHTML/CSS...)
Fais comme tu veux pour les accents, si tu vois que ça passe sur la majorité (sur Windows et les Linux récents bien configurés) alors ça devrait te suffir comme dit JPL et Towl, tant pis pour la minorité qui c'est fait une debian ou shlakware fait maison avec le mauvaise codage !

**marc.suisse** · 17/06/2008, 21h16

Bonsoir à tous

Ok pour les accents , j'en prends bonne note

J'ai un petit soucis de mise en page sur le site que je suis en train de faire .

Si vous prenez la capture d'écran que j'ai faite de mon site , on remarque que le Telepermanence est trop bas par rapport à la première ligne .

J'ai essayé divers choses pour essayer de le remonter , mais sans succès .

Pour info , j'ai mis l'ID "banniere" pour le Telepermanence .

Ci-dessous le code HTML et CSS .

Code HTML:

<!-- saved from url=(0022)http://internet.e-mail -->
<!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>
<title>TELEPERMANENCE </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="header">
			 <p>BIENVENUE SUR LE SITE DE</p>
			 </div>
			 <div id="banniere">
			 TELEPERMANENCE 
			</div>
			<div id="menu">
				<ul>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Dépannages</a></li>
					<li><a href="#">Réparations</a></li>
					<li><a href="#">Téléréseau</a></li>
					<li><a href="#">Antennes satellites</a></li>
					<li><a href="#">Interphones</a></li>
				</ul>
			</div>
			<div id="stuff">
			<p><h2>N'hésitez pas à naviguer sur le site<h2/><p>
			<br /><br />

Code:

#header {
width: 746px;
height: 106px;
margin: 0px 0px 100px 150px;
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: justify;
font-family: "Georgia", Arial, Verdana, serif;
padding: 12px; /* Marge intérieure de 12px */

}


#banniere{
width: 746px;
height: 106px;
color: white;
font-size: 50px;
font-family: "Arial", Arial, Verdana, serif;
margin-left:250px;
margin-top: 20px


}


/*                    Menu                   */
#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
color: rgb(243,65,243);
font-weight: bold;
font-size: 18px;
font-family: "Comic Sans MS", Arial, Verdana, serif;
margin: 0px 0px 100px 150px;

Merci beaucoup d'avance

invite82b4d03d · 18/06/2008, 00h42

Salut
font-family: "Arial", Arial, Verdana, serif;
Il s'agit là de mettre une liste de priorité des polices que tu veux utiliser... Là tu as mis "Arial" puis Arial, ça ne sert à rien, tu peux en supprimer un... Ensuite les guillemets servent si le nom de la police fait plusieurs mots. Donc voila, c'est pour les ordi qui n'ont pas la première police que tu demandes, le navigateur les essaie une par une... Mais ça ne résout pas ton problème.
Ensuite pour le reste je crois que tu étais fatigué en l'écrivant...

</h2> et non pas <h2/>
ton <div id="stuff"> n'a pas de </div> pour finir
dans ton CSS il manque l'accolade } qui ferme #menu

S'il manque la fin de tes 2 fichiers, j'attends leur version intégrale ou les fichiers eux-même si tu ne peux pas tout copier dans ton message.
Une fois que j'aurais tout je pourrais tester et voir d'où ça vient... Mais tu peux essayer de mettre margin: 0px 0px 50px 150px; au lieu margin: 0px 0px 100px 150px;, ça fait remonter ton div banniere.
Sinon pour éviter d'envoyer tes sources à chaque fois, tu peux mettre ta page en ligne quelque part et nous laisser le lien quand ça va pas...

**marc.suisse** · 18/06/2008, 20h43

Hello

Envoyé par Cymoud

Ensuite pour le reste je crois que tu étais fatigué en l'écrivant...

Oui possible , ainsi que pour les polices

, je suis au courant de comment fonctionne cette ligne , si le navigateur n'a pas la première police , il prends la deuxième et ainsi de suite .

Envoyé par Cymoud

Mais tu peux essayer de mettre margin: 0px 0px 50px 150px; au lieu margin: 0px 0px 100px 150px;, ça fait remonter ton div banniere.

Ok , je vais essayer ça

Envoyé par Cymoud

S'il manque la fin de tes 2 fichiers, j'attends leur version intégrale ou les fichiers eux-même si tu ne peux pas tout copier dans ton message.

Je vais devoir remettre au propre le code , car le problème c'est que je suis partis sur le code d'une page que l'on peut télécharger sur un lien que tu m'as donné et j'ai supprimé les choses dont je n'avais plus besoin au fur et à mesure .

Donc si je t'envoie le code source actuelle , tu risques de ne pas comprendre grand chose .

Je vais encore faire des essais , retaper à zéro le code et je te le transmettrais .

invite82b4d03d · 19/06/2008, 08h35

ça marche, bonne chance

**marc.suisse** · 19/06/2008, 21h35

Bonsoir à tous

J'ai juste une question .

Le menu comprenant accueil , dépannages etc ... est directement lié au fichier css grâce à l'ID menu .

J'ai voulu changer la couleur des polices en mettant une couleur dans le css de l'ID menu , mais rien n'a changé.

Par contre , si je change la couleur dans #menu li a:link, #menu li a:visited { , j'arrive à changer la couleur .

Quelqu'un arriverait-il à m'expliquer l'utilité de ces lignes de codes qui sont en relation avec l'ID menu ?

Ci-dessous , le fichier HTML et les différents "blocs menu" .

C'est un reste de l'ancien graphisme et je ne pense pas qu'il me soit utile dans mon cas , mais je suis quand même curieux de savoir .

Je vois aussi un UL , il veut dire quoi ?

Code HTML:

 <div id="menu">
				<ul>
					<li><a href="#">Accueil</a></li>
					<a href="depannages.html">Dépannages</a><br/>
					<a href="reparations.html">Réparations</a>
					<li><a href="#">Dépannages</a></li>
					<li><a href="#">Réparations</a></li>
					<li><a href="#">Téléréseau</a></li>
					<li><a href="#">Antennes satellites</a></li>
					<li><a href="#">Interphones</a></li>
				</ul>
			</div>

Code:

#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
color: rgb(243,65,243);
font-weight: bold;
font-size: 18px;
font-family: "Comic Sans MS", Arial, Verdana, serif;
margin: 0px 0px 100px 150px;
}

#menu li a {
height: 37px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}	
	
#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background:  url(images/off.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}
	
#menu li a:hover {
color: blue;
background:  url(images/on.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}	

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

Merci encore et bonne fin de soirée .

Ciao ciao MARC ...

**marc.suisse** · 20/06/2008, 06h47

Bonjour à tous

je retire la question sur la définition de "UL" , j'ai lu par hasard que c'était pour créer des listes à puces .

invite2d24c6c6 · 20/06/2008, 09h06

Envoyé par marc.suisse

Quelqu'un arriverait-il à m'expliquer l'utilité de ces lignes de codes qui sont en relation avec l'ID menu ?

Tu parle du code CSS en relation avec l'ID menu?
Si oui:
width: 200px; //règle la largeur de ton ID (icic menu) à 200px
height: 100%; //la hauteur de l'ID prend toute la hauteur de la page
margin-left: 10px; //marge externe gauche de 10px
float: left; //ID flottant à gauche
text-align: left; //texte aligné à gauche
color: rgb(243,65,243);//couleur de l'ID
font-weight: bold;//écriture gras
font-size: 18px;//police de 18px
font-family: "Comic Sans MS", Arial, Verdana, serif;// les differentes polices
margin: 0px 0px 100px 150px;// les marge exterieur (en contradiction avec la ligne 3)

Voila j'espère avoir était assez clair

et ne pas avoir dit trop de conneries (sa fesait longtemps que j'avais pas vu de CSS

)

**marc.suisse** · 20/06/2008, 12h15

Hello , merci de ta réponse

En fait non , ce n'est pas tout à fais ça .

Dans le code CSS que j'ai joins , le premier ID que tu as commenté correspond au menu , mais ensuite il y a 3 autres blocs correspondant également au menu , mais appelé #menu li a { , #menu li a:link, #menu li a:visited { , #menu li a:hover { .

C'est ceux que je n'ai pas compris .

invite2d24c6c6 · 20/06/2008, 14h01

ah ok j'ai servie à rien

C'est quoi que tu comprend pas le titre des blocs?
#menu(signifie qu'on se trouve dans l'id menu) li (signifie que les propriétés que l'on va donner dessous seront affecté seulement au texte qui se trouve entre les balises <li> ) a (pareil que pour li) et les :quelque chose sa signifie "l'état" du lien (si il est survoler, déjà activé,etc) pour les différents états les liens va voir la.
J'espère avoir répondu à ta question cette fois

invite82b4d03d · 20/06/2008, 14h09

Une petite précision en plus, si tu modifies directement la couleur de #menu, ça changera la couleur de tous les textes dedans, sauf s'ils sont définis plus précisément après dans ton CSS (#menu li a)
Si tu mes un message à côté de tes liens, il aura la couleur qui se trouve dans #menu, mais là le problème c'est qu'un lien prend automatiquement la couleur bleue et pour changer ça, il faut définir la couleur du texte du lien directement, donc en utilisant #menu li a (ce qui signifie que le style va s'appliquer à tous les liens A de chaque élément de liste LI qui se trouve dans le bloc MENU.
Et donc dans ton cas vue qu'il n'y a que des liens, tu peux supprimer la couleur de #menu sauf si tu comptes mettre du texte dans ton bloc menu ou dans un élément de ta liste... mais sans le mettre en lien.

**marc.suisse** · 23/06/2008, 21h26

Hello

J'ai regardé un peu après tes explications , je commence à mieux comprendre ces #menu li a .

Bon selon le livre , j'ai procédé autrement en mettant a .... .

Je te mets ci-dessous les codes complet HTML et CSS du site dans l'état qu'il est , le code est entièrement repris à 0 , donc tapé par moi , en espérant qu'il soit dans les règles de la sémantique...

Code 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" lang="fr" xml:lang="fr">
<head>
<title>TELEPERMANENCE</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>

<div id="titre">
BIENVENUE SUR LE SITE DE
</div>

<div id="sous_titre">
TELEPERMANENCE
</div>

<div id="menu">
	<ul> 
		<li><a href="#">Dépannages</a></li>
		<li><a href="#">Réparations</a></li>
		<li><a href="#">Téléréseau</a></li>
		<li><a href="#">Interphones</a></li>
		<li><a href="#">Digicodes</a></li>
		<li><a href="#">Antennes satellites</a></li>
		<li><a href="mailto:[COLOR="Green"]##### supprimé[/COLOR]@hotmail.ch">Nous contacter</a></li>
</div>

<div id="corps">
</div>

<div id="pied_de_page">
</div>

</body>
	</html>

Code:

body {
background: #ff9900 ; 
}

#titre{
color: white;
font-size: 50px;
font-family: "Arial", Verdana, serif;
margin-top: 30px;
margin-left: 150px;
}

#sous_titre{
color:white;
font-size: 50px;
font-family: "Arial" , Verdana , Serif ;
margin-top: 2px;
margin-left: 250px;
}

#menu{
font-weight: bold;
margin-top: 100px;
margin-left: 80px;
font-size: 22px;
font-family: "Comic Sans MS", Arial, Verdana, serif;
}

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

a:hover
{
color:blue;
}

ul {

color: navy;

}

Création de site, XHTML, CSS

Création de site, XHTML, CSS

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Comment connaître l'hébergeur d'un site internet ?

Re : Création de site, XHTML, CSS

Re : Création de site, XHTML, CSS

Re : Création de site, XHTML, CSS

Discussions similaires

Avis sur code XHTML/CSS

tutoriaux XHTML et CSS

Creation Site internet, probleme pour aller chercher des données sur un autre site.

création de site