Discussion :

[criscaro]

bonjour,

Je savais bien que j'aurai encore besoin de vous !

mon tit problème est le suivant :

création d'un menu vertical
ajout d'une image de fond

je n'arrive pas à positionner les éléments du menu sur l'image !!!! j'y suis restée jusqu'à 3h du matin à lire et relire moult forum sans vraiment trouver de réponse satisfaisante. voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="menu">
	<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Galerie d'atouts d'Henner</a></li>
	<li><a href="#">Galerie d'atouts de M&eacute;ladius</a></li>
	<li><a href="#">Pr&eacute;sentation des P. J.</a></li>
	<li><a href="#">Journal de Campagne</a></li>
	<li><a href="#">B&ecirc;tisier</a></li>
	<li><a href="#">L'antre du Ma&icirc;tre de Jeu</a></li>
	</ul>
</div>

et

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
div#menu {
	float:left;
	width:25%;
	height:60%;
	background-image: url("img/menu_parchemin.gif"); 	/* arrière-plan général du menu */
	background-repeat: no-repeat; 
	color: #CC0000;
	font-size: 130%;
}
 
	.ul, li {	/* utilisation de liste pour le menu */
		list-style-type: none;	/* suppression des puces de liste */
		margin:0;
		padding:0;
		margin-top: 20px;
		margin-bottom: 10px;
 
	}
 
	.ul {
		position: absolute;	/* positionnement pour IE5 et IE5.5 */
		padding-top: 30px;
		text-align: left;
 
	}
 
	.li{
		display: inline;
	}  /* correction pour IE5 et IE5.5 */

attention, je débute tant en css qu'en html ! et en plus je suis blonde (non, je rigole) !

si ce n'est pas trop abuser, auriez-vous un bon bouquin (ou plusieurs) à me conseiller pour css et html car faire et rechercher en mm temps sur le net, c'est pas simple.

merci d'avance de vos conseils éclairés.

[MasterOfChakhaL]

Salut,

en ce qui concerne les bouquins, il ya une page consacrée dans la section web:
http://web.developpez.com/livres/

peut-être y trouveras-tu quelque chose qui t'interesse...

[criscaro]

bonsoir et merci,

je m'en vais lire les critiques pour commencer et j'espère choisir les bons !!!

question subsidiaire : je vois souvent html et xhtml ; quelle est la différence entre les deux ? quel est celui qui doit être utilisé en priorité ?

bonne soirée

[MasterOfChakhaL]

salut,

en gros, le xhtml est l'évolution du html.
Le xhtml est en fait du XML, il ya quelques contraintes sur la syntaxe.
Si on ne connait ni html ni xhtml, je pense qu'il serait faux de dire que le xhtml est plus compliqué.

Comme le xhtml est plus formalisé et plus carré, théoriquement, cela doit permettre aux éditeurs de navigateur web de plus facilement implémenter les recommandations du w3c.
Un langage bien formalisé offre la possibilité de créer des outils qui automatisent certaines choses.
Le premier exemple qui me vient à l'esprit est le validateur en ligne du w3c. Franchement, c'est t'y pas beau, tu balances une url et tu vois les erreurs directement... (c'est vrai qu'il faut un peu s'habituer aux messages qui peuvent être déroutant au début, c'est très technique parfois)

Ce n'est que mon avis, mais je pense que tout le monde te conseillera le xhtml.

Corrigez moi si j'écris des énormités

[criscaro]

re

ben voila une réponse claire au moins ! donc, je vais orienter mes achats de bouquins sur html ET xhtml (ne serait-ce que pour faire valider mes futures pages web par w3c) !

j'ai encore du pain sur la planche ... et vu à l'allure à laquelle j'avance, je vais encore me faire quelques noeuds au cerveau, mais bon faut ce qu'il faut

merci à toi donc

[MasterOfChakhaL]

Alors bon courage à toi.

N'hésite pas à venir poser des questions si tu galères dans tes réalisations. (Mais n'oublie pas de faire des recherches avant de poster ).
C'est surtout en se frottant à des problèmes concrets qu'on avance.

Personnellement, j'ai appris avec des tutos en ligne mais l'investissement dans un bouquin de référence ne me parait pas dénué de sens. C'est surtout mon portefeuille d'étudiant qui avait fait le choix pour moi...

[trotters213]

Pour ce qui est du placement de ton menu, nous n'avons pas l'image donc c'est dur de te filer une réposne par contre tu peux essayer en donnant un id à chacune de tes balises <li> et de placer chacune de ces balise an position:absolute puis de jouer sur les attribut left et top our les placer au pixel près.
Je ne vois pas comment tu pourrais faire différemment

[Orgied]

salut

Le premier exemple qui me vient à l'esprit est le validateur en ligne du w3c. Franchement, c'est t'y pas beau, tu balances une url et tu vois les erreurs directement

juste pour une petite précision: le validateur va mettre le doigt sur tes erreurs syntaxiques pour le xhtml. cette syntaxe, même si elle est valide, ne sera pas forcement comprise par tout les explorateurs pour autant. Dans ce genre de cas, il faut le plus souvent fureter sur les forums pour trouver des solutions alternatives.

[MasterOfChakhaL]

Je suis d'accord,

C'est pour ca que l'outil s'appelle "Validateur" et non "Magicien"

Tu conviendras tout de même qu'avoir un xhtml valide est une première étape obligatoire.
Pour moi, si on doit bidouiller (c'est pas le meilleur mot), ca se passe sur le css. Aucune concession ne doit être faite sur le xhtml qui porte le sens du contenu...

[Orgied]

Salut

oui c'est tout à fait vrai, le plus souvent, on va tenter une autre approche via les CSS.

de mémoire, le seul bidouillage que j'ai du faire au niveau html, c'est avec les balises Flash qui posent de gros problème en terme de validation...

sinon, la validité des tableau est un peu confuse puisqu'on peut effectuer différents types de mise en forme (<table><tr><td> ou <table><thead><thfoot><tbody> ou encore <table><tr><th><tr><td>). C'est un peu au choix du développeur...

[criscaro]

bonjour, bonjour !!!!!

merci de vos réponses !!!!!

alors d'abord, je vous joins un screen shot (si j'y arrive) pour que vous voyez mes problèmes, sachant que j'ai résolu celui du pied de page (ça fait un de moins)

en fait, je travaille sur du texte et des images que l'on m'a fourni et je tente des les mettre en ordre dans la page d'acceuil.

j'ai passé ma css et mon htlm au W3C, je n'ai que des erreurs mineures pour l'instant.

je suis en htlm 4.01 transitional.

voila pour les infos complémentaires.

merci de vos idées et indications pour que je puisse me corriger !

bonne journée

[Bisûnûrs]

Ajoute à ton div#menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

padding-top:35px;

Evidemment tu peux moduler le padding pour que ça tombe parfaitement.

[criscaro]

bonjour bisûnûrs !!!!

trop bien, ça marche, mais pourquoi n'y ai-je pas pensé ?????

merciiiiiiiiiiiiiiiiiiiiiiiiiiii !!!!

ça faisait un moment que ça me prenait la tête, en fait je rajoutais un padding-top mais sur ul, li donc ça me mettait la pagaille, forcément.

bon me restera que l'image qui passe sous mon texte : j'ai essayé de mettre float: left ; mais ça marche pas .... grrrrrrrr

une idée !

bonne journée