[Résolu] Positionnement absolu me donne un résultat incohérent

Bonjour,

ton site est fait en dreamweaver ?! C'est difficile de s'y retrouver dans toutes tes balises.

Apparemment c'est tes sélecteurs css qui posent problème ; pour la ligne suivante :

<div class="star" id="3-1"></div>

le sélecteur

.star#3-1

ne sert à rien.
Comme un id est unique il te suffit de

#3-1

Et pareil pour tes autres .star

Par contre recourir aux tables et au positionnement absolu (qui sont deux approches différentes par ailleurs) pour un tel rendu ça me paraît un peu lance-roquette pour abattre une mouche

Bonne continuation !

Bonjour! Merci pour ta réponse.

Non, je code tout à la main, et comme je me suis retrouvée embringuée en pleine insomnie dans ce site un peu compliqué (publié sous wordpress en plus, ce qui ne facilite jamais rien!) j'ai fait un peu n'importe quoi.

J'ai nettoyé mon code et ma mise en page aujourd'hui et ça devrait être beaucoup mieux!

Par contre... j'ai toujours le problème des étoiles, alors que j'ai suivi ton conseil et viré le sélecteur "star", en ne laissant plus que les ID.

Maintenant les étoiles n'apparaissent même plus.

J'ai même essayé d'en faire des classes au lieu d'ID, mais c'est pareil.

Je t'avoue, je ne comprends pas. Je ne m'y connais pas assez bien en css pour voir la solution.

Tu as une idée? Ou quelqu'un d'autre?

Merci pour votre aide en tout cas!

Ah le code est beaucoup mieux maintenant !
Par contre pas de chance un attribut id ne peut pas commencer par un chiffre (ni par un tiret), donc le style de tes étoiles n'est toujours pas appliqué !

Mais pourquoi tu t'esquintes à les mettre dans des div en background alors que tu pourrais utiliser la balise <img> ?

Aaaaah mais c'était un truc aussi simple que ça? LOL!!

Maintenant ça marche, et je te remercie d'avoir enfin mis fin à mon calvaire.

Je m'esquinte, oui, je sais - mais je suis un peu maniaque, j'aime bien qu'il y ait une certaine continuité, et donc si les menus sont en background, je préfère que les étoiles soient pas des images!

Complètement ridicule, sans doute - mais de toute façon ça ne marchait pas dans la balise non plus...

Mille mercis, encore une fois! WOOHOO!

De rien, oublie pas le [Résolu]

Ah oui! Je mets juste dans le titre du sujet?

Voilà comme ça !

Un énorme merci pour tout

Salut,

MatTheCat a écrit :
Mais pourquoi tu t'esquintes à les mettre dans des div en background alors que tu pourrais utiliser la balise <img> ?

Parce que ce sont des décorations et qu'elle n'ont pas à être dans le code html ?

Quelques remarques :
* quel est l'intérêt du positionnement absolu de tes liens ?
* les liens en questions devraient eux être des éléments IMG avec attribut alt qui va bien ce qui les rendraient accessibles.
* as-tu déjà lu le tuto : Créer des menus simples en CSS ?
* pour les étoiles elles pourraient être en background des LI par exemple (à condition de faire une liste) sauf pour le premier ou le dernier (class qui va bien).

Salut!

Heyoan a écrit :

* quel est l'intérêt du positionnement absolu de tes liens ?

Tu les positionnerais comment d'autre?

Heyoan a écrit :
* les liens en questions devraient eux être des éléments IMG avec attribut alt qui va bien ce qui les rendraient accessibles.

Accessibles à quoi?

Heyoan a écrit :
* as-tu déjà lu le tuto : Créer des menus simples en CSS ?

Oui - je vois pas trop l'interet des listes sur mon site... si mes visiteurs ne peuvent pas lire le css, ils ne verront pas mes photos, et donc je ne voyais pas l'intérêt de coder comme ça!

Je suis ouverte à toute suggestion pour m'améliorer, par contre - donc n'hésite pas à m'expliquer tes questions et tes choix, et de me dire pourquoi tu penses que je pourrais faire mieux! Ca m'aidera à moins venir vous embêter à l'avenir!

Merci

Concernant l'accessibilité du Web tu peux jeter un œil à cet article. L'une des règles de base est que le contenu (ce qui contient l'information) doit se trouver dans le code html ce qui fait que son accès ne dépend ni du css, ni du JavaScript, ni des images qui doivent être considérés comme facultatifs. Le fait de mettre les images dans le code html avec un élément IMG permet de leur affecter un attribut alt (pour contenu textuel alternatif) ce que ne permettent pas les images en background css.

En l'occurrence tu as bien un contenu textuel (caché à l'aide d'un text-indent négatif) ce qui est plutôt pas mal mais qui peut toutefois poser problème en cas de css activés et d'images désactivées. Tu pourrais me rétorquer que ton contenu est essentiellement graphique et que ce cas de figure t'indiffère... ce à quoi je répondrais : Yep ! C'est pas faux !

Quoi qu'il en soit la manière la plus accessible (à toute personne et à tout matériel) reste les images avec alt et pour gérer le rollover on se sert alors de JavaScript.

Pour ce qui est d'une autre façon de positionner j'aurais fait comme ça :

img {
	border: none;
}

#menu {
	height: 50px;
	width: 750px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
} 
 
#menu li {
	float: left;
	padding-left: 50px;
	background: url(images/star.png) top left no-repeat;
} 
 
#menu li.first {
	padding-left: 0;
	background: none;
} 
 
#menu li a {
	display: block;
	width: 150px;
	text-align: center;
}

#menu li a:hover,
#menu li a:focus,
#menu li a:active {
	color: green;
}

<ul id="menu"> 
	<li class="first"><a href="index.html"><img src="images/galleries.png" height="50" width="150" alt="Galleries" /></a></li>
	<li><a href="index.html"><img src="images/videos.png" height="50" width="150" alt="Videos" /></a></li>  
	<li><a href="index.html"><img src="images/options.png" height="50" width="150" alt="Options" /></a></li> 
	<li><a href="index.html"><img src="images/encours_about.png" height="50" width="150" alt="About" /></a></li> 
</ul> 

Cela permet de ne pas avoir à positionner chaque lien en absolute et en cas de css désactivés le rendu de liste de liens est réputé efficace pour être associé à un menu.

Heyoan a écrit :
Tu pourrais me rétorquer que ton contenu est essentiellement graphique et que ce cas de figure t'indiffère... ce à quoi je répondrais : Yep ! C'est pas faux !

Tiens, ça me rappelle la dernière fois, quand j'ai eu besoin de coordonnées à chercher sur un site "au contenu essentiellement graphique", à communiquer en urgence. Et je n'avais sous la main qu'un mobile, des conditions de connexion très dégradées, et très très peu de temps...

Ce jour là, j'ai finalement envoyé à mon client les coordonnées d'un autre prestataire que celui qui avait pris le parti de se dire "mon contenu est essentiellement graphique".

Saperlipopette ! C'est à croire qu'il ne faudrait jamais présumer de la manière dont une page web va être consultée et toujours faire au mieux !

@ Heyoan - merci pour les références, auxquelles j'irai jeter un coup d'oeil plus approfondi quand je me serai dépétrée de mes 20,000 autres problèmes css et js (!!); il faudrait que je mette mon site en ligne rapidement, donc même si je dois changer des trucs plus tard, la priorité c'est de trouver un job vite. Je croyais que l'accessibilité avait avoir avec le référencement; mais bon, je suis photographe (d'enfants et de mariages), donc l'accès pour les aveugles et pour les seniors... ou même pour les navigateurs sans images (!!!!) ... - je pense que ceux qui viendront voir n'auront que très rarement des problèmes d'accès.

@ Laurent - En tout cas, ma page contact est très lisible, même sans css et sans images. Les infos sont là... je ne devrais pas avoir ce problème!

Quant au code en liste, j'ai commencé par le faire comme ça, ce menu; et surement parceque je ne me débrouille pas très bien en css, je n'arrivais pas à le centrer avec tous ces éléments "float:left", et j'avais maints problèmes dûs au fait que le contenu était moins large que le conteneur...

donc j'ai fini par m'arracher 12 cheveux et faire du positionnement absolu. Ca marche pour moi, donc je le laisse comme ça, ce n'est pas bien grave! Je suis désolée si c'est de l'hérésie pour vous qui vous y connaissez mieux!

Merci à tous les 2 pour votre input. Et les leçons!

Bonne soirée!
Modifié par Princesskarlotta (19 Feb 2010 - 22:05)