28220 sujets

CSS et mise en forme, CSS3

CSS domptage de ma liste a puce

tout d'abord bonjour a tous, voila etant désireux de passer mes projet aux normes W3C afin d'augmenter leur accessibilité evidement j'ai quelques soucis Smiley smile ,
afin de refaire lancien design soutenu par des tableau je repense le modele du site et apres de nombreux effort j'arrive a avoir un template xhtml 1.1 valide et sans style.
ainsi dans mon xhtml j'ai une liste a puce de texte que je transforme a l'aide du css en image , les images sopnt bien affichée les textes bien ignorés mais je n'arrive pas a alligner mon menu avec le css ,donc si quelque peut me conseiller , merci d'avance Smiley langue .
++
j'ajoute ma liste a puce:

<div id="menu">
			<ul>
				<li><a href="#" id="accueil"          accesskey="a"><span>Accueil</span></a></li>
				<li><a href="#" id="annonces"  accesskey="s"><span>Annonces</span></a></li>
				<li><a href="#" id="contact"       accesskey="c"><span>Contact</span></a></li>
				<li><a href="#" id="temoignages" accesskey="t"><span>Témoignages</span></a></li>
			</ul>
		</div>


ainsi que les partie du css concernés :



#menu { /*propriété du menu a gauche de selection*/
margin: 0px;
padding: 0px 0px 0px 0px ;
position: relative;
left: 0px;
top: 0px;
text-align: center;
height: 400px;
width: 118px;
background-color: #9C0000;
}
#menu ul
{
margin: 0px;
}
#menu ul li
{
	list-style-image: none;
}
#accueil
{
background-image: url(../img-demo/acceuill0.jpg);
display:block;
left: 0px;
width:142px;
height:36px;
margin:0px;
}
#accueil span
{
	text-decoration: none;
	visibility: hidden;
}
#annonces
{
background-image: url(../img-demo/annonces0.jpg);
display:block;
float:left;
width:142px;
height:39px;
margin:0px;
}
#annonces span
{
	visibility: hidden;
}
#contact
{
	background-image: url(../img-demo/contact0.jpg);
display:block;
float:left;
width:142px;
height:41px;
margin:0px;
}
#contact span
{
	visibility: hidden;
}
#temoignages
{
background-image: url(../img-demo/temoignages0.jpg);
display:block;
float:left;
width:142px;
height:38px;
margin:0px;
}
#temoignages span
{
	visibility: hidden;
}

Modifié par thedarkshaman (12 Apr 2006 - 11:29)
Salut, déjà j'ai simplifié ton code CSS : 
#menu { /*propriété du menu a gauche de selection*/
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top: 0;
  text-align: center;
  height: 400px;
  width: 118px;
  background-color: #9C0000;
}

#menu ul
{
  margin: 0;
}
#menu ul li
{
	list-style-type: none;
}
#menu ul li a {
  display:block;
  float: left;
  margin: 0;
  width:142px;
}
#menu ul li a span
{
	text-decoration: none;
	visibility: hidden;
}
#accueil
{
  background-image: url(../img-demo/acceuill0.jpg);
  height:36px;
}
#annonces
{
  background-image: url(../img-demo/annonces0.jpg);
  height:39px;
}
#contact 
{
  background-image: url(../img-demo/contact0.jpg);
  height:41px;
}
#temoignages
{
  background-image: url(../img-demo/temoignages0.jpg);
  height:38px;
}

Mais arrivé là j'ai pas bien pigé où tu voulais en venir ... tu mets #menu {width: 118px;} puis #menu ul li a {float: left; width:142px;} ... ton menu doit être vertivale ou horizintale au final ?
en fait il s'agit d'un menu de navigation a gauche du texte central qui doit etre aligner verticalement , merci de ta reponse je vais tester ces quelques modifs.
++
merci c'est clair qu'en opptimisant le css de cette maniere c plus lisible , mais a présent mes images sont toutes superposées sous firefox mais bizarement pas sous ie donc je pense que je dois utilise une propriété que le panda rouge n'appreci pas et en plus seulement sous firefox j'ai une espece de ligne en plein millieu du bouton je met une image:
upload/6073-boutonfiref.png
Essay ca : 
#menu { /*propriété du menu a gauche de selection*/
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top: 0;
  text-align: center;
  height: 400px;
  /* width: 118px; */
  width: 142px; /* t'imagine bien que tu peux logiquement pas mettre une valeur inferieure à celle de #menu ul li a { width:.. }*/
  background-color: #9C0000;
}

#menu ul
{
  margin: 0;
  padding: 0; /* oublis pas ça */
}
#menu ul li
{
	list-style-type: none;
}
#menu ul li a {
  display:block;
  text-decoration: none; /* ça devais aller là ... pas dans #menu ul li a span */
	/* float: left; oublis le float left à moins que tu veuilles une nav horizontale */
  margin: 0;
  width:142px;
 }
#menu ul li a span
{
  visibility: hidden;
}
#accueil
{
  background-image: url(../img-demo/acceuill0.jpg);
  height:36px;
}
#annonces
{
  background-image: url(../img-demo/annonces0.jpg);
  height:39px;
}
#contact 
{
  background-image: url(../img-demo/contact0.jpg);
  height:41px;
}
#temoignages
{
  background-image: url(../img-demo/temoignages0.jpg);
  height:38px;
}

Modifié par dhjapan (12 Apr 2006 - 12:25)
merci encore de ta reponse ca va de mieu en mieu, mais il y encore pas mal de detail a regler par exemple sous firefox les bouton empiètent les uns sur les autres tant dis que dans ie nan,'ai suivis tes conseil:s mais aussi rajouter un magin-left car les bouton doivent legerement depasser la bordure du menu , mais comment se fait t'il que les images se superposent meme legerement cela ne viendrais -t'il pas du position: relative; ????
++
je remete les element de la feuille de style:

#menu { /*propriété du menu a gauche de selection*/
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top: 0;
  text-align: center;
  height: 400px;
  width: 142px; /* t'imagine bien que tu peux logiquement pas mettre une valeur inferieure à celle de #menu ul li a { width:.. }*/
  background-color: #9C0000;
}
#menu ul
{
  margin: 0;
  padding: 0; /* oublis pas ça */
}
#menu ul li
{
	list-style-type: none;
}
#menu ul li a {
  display:block;
  text-decoration: none; /* ça devais aller là ... pas dans #menu ul li a span */
	/* float: left; oublis le float left à moins que tu veuilles une nav horizontale */
  margin: 0;
  margin-left: 26px;
  width:142px;
 }
#menu ul li a span
{
  visibility: hidden;
}
#accueil
{
  background-image: url(../img-demo/acceuill0.jpg);
  height:36px;
}
#annonces
{
  background-image: url(../img-demo/annonces0.jpg);
  height:39px;
}
#contact 
{
  background-image: url(../img-demo/contact0.jpg);
  height:41px;
}
#temoignages
{
  background-image: url(../img-demo/temoignages0.jpg);
  height:38px;
}

Modifié par thedarkshaman (12 Apr 2006 - 12:45)
Moi je ne vois pas les images évidement et quand j'utilise un border pour visualiser les #menu ul li a je ne vois pas les bouton empièter les uns sur les autres.*
Effectivement tu pourrais virer #menu{position: relative;left: 0;top: 0;text-align: center;} qui n'ont pas l'air de servir à quoi que ce soit ... mais à mon avis le problème viens de la taille de tes images, vérifie ca aussi.

A plus
alors j'ai enlever du css les proprietés:
#menu{position: relative;left: 0;top: 0;text-align: center;}
j'ai rajouter un border et verifier voici deux capture une firefox et une ie:
firefox: upload/6073-menufirefox.png ie: upload/6073-menuexplore.png
pour le taille des images les dimensions sont justes ,d'ailleur je ne comprend pas pourquoi la auteur de l'image anonce n'est pas prise en compte?
++
Modifié par thedarkshaman (12 Apr 2006 - 14:13)
c'est tout a fais vrai je fais tout le temps cette erreur d'orthographe merci du tuyau en tout cas Smiley lol
++
ps: je pense refaire les images des que mon style seras fonctionnel
Modifié par thedarkshaman (12 Apr 2006 - 14:41)
alors en modifiant la hauteur de #menu ul li a mes images ne se chevauchent plus , néanmoins mes boutons sont fait pour depasser en largeur de 27px par rapport au menu j'ai donc mis un margin left dans #menu ul li a de 26px sous firefox c pris en compte sous ie non si quelqu'un a une idée sinon sous firefox le premier bouton ne s'aligne pas pour tant il est stylé de la meme que lka meme facon que les autres ...

#menu { /*propriété du menu a gauche de selection*/
  margin: 0;
  padding: 0;
  height: 200px;
  width: 142px; /* t'imagine bien que tu peux logiquement pas mettre une valeur inferieure à celle de #menu ul li a { width:.. }*/
  background-color: #9C0000;
}
#menu ul
{
  margin: 0;
  padding: 0; /* oublis pas ça */
}
#menu ul li
{
	list-style-type: none;
}
#menu ul li a {
  border: solid;
  border-width: 1px;
  border-color: black;
  display:block;
  text-decoration: none; 
  margin: 0;
  margin-left: 26px;
  width:142px;
  height: 39px;
 }
#menu ul li a span
{
  visibility: hidden;
}
#accueil
{
  background-image: url(../img-demo/acceuill0.jpg);
  height:36px;
}
#annonces
{
  background-image: url(../img-demo/annonces0.jpg);
  height:39px;
}
#contact 
{
  background-image: url(../img-demo/contact0.jpg);
  height:41px;
}
#temoignages
{
  background-image: url(../img-demo/temoignages0.jpg);
  height:38px;
}

++
Moi j'aurais mis #menu{margin: 0 0 0 26px;} au lieu de rajouter une marge aux #menu ul li a...
Bref ce qui se passe c'est qu'en fait tes boutons demande plus de place que n'en laisse ta div #menu ... dans FF les bouton sortent de la div .. et dans IE ils l'étirent ...
Si tu veux donner l'impression que ton menu sort de la zone rouge... tu devrais plutot "dessiner" la zone rouge avec une image appliquée en background à ta div #menu : #menu {background: #FFF url('...') repeat-x;}, et ne pas lui donner de width.
L'image : " upload/6075-bgndmenu.gif "
Sujet clos
Aller à