18073 sujets

Questions générales et questions de débutants

[Regler] Soucis lorsque j'essai de meler deux tutos

Bonjour a Tous, et d'avance merci de vous préoccuper de mon problèmes.

Voila, pour la réalisation d'un petit site j'étais repartis du tutos "un design complet en 5 étapes", mais j'aimais bien le menu du tutos "Un menu avec commentaires au survol", alors je fais un "melting pote" (en francais dans le texte Smiley biggrin ), qui donne super mais voila, les balises UL et LI sont redéfini directement pas via l'id menu, et alors tout plante si je remets d'autre puce dans ma page ??? Smiley biggol

J'espère avoir été claire. Merci encore

dth_2003
Modifié par tych (09 Sep 2005 - 10:04)
Bonjour,

heu, non c'est pas trop clair, tu n'a pas une page en ligne ou au moins du code à nous montrer ?

Smiley rolleyes
Bien...

le premier conseil que je peux te donner c'est de faire valider ton code.

Sinon pour les problèmes CSS :

tu définis <ul> de la façon suivante :


ul {
list-style-type: none;
padding:0;
position: absolute; 
top: 225px; /* positionnement du menu, que vous pouvez changer &#65533; loisir */
width: 770px ;
margin: 0 auto ;
border-top: solid 2px #FFF;
}


Donc l'aspect de toutes les liste de la page seront ainsi.

Puisque tu dispose d'un div "content" définis un style pour les listes qui seront présentent dans "content" de la façon suivante :


#content ul {
le style qu'il te faut pour ul dans le texte.
}


tu me suis ?
Il te faut aussi laisser la taille de tes puces de listes en background si tu veux que ça s'affiche convenablement
Bonjour a tous,

Merci de vos conseils, mais je dois avouer que je les ai pas suivis Smiley rolleyes , j'aimais pas vu que cela plantais de toutes façon dans Firefox, alors j'ai faite ainsi : 
UL#menu {
	BORDER-TOP: #fff 2px solid; 
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	PADDING-TOP: 0px; 
	LIST-STYLE-TYPE: none; 
	HEIGHT: 20px
}
UL#menu LI {
	FLOAT: left; 
	TEXT-ALIGN: center;
	PADDING-LEFT: 6px
}
LI#current A:hover{
	background: #000;
}
UL#menu LI A {
	BORDER: #8F0202 1px solid; 
	DISPLAY: block; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 1.2em; 
	WIDTH: 118px; 
	COLOR: #8F0202; 
	LINE-HEIGHT: 20px; 
	TEXT-DECORATION: none
}
UL#menu LI A:hover {
	background: #8F0202;
	border: 1px solid gray; 
	color: #fff;
}

UL#menu A span {     /* définition de la balise <span> inclue dans <a> */
display: none;
}
UL#menu A:hover span {   /* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 25px;
left: 5px;
width: 770px;       /* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
color: #000;
}


Ca c'est pour les styles et dans le body : 
<UL id=menu>
  <li id="current"><a>Accueil</a></li>
  <li><a href="asbl.htm">L'asbl<span>Présentation de notre ASBL, son but, ces raisons d'être, où nous contacter, ...</span></a></li>
  <li><a href="action.htm">Nos Actions<span>Toutes les actions (en image quant ils y en a) entreprises depuis notre créations, les soupers, la vente d'objets, ...</span></a></li>
  <li><a href="projet.htm">Nos Ptojets<span>Les projets en cours cette année, un historique des projets passés, et bien sur les projets futurs ...</span></a> </li>
  <li><a href="aide.htm">Nous Aider<span>Comment nous aider ? Soit par une aide concrète en devenant membre actif, ou simplement par un don ...</span></a></li>
  <li><a href="presse.htm">La Presse<span>On parle de nous dans la presse, retrouver ici les différents articles de de presse de la région.</span></a></li>
</UL>


Mais bon c'est pas encore génial parce que du coup j'arrive plus a rien pour différencier que je suis sur une des pages du menu (avec "current"), vous allez dire mais tu l'as même pas mis, et bien c'est que tout ce que j'ai essayer n'as pas marcher Smiley bawling Donc a vos bon coeur pour une solution qui marche.

Le deuxième probléme c'est l'affichage de l'info entre <span> qui ne se met pas du tout ou il faut. Là encore a vos bon coeur si vous avez une solution.

Enfin je continue a chercher mais un coup de puce de spécialiste serait le bienvenue.

Merci d'avance a vous tous Smiley cligne

Ps: le site que je donnais plus haut a été actualiser avec cette version.
Salut a tous,

Bon j'ai régler certain problème, la position du menu est ok, la défférenciation entre page active ou non également, le seul soucis qui reste c'est le commantaire au survol que je n'arrive pas a placez juste en dessous du menu, alogner a gauche bien sur.

Help me merci.

http://users.skynet.be/fa451520/poureux/

tych
Bonsoir,

J'ai trouvé la solution. et cela marche (normal puisque c'est la solution), je vous mets le code de ma balise span :


UL#menu A:hover span {   /* définition de la balise <span> au survol */
display: block;
position: absolute;
left: 50%; 
width:760px;
width: 682px;
margin-left: -380px;
top: 250px;
text-align: left;
color: #000;
FONT-SIZE: 0.8em; 
}


Et la il se place nickel.

Merci a vous.

t.
Modifié par tych (08 Sep 2005 - 21:13)
Sujet clos
Aller à