28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je crée un menu simple horizontal en bas du conteneur site mais les noms de la liste sont les uns sur les autres (voir dessous le lien emploi) ; encore un problème d'héritage ?

le code html de ce menu horizontal
<div class="menubas">

  <a id="menubas1" title="Contact"  href="contactclub.php">Contacts</a>
<a id="menubas2" title="Adhésion"  href="#">Adhésion</a>
  <a id="menubas3" title="Partenaires"  href="#">Partenaires</a>
 <a id="menubas4" title="Statuts"  href="statuts.php">Statuts</a>
  
</div>


Le code css
 .conteneur div.menubas{
margin:0;}

.conteneur div.menubas a{
	display:block;
	width:100px;
	height:15px;
	float:none;
	color:#0066FF;
	font-size:10px;
	text-align:center;
	text-decoration:none;
	margin-left:2px;
	position: absolute;
	
}

.conteneur div.menubas a:hover{
background-color:#333366;
color:#ffffff;}


Merci encore et toujours de votre aide.

PS: ne faites pas attention aux warnings, c'est normal sous free. Une fois le menu réglé je passe le tout chez l'hebergeur. Mais je sens que je devrais encore vous solliciter Smiley confused

Val
Pour le warning , je pensais à autre chose, en fait c'est
setlocale ("LC_TIME", "fr");
qui ne passe pas.

Si vous savez pourquoi...

Vous allez dire que je raconte n'importe quoi, je vais répondre que c'est mon rhume qui m'a atteind. Smiley confused

Merci

Val
Salut,

j'ai bien l'impression que de cette manière, tu dis à tous les <a> du <div class="menubas"> d'aller se positionner au même endroit.

Organise ton menu sous forme de liste :
Comme celle de ton menu.

Puis tu positionnes la liste, les <li> devront recevoir {display: inline} pour etre à l'horizontal, et <ul> pourra recevoir {text-align: center} pour eviter ton <div align="center">, pour centrer ses éléments internes : les <li>.

Et avec


div.tonmenu ul li a {}


tu pourra changer l'apparence de tes liens sans avoir à leur mettre une id à chacun...

J'éspère t'avoir éclairée et surtout ne pas avoir dis de bétises...
Modifié par Hum (21 Sep 2006 - 15:59)
Si j'ai bien compris ca donne ça pour la partie php
<ul class="menubas">

  <li><a title="Contact"  href="contactclub.php">Contacts</a></li>
<li><a title="Adhésion"  href="#">Adhésion</a></li>
  <li><a title="Partenaires"  href="#">Partenaires</a></li>
 <li><a title="Statuts"  href="statuts.php">Statuts</a></li>
  
</ul>


Et ça pour le css
 .conteneur div.menubas ul li a {
 display: inline
 text-align: center
 width:100px;
	height:15px;
	float:none;
	color:#0066FF;
	font-size:10px;
	text-align:center;
	text-decoration:none;
	margin-left:112px;
	position: absolute;
 }
 .conteneur div.menubas{
margin:0;}



.conteneur div.menubas a:hover{
background-color:#333366;
color:#ffffff;}


Si je ne me suis pas trompée, ça ne change rien au problème du menu et là l'heritage est bien réel puisque j'ai mon dessin deux fois.


Merci

Val
Ce n'est pas du php mais de l'html.

la difference est là :

<div class="conteneur">
<ul class="menu">
ta liste...


pour ton menu du haut qui est dans un conteneur
donc ciblé comme ça :

.conteneur ul{
	position:absolute;
	list-style:none;
	padding: 0px;
	margin: 0px;
	width:540px;
	height:400px;
	background: url(dessin10.gif) no-repeat;
}


Oublie les conteneurs qui servent à rien dans ton cas pour le moment puisque je pense que ces feuillles de style tu les a récupérés mais tu n'y comrends pas grand chose..

Pour don menu du bas en html :


<ul class="menubas">
ta liste de <li>......


Et en css :

ul.menubas  {text-align: center; position : absolute; left: X; top: X;} /*c'est lui qui deviens conteneur*/

ul.menubas li  {display: inline}  /*les <li> auxquelles tu donnent "inline"*/

ul.menubas li  a{tes déclarations pour le <a>}

ul.menubas ul li  a:hover{tes declarations pouir le <a> au survol}



Je suis fatigué je te met ça au clair demain, tu ferai bien de passer du temps dans les tutoriels tu confonds pas mal de choses, les selecteurs t'intéresseront .

Demain promis je remet ton cas a plat au propre, car là je doute que ça t'eclaire.
Modifié par Hum (21 Sep 2006 - 22:49)
Bonjour

Merci Hum de bien vouloir te pencher sur mon cas.
J'ai parcouru tous les tutoriaux ou presque du net, de plus mes 1ers cours de css je les dois à quelqu'un de très bien, il y a de celà deux ans. J'ai voulu aller plus loin aujourd'hui pour ce site que je fais bénévolement étant moi même photographe. Mais je n'intègre pas tout, hélas, du 1er coup. C'est l'âge, les enfants et un bon rhume avec ce temps pourri...
J'ai effectivement repris le menu coquelicot que j'ai quand même réussi à adapter seule. Ce que je n'intègre pas c'est la mise en place sans table.
Le .conteneur pour le menu coquelicot m'a été suggéré sur le forum. J'ai fait ce que l'on m'a dit, pas tout a fait sans rien comprendre. J'ai lu les questions d'heritage mais j'ai du mal à intégrer les solutions à y apporter.
De même pour les positions absolues et relatives. J'ai compris qu'absolu c'etait en haut à gauche et une seule fois.

le
<div class="conteneur"> ...</div>

c'est le rectangle bleu qui contient la plupart des infos du site sauf le "copyright".

Le .conteneur pour le menu central m'a été suggéré car les liens de mon copyright héritait de ce menu. Le problème était réglé.

Je me suis peut être lancée dans un site un peu compliqué. C'est pas que j'aime m'arracher les cheveux mais j'avais envie d'aller plus loin, d'apprendre de nouvelles données en css.

Je mets le menu du bas comme tu le suggères.

Je te remercie vivement, non c'est pas du cirage de pompe, à toi et à tous ceux et celles qui accordent un peu, voir beaucoup de leur temps à expliquer et réexpliquer, sans vous on serait chauve et accroché au balcon. Smiley cligne

Val
Hello,
je serai pris ce week end mais je t'oublie pas. A priori tu peux déja commencer avec ce que je t'ai donné : positionne un élément de type bloc (ton menu <ul> ou un conteneur <div>) et attribue lui une bordure pour voir ce qui se passe.

Pour le reste si tu suis ce que j'écris, tu continue à styliser ton menu.

Je repasse d'ici peu...

Bon week end Smiley cligne
Bonsoir,

Voilà, vendredi j'ai mis le menu du bas dans un tableau. Résultat sur le siteet ca fonctionne. Ouf.

Merci Hum

Val
Modifié par valzl (24 Sep 2006 - 21:13)
Salut,

oui ça fonctionne mais ce n'est pas standard comme solution, c'est dommage que tu te replie aussi vite sur le tableau pour un simple menu.
C'est aussi dommage de part le fait qu'un tableau n'est pas un contexte de formatage qui conviens à une liste de lien servant de menu.

Si tu as réussi à positionner ton tableau, tu aurai réussi à positionner ton menu directement avec son identité:

ul#identité {son positionnement}

et

<ul id="identité">
<li><a>lien1</a></li>
<li><a>lien2</a></li>
<li><a>lien3</a></li>
</ul>


ensuite de la mise en forme pour ses éléments internes (<li> et <a>) et le tour étais joué et tu aurai appris pleins de trucs qui t'auraient servi sans cesse par la suite.

Smiley decu