28173 sujets

CSS et mise en forme, CSS3

[Résolu] Je n'arrive pas à positionner mon 3ème div

Bonjour à toutes et tous Smiley smile

Je viens rejoindre votre communauté aujourd'hui car j'ai lu plein de choses intéressantes sur les CSS et qu'après être passée de Windows à Linux Ubuntu, j'ai décidé de passer de la mise en page web par tableaux au respect strict des CSS pour que le maximum de monde puisse accéder facilement aux pages que je crée.
Ceci dit, il faut désapprendre un tas de réflexes et ce n'est pas forcément facile Smiley murf Smiley biggol

Et justement, je me retrouve confrontée à un souci que je n'arrive pas à résoudre depuis hier matin Smiley eek
Voici la page sur laquelle je bosse en ce moment (elle n'est pas terminée et par exemple aucun lien n'est valide) : ikicrea.com et je n'arrive absolument pas à mettre les mentions "me contacter" et "copyright" en bas, en-dessous du div "corps" (corps de la page)...
Je vous mets le lien de la feuille CSS : feuille css de ikicrea

J'ai beau essayer des tas de choses, rien à faire... auriez-vous une idée de là où j'ai merdouillé... Smiley sweatdrop
Merci d'avance pour votre aide Smiley smile
Modifié par iki (09 Oct 2006 - 09:32)
Hello,

Erreurs dans ta CSS :

RE-EDIT : Ca y est j'ai trouvé .
Ligne 7 : font au lieu de font-family.

Mais surtout une déclaration pas fermée : accolade manquante :


div.index_boitameuh a:hover {
background: url(images/lien_index_boitameuh_on.gif) no-repeat;
[b]}[/b]


Et ça y est le bloc se retrouve en bas.
Modifié par Hum (06 Oct 2006 - 16:10)
Euh... comment dire... j'ai bien la balise <head> tout en haut... Smiley sweatdrop

J'ai regardé le résultat du lien que tu donnes et je ne comprends pas les messages d'erreur mettant en rouge la fermeture des balises, il me semble que tout est ok quand je regarde mon code source. Je ne comprends pas Smiley confus

Je viens de tester ma page sans la feuille css, et ça s'affiche a priori correctement en texte simple.

Je précise juste que bossant sous Linux, je ne visualise pour l'instant ma page qu'avec Firefox. J'ai tout à l'heure vérifié ma page avec IE et à part un problème de couleur de fond (que j'espère avoir résolu depuis mais pas encore redémarré sous Win pour regarder sous IE), tout s'affichait pareil qu'avec Firefox...
Hum a écrit :


EDIT : Smiley lolol Alors là je piges plus, sisi, tu l'as bien ton <head></head>, je continue...


Bein vi hein, t'as vu toi aussi... Smiley murf

Quand je pense que j'ai réussi à bien goupiller mes roll-over en css sans trop de mal et que je me casse le nez sur le positionnement de 2 petits textes en bas de page.... Smiley fache Smiley bawling
Tu m'a grillé,

j'ai trouvé, j'ai édité mon post plus haut...

Moi non plus je comprend pas ce que retourne le validateur, par contre les erreurs de la css retournées par le validateur de css sont bien réelles...
Modifié par Hum (06 Oct 2006 - 16:09)
Oh punaise, tu vas pas me croire, j'ai pourtant relu en détail 2 fois ma feuille css pour vérifier si je n'avais fait une bêtise de ce genre... Smiley bawling Smiley biggol

Merci beaucoup Hum, super sympa de m'avoir sur ce coup-là ! Smiley biggrin Smiley biggrin
iki a écrit :
j'ai décidé de passer de la mise en page web par tableaux au respect strict des CSS pour que le maximum de monde puisse accéder facilement aux pages que je crée.

Attention, l'usage des CSS (et l'abandon des mises en page en tableaux) ne garantit absolument pas une meilleure acessissibilité des pages ainsi crées.

Dans le cas de la page que tu présente, par exemple, un page équivalente construite sur un tableau de mise en page utilisé à bon escient ET passant sur une résolution de 800px de large aurait été plus accessible que la page que tu présente. Smiley decu

De plus, l'accessibilité du dispositif suivant est plus que douteuse :
div.index_skins a span {
display:none;
}

Cf. à ce sujet : Remplacement d'images : halte au display none !
Modifié par mpop (06 Oct 2006 - 18:11)
J'irai lire le lien que tu m'as donné mpop, je te remercie de me l'avoir donné (j'ai encore tellement à apprendre sur les css avant d'être à l'aise Smiley cligne ) mais je précise que j'ai trouvé cette méthode dans le livre "CSS 2" de R. Goetter, et ça me paraissait bien.

Le tableau me posait problème pour mes effets de roll-over que je me suis dit qu'un placement par <div> était tout aussi bien et je trouve qu'au final, c'ets plus simple à lire, mais encore une fois, je ne suis qu'une débutante en css Smiley confused
iki a écrit :
J'irai lire le lien que tu m'as donné mpop, je te remercie de me l'avoir donné (j'ai encore tellement à apprendre sur les css avant d'être à l'aise Smiley cligne ) mais je précise que j'ai trouvé cette méthode dans le livre "CSS 2" de R. Goetter, et ça me paraissait bien.

Raphael présente cette technique sans mettre en garde contre ses effets secondaires ? Pour le coup je suis un peu surpris (surtout que Laurent Denis pointait les dangers de la technique en question en 2004, si je me souviens bien).

iki a écrit :
Le tableau me posait problème pour mes effets de roll-over que je me suis dit qu'un placement par <div> était tout aussi bien et je trouve qu'au final, c'ets plus simple à lire, mais encore une fois, je ne suis qu'une débutante en css Smiley confused

Disons que se former à la mise en page sans tableaux de mise en forme est louable, mais qu'il ne faut pas s'attendre pour autant à des miracles. Il y a de bien nombreux paramètres qui rentrent en ligne de compte pour l'accessibilité, et les tableaux de mise en forme (ou leur absence) ne sont qu'un de ces paramètres.

Mais bien sûr quand on débute il faut y aller progressivement. Je précise juste, pour la « culture générale ». Smiley cligne
Je viens de vérifier dans le bouquin si je n'avais pas oublié un paragraphe et effectivement, à la fin de la description de cette méthode, il précise le défaut de lecture des navigateurs non visuels et préconise la méthode du décalage avec le positionnement absolu et le text-indent pour être sûr que tous les navigateurs interpréteront ces instructions...

Toutes mes excuses donc pour ma mauvaise lecture.

Ceci dit, du coup, j'étais plutôt embêtée car une <img> avec "alt" ne me permettait pas de faire du roll-over avec la css... Smiley ohwell

Alors que pensez-vous de cette soluce un peu "bricolo bricolette" mais qui semble fonctionner (en tout cas sur Firefox) : mettre à la place du span, sur lequel j'avais mis la règle "display: none", une image vide sur laquelle du coup je peux mettre "alt"...
Voici donc la page changée : ikicrea
Avec la feuille css : styles ikicrea

Je ne rêve pas, ça fonctionne impec non ? Smiley rolleyes
iki a écrit :
Alors que pensez-vous de cette soluce un peu "bricolo bricolette" mais qui semble fonctionner (en tout cas sur Firefox) : mettre à la place du span, sur lequel j'avais mis la règle "display: none", une image vide sur laquelle du coup je peux mettre "alt"...
Voici donc la page changée : ikicrea
Avec la feuille css : styles ikicrea

Je ne rêve pas, ça fonctionne impec non ? Smiley rolleyes

Je connais la technique, je l'ai même utilisée pour ce site. Le problème, c'est si on désactive la feuille de style/si elle n'est pas chargée : on ne voit plus que des images... « vides », genre un gif transparent de 1x1 pixel. De même, si les images appelées depuis la feuille de style ne sont pas chargées.

Bon, aucune technique n'est parfaite. Par contre, il y a des utilisateurs :
- qui désactivent la feuille de style (auquel cas la technique du text-indent reste efficace) ;
- qui désactivent les images (auquel cas l'image « vide » avec attribut alt reste efficace).
Il faudrait savoir quelles sont les proportions dans un cas ou dans l'autre. Au final, j'aurais tendance à préférer la technique du text-indent, mais je n'ai pas de raison très solide pour ça. Smiley smile
Mouhahaha ! J'adore la réinterprétation en bd du petit chaperon rouge !

Bon, pour l'instant, je vais garder ma structure en div et je vais te rejoindre sur la méthode des text-indent...
Merci pour tout ! Smiley smile Smiley smile Smiley smile
Sujet clos
Aller à