Aller au contenu

Positionnement CSS on li(t)


ste

Sujets conseillés

Je suis en train de faire mumuse avec les histoires de positionnement en CSS sur des listes...

le cadre : http://dev.stephane-huc.net/valid/valid.php

la CSS : http://dev.stephane-huc.net/valid/grey.css

Deux choses que je cherche à réaliser :

-1- positionner la bordure de ma liste (li.txt) à 1px de celle de l'ul...

-2- remplir le fond de ma liste (li.txt) d'autant sa taille (width: 80px;)

Je ne dois pas m'y prendre de la bonne manière...

Lien vers le commentaire
Partager sur d’autres sites

Salut!

Effectivement je ne pense pas que ce soit la meilleurs méthode pour arriver à tes fins, d'une d'un point de vue validité/conformité et d'autre part d'un côté sémantique.

La map ne peut pas englober ta liste. Il serait peut-être plus pertinent d'utiliser des <div > et des <p> bien stylés.

Si j'ai bien compris, le but est de faire un logo accessible? je ne suis pas persuadé que cela plus interessant de faire le tout en html plutôt qu'un lien agrémenter d'un alt, mais peut-être as tu tes raisons?

Lien vers le commentaire
Partager sur d’autres sites

Salut!

Effectivement je ne pense pas que ce soit la meilleurs méthode pour arriver à tes fins, d'une d'un point de vue validité/conformité et d'autre part d'un côté sémantique.

La map ne peut pas englober ta liste. Il serait peut-être plus pertinent d'utiliser des <div > et des <p> bien stylés.

Si j'ai bien compris, le but est de faire un logo accessible? je ne suis pas persuadé que cela plus interessant de faire le tout en html plutôt qu'un lien agrémenter d'un alt, mais peut-être as tu tes raisons?

Justement, validité, conformité et accessibilité, je suis tout bon... et, je ne pense pas me tromper...

Et justement, si la map, côté accessibilité, se doit d'englober un groupe de liens, bien plus qu'un div qui n'a peu de raisons d'exister que si l'on veut réaliser, ainsi, plusieurs "images" W3C Compliant... de ce style !

Si tu as un doute sur mon propos, http://www.la-grange.net/w3c/wcag1/wai-pag...ech-group-links : directive 13.6 & http://www.w3.org/TR/WCAG10-HTML-TECHS/#group-bypass : technique pour grouper et "by-passer"...

Et, si ceci est un trip, entierement perso (je l'accorde), c'est simplement pour remplacer l'image qui annonce la validité W3C du langage, ne pas avoir à gèrer un attribut longdesc, etc, etc... le texte étant toujours plus accessible qu'une image ;) !

Lien vers le commentaire
Partager sur d’autres sites

Salut!

Je te prie tout d'abord d'accepter mes excuses :)

Je viens de plancher un peu dessus pour essayer de me faire pardonner, voici un code qui est fonctionel sous ie5/6 et mozilla sous XP.

<head>
<style>
ul { border : 1px solid black;
 list-style-type:none;
 margin:O;
 padding:0;
 width:105px;
 background-color:#999;
 }
li {display:inline; }

#code li.w3c { background-color:#FFFFFF;
   font-family:"Comic Sans MS";
   font-size:13px;
   font-weight:bold;
   color: #06C;
   border-bottom:1px solid white;
   margin:O;
   
   }
   
#code li.w3c span{margin-left:3px;}
html>body #code li.w3c  span{margin-right : 3px;}
     
#code li.txt { font-size: 9px;
   text-decoration: none;
   letter-spacing: 1px;
   color: #FFF;
   background-color:#999;
   text-align:center;
   vertical-align:middle;
   padding-left:3px;
   height:1px;
   margin:0;
   vertical-align:baseline;
   voice-family: "\"}\"";
     voice-family:inherit;
     vertical-align:middle;
   }
 html>body #code li.txt {vertical-align: baseline;}  

</style>
</head>
<body>
<ul id="code" style="">
 <li class="w3c"><span>W3C</span></li>
 <li class="txt"><span><a href="x">HTML 4.01</a>.</span></li>
</ul>
</body>

Merci pour les infos en tout cas, si tu besoin d'un coup de main pour creuser, je viens t'aider.

Lien vers le commentaire
Partager sur d’autres sites

Salut!

Je te prie tout d'abord d'accepter mes excuses :)

Je viens de plancher un peu dessus pour essayer de me faire pardonner, voici un code qui est fonctionel sous ie5/6 et mozilla sous XP.

Merci pour les infos en tout cas, si tu besoin d'un coup de main pour creuser, je viens t'aider.

Elooo,

Des excuses, tu m'adresse : c'est gentil, correct, j'apprécie, mais ce n'était franchement pas correct...

D'autant que tu ne devais pas le savoir...

Bon, ton code m'a bien aidé sincérement !

Et, je suis arrivé à un résultat qui me plait et dont je vais pouvoir me servir !

Tant mieux

Merci à toi, (comme quoi mieux vaut développer à duex, que tout seul ;) )

Voir le résultat : http://dev.stephane-huc.net/valid/valid.php

PS : je vais m'en resservir pour l'intégrer correctement, à mes futurs dév. web!

youpiiii...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...