Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

[tuto web] cadre avec bordures extensibles valide xhtml/css

Posted by Guiral antoine sur janvier 13, 2008

Bonjour à tous!

Comme promis un petit tutoriel pour la création de cadres avec bordures extensibles valide XHTML 1.1 et CSS. C’est cette méthode que j’utilise pour le design de mon cv en ligne.

Ce tutoriel est présent sur mon nouveau blog : http://antoine.guiral.info/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtml-css/. Veuillez m’excuser pour la gène occasionnée.

Publicités

15 Réponses to “[tuto web] cadre avec bordures extensibles valide xhtml/css”

  1. leau2001 said

    Bonjour j’aimerai savoir si cette technique est utilisable pour les blockquote ?

    En tout cas bon travail

    lo

  2. Bonjour lo,
    Tout d’abord merci pour ton commentaire!

    Pour répondre à ta question je pense que c’est possible dans le sens où la balise blockquote est de type block (contrairement à la balise q qui est equivalente mais de type inline). CEPENDANT : la méthode que je propose est l’imbrication de div. Avec des div pas de prob vu que c’est une balise neutre donc cela reste juste sémantiquement. Tandis que imbriquer 8 blockquote n’aurais aucun sens. Donc oui c’est possible mais non ce n’est pas requommandé (ni même valide je pense).

    Utilise tu « vraiment » la balise blockquote? (c’est a dire avec l’attribut « cite ») Si c’est le cas place ta citation dans les 8 div imbriqué (ceux du tuto). Si tu n’utilise pas l’attribut « cite » et bien abandonne ton blockquote et utilise les css pour avoir le même décalage.

    J’espère avoir répondu a ta question!

    A bientôt! Et bon courage pour ton blog!

  3. *Serval said

    Bonjour,

    Ayant exactement le même besoin que ce tuto, et après avoir essayé une autre manière qui ne fonctionnait pas comme je le voulais, j’ai fait une recherche google et je suis tombé ici. J’ai suivi le tuto à la lettre mais aucune des bordures ne s’affichent…

    http://www.serval.be/Kavanaghs/
    Je voulais faire un cadre dans le footer pour y mettre quelques infos.

    Sauriez-vous d’où vient le problème ?

    Merci d’avance pour votre aide !

  4. Bonjour Serval,
    désolé de ne pas avoir répondu plus tôt mais ce wend je n’avais pas internet (et c »était très très dur!). Je viens d’aller sur ta page et ton footer me parait bien (mais apparement tu as utiliser une autre méthode que celle que j’expose). Si tu as des questions je reste à ta disposition bien sur!

    A bientôt!

  5. *Serval said

    Bonjour,

    en effet j’ai modifié mon footer depuis en utilisant une autre technique.
    Mais il me reste 2 problèmes. Premièrement, la balise qui contient le texte qui s’affiche dans le cadre essaye de prendre le maximum de largeur possible. Donc les bords gauche et droite du cadre ne se ressenrent pas correctement autour du texte. Si quelqu’un a une idée sur la manière de faire prendre à ce le minimum de largeur possible sans la fixer, ca m’interesse.

    Secondement, j’ai un léger problème sous IE8 qui inverse le coin inférieur droit avec un morceau de bordure droite. Ce problème disparait si je retire le padding de ce coin, mais alors le cadre se ressert trop verticalement. J’essayerais demain de ne mettre qu’un padding top et bottom.

    Si quelqu’un a des pistes pour m’aider, ce serait très aimable de sa part de me les exposer 😉

    Merci

    *Serval

  6. Re!

    Pour le second problème (angle inferieur droit decalé vers le haut) je pense que cela vient d’un problème de marge. Si tu regarde bien sur IE ton paragraphe est collé à ta bordure supérieur. Sinon utilise la méthode du tuto pour positionner tes images en absolute dans tes angles…Si le problème de marge ne résoud rien fixe un « height » ou un « min-height » (attention aux diff navigateurs) à ton div le plus à l’interieur (voir tuto).

    Pour le premier probleme (largeur utilisée au max)…et bien cela vient du fait que les paragraphes comme les divs sont des balises « block »…cependant je ne voit pas le prob sur les bordures (sous FF2 et IE7)…tu le vois sur quoi?

    Je sais pas si je t’ai aidé:)…

    Antoine

  7. chris said

    Bonjour et avant tout bravo pour ce code.
    Je rencontre un problème en l’ essayant.
    en effet le bloc prend toute la largeur de ma page alors que j’ aimerais qu’ il s’ adapte en fonction de ce que je tape.
    Ai-je loupé quelque chose ?
    Cordialement.

  8. chris said

    pardon, je vous mets un lien:
    Lien vers la page

  9. bonjour chris!

    Tu n’as rien loupé : les balises div prennent toutes la largeur de la fenetre (si tu dev avec firefox avec la barre de dev fait ctrl+maj+y pour voir la taille de chaque élément). Donc tu peux utilisé un min-width (pas compatible sur tous les navigateurs) ou fixer une largeur en %.

    EDIT :

    ceci pour la classe .L te permet de fixer la largeur :

    position:relative;
    weight:50%;

    ceci pour la classe .B te permet d’adapter la hauteur de ton div en fonction du contenu :
    height:auto;
    en faisant attention d’adapté le padding bottom 😉

    J’espere t’avoir aider à bientot!

  10. chris said

    donc si je comprends bien, ce n’ est pas extensible en largeur ?

  11. si, la structure en elle même est extensible en largeur (www.e-caveavin.com/cv/) mais une balise div prend toute la largeur qu’on lui donne donc si tu ne fixe pas la largeur ton cadre prendra toute l’espace occupé.

  12. chris said

    ok, en fait je pensais que le cadre s’ adaptait seul et automatiquement en fonction de ce que je tape.
    C’ est le cas en hauteur mais pas en largeur c’ est ça ?

  13. C’est le cas en hauteur avec l’attribut height:auto. Pour la largeur c’est différent. Renseigne toi sur la balise div c’est elel qui régit tou dans ce cas là 🙂

  14. chris said

    Bonjour, j’ y suis parvenu, je vous montre ce que ça donne, ce sont les deux cadres de couleur sur cette page:
    Cliquez !

  15. Salut,
    je viens d’aller voir! Très bien!

    Tes cadres avec les bordures de différentes epaisseur rendent très bien vraiment!

    Je fais faire un tuto sur la façon de faire des coin arrondi grâce à jQuery.

    Bonne continuation et à bientôt sur ce blog j’espere 🙂

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

 
%d blogueurs aiment cette page :