28172 sujets
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Alignement</title>
<style>
* {
margin : 0;
border : 0 none;
padding : 0;
}
ul {
background-color : red;
list-style-type : none;
width : 648px;
height : 143px;
margin : 0 auto;
}
ul li {
float : left;
border : 1px solid red;
width : 160px;
height : 141px;
}
ul li a {
display : table-cell;
width : 160px;
height : 141px;
text-align : center;
vertical-align : middle;
}
ul li a#img {
background : url(image.png) no-repeat center center;
width : 160px;
height : 141px;
}
</style>
</head>
<body>
<ul>
<li><a href="#1">menu 1</a></li>
<li><a href="#2">menu 2</a></li>
<li><a href="#3" id="img"></a></li>
<li><a href="#4">menu 4</a></li>
</ul>
</body>
</html>
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li><div="position_logo"><img src="logo.png"></div></li>
<li>menu3</li>
<li>menu4</li>
</ul>
<nav>
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href=""><img src="logo.png" alt="Retour à la page d'accueil" /></a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
</nav>
Dge-06 a écrit :
Salut à tous, voilà je voudrais savoir si quelqu'un sait comment scinder en 2 un menu ul li avec une image ?
Dge-06 a écrit :
Merci beaucoup pour votre aide, mais en fait, le logo doit être en format image et non en tant qu’arrière plan. L'internaute doit pouvoir cliquer dessus.
"Benji" a écrit :
Un logo ne devrait pas se trouver dans une feuille de style, mais dans le code html.
tournikoti a écrit :
je ne comprends le terme : "l'alternative textuelle qui va bien" ?
Zelalsan a écrit :
salut,
bin si ton logo est un lien en soi qui renverrait à la page d'accueil (comme cela se fait) tu peux garder la même structure avec une seule liste.
<nav> <ul> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</a></li> <li><a href=""><img src="logo.png" alt="Retour à la page d'accueil" /></a></li> <li><a href="">Menu 3</a></li> <li><a href="">Menu 4</a></li> </ul> </nav>
Par exemple.
tournikoti a écrit :
Bonsoir Benji.
Je viens de relire l'article de Raphaël et je comprends mieux ce que tu veux dire !
En fait, il y a une ambiguïté dans la demande formulé Dge-06.
Si l'image est porteuse d'une information pour la compréhension de la page HTML alors OUI, je suis d'accord pour quelle soit dans la partie déclarative (html).
tournikoti a écrit :
Mais comme cette image participe à la fonctionnalité de la liste et que Dge-06 désire aussi cliquer dessus, en supposant qu'il désire utiliser les pseudo-classes, je pense qu'elle a sa place dans la partie présentation (css).
tournikoti a écrit :
J'ai tendance à oublier que le site web ne s'adresse pas toujours à des personnes qui ont la pleine capacité de leurs sens (audition et vision).
@+
a écrit :
les feuilles de style sont/peuvent être désactivées, ou lors d'un rendu sur un navigateur non graphique ou un média différent de l'écran (navigateur textuel, imprimante, plage braille, synthèse vocale, etc.), les images d'arrière-plan ne sont pas restituées, contrairement aux éléments <img> qui font partie intégrante du document. Seuls les éléments <img> ont un mécanisme permettant de les remplacer par leur alternative textuelle lorsqu'elles ne sont pas restituées (l'attribut alt).
6l20 a écrit :
C'est très souvent le cas d'un logo
6l20 a écrit :
Pour les effets de styles et puisque l'image devra se trouver dans le HTML (puisque porteuse d'informations), on s'occupera de cela via JavaScript.
6l20 a écrit :
La feuille de styles peut ne pas être servie par le serveur, et l'on perd alors une information importante si l'on passe par une image d'arrière plan, etc...
Dge-06 a écrit :
J'y ai pensé, mais le logo est assez grand, il faut donc que je le mette dans une div afin de le remonter un peu. C'est pourquoi je pensais mettre un div dans le li, mais c'est pas top.
http://finecookies.fr/
Zelalsan a écrit :
Franchement c'est sérieux tout ça ?
<div id="menu">
<a href="#1">un lien</a>
<a href="#2"><img src="image.jpg" alt="c'est un logo" /></a>
<a href="#3">un autre lien</a>
</div>
tournikoti a écrit :
Oui d'accord, mais comme je le dis, un logo, c'est aussi une image.
tournikoti a écrit :
Quand je préconise une solution en JavaScript, la plupart du temps, on m'insulte avec des arguments du genre "et si on désactive JavaScript, plus rien ne fonctionne".
tournikoti a écrit :
Je pense qu'il faut trouver un juste milieux entre l'usine à gaz et enfreindre une loi d'éthique !
Donc je ne vois pas l'intérêt de mettre le logo dans le HTML, si cela vient compliquer grandement la mise en place de la fonctionnalité désirée.
J'essaye de rester simple. C'est cela ma règle de base.
tournikoti a écrit :
Oui, avec des SI on met Paris en bouteille. Et si, et si, et si ...
Avec de tels arguments, on finit par ne plus rien faire !
tournikoti a écrit :
Je te rassure, tu seras combler car ton logo fournira l'information que tu souhaites, mais rien ne fonctionnera !
tournikoti a écrit :
Ce sont des règles absurdes qui finissent par compliquer la création des sites sans apporter un quelconque avantage, aussi bien aux malvoyants qu'aux autres.
6l20 a écrit :
Reprenons calmement
6l20 a écrit :
Oui, et alors ?
Si cette image définit l'identité d'une société, d'une entreprise, d'une association, elle est porteuse d'information(s), et les informations jusqu'à preuve du contraire, c'est le boulot d'HTML.
6l20 a écrit :
JavaScript utilisé à bon escient est une bonne chose, ceux qui te disent le contraire sont des c* !
6l20 a écrit :
JavaScript désactivé ? La belle affaire, Il s'agit d'une surcouche cosmétique, d'une interaction sympathique qui amène un peu de dynamisme à la page, rien d'obligatoire ni de vitale, seule l'information compte, et il me semble que c'est le cas ici, une telle image dans la feuille de styles et c'est un risque accru de perdre cette information...
6l20 a écrit :
Le risque, avéré, maintes fois rencontré, reproductible, et confirmé, c'est de perdre une information essentielle, voire vitale.
Je ne vois pas en quoi cela complexifie quoique ce soit ?!
Il ne s'agit aucunement d'éthique, mais d'accessibilité, de bonnes pratiques...
Après, chacun voit midi à sa porte et je ne force personne à rien.
6l20 a écrit :
Que dire ?
6l20 a écrit :
Si le but d'un site web est de fournir une information, ce que j'ai la faiblesse de croire, alors, je ne vois pas ce qui ne fonctionne pas avec une solution universelle, reconnue par le plus grand nombre ?...
6l20 a écrit :
Et pour information, nous sommes bien loin de ce qui me comble
6l20 a écrit :
Fin de digression en ce qui me concerne, je suis à cours d'arguments là
C'est dans ces moments que j'me dis que j'vais changer
(Maître Gimp)