28106 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,

J'ai un probleme avec border-radius : ca ne marche pas sous explorer, apparemment. Ou alors, seulement dans certains cas, peut être (et pas dans le mien Smiley ohwell )

Est-que quelqu'un peut m'éclairer ?
Merci d'avance
Alors, d'après ce que je sais (à toi de vérifier), border-radius est une propriété du futur CSS (le 3.0). Internet ne le prend donc pas en charge.

Par contre, Firefox a déjà cete propriété programmée. Ainsi que la propriété -moz-border-radius si je ne me trompe pas.

en faisant une petite recherche, tu trouveras certainement un autre moyen CSS pour faire des bordures arrondies (code spécifique). tu peux aussi utiliser 4 background avec 4 coin et les positionner avec top, left, ect...
Dorian
Effectivement, j'utilise -moz-border-radius, et ça marche tres bien avec firefox. Je pensais, du coup, que border-radius servait à faire la meme chose dans IE.
Bon, bah si c'est pas encore implémenté... on va se rabattre vers d'autres solutions.

J'ai cherché un peu et j'ai trouvé une page qui à l'air de proposer une solution :
http://www.cssplay.co.uk/boxes/krazy.html

Je ne sais pas ce que ça donne, je n'ai plus la force de tester ça ce soir... on verra ça demain... et je n'oublie pas de vous tenir au courant, si ça peut servir à quelqu'un d'autre.

Merci pour votre aide, et à Alsacréations pour ce site, qui est une vraie mine d'or pour qui veut essayer de développer du web correctement.

A+
Modifié par zeltron (18 Feb 2006 - 23:03)
zeltron a écrit :
J'ai cherché un peu et j'ai trouvé une page qui à l'air de proposer une solution :
http://www.cssplay.co.uk/boxes/krazy.html

Je n'aime pas beaucoup cette "solution" qui consiste à rajouter du code HTML de manière arbitraire afin d'obtenir un effet qui n'est au final qu'un effet visuel. Je pensais pourtant que les CSS tendaient vers la séparation du contenu et de la mise en forme...

Pour ma part, j'ai rédigé ceci il y a quelques jours :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
Assez efficace, mais uniquement pour un bloc ayant une largeur fixe.

Si quelqu'un a une idée pour une largeur fluide...
clb56 a écrit :


Vi vi vi, 4 coins en fluide et sans ajout de code html :

http://clb56.freezee.org/test_roundcorner/

Ce n'est pas un tutoriel donc pas d'explications rédigées. Mais la css mise en oeuvre est dans le code source du document lui même.

Mouais... pas super fan de cette méthode. On se retrouve vite avec quelque chose d'assez lourd. Et si jamais on veut gérer des bordures en images (et pas uniquement des coins arrondis, c'est pas gagné.
dis donc T 1 peu gonflé quand même. Tu lances la perche pour une possibilité de coins arrondis en fluide. Tu n'es pas fan de html ajouté. On te propose une possibilité qui correspond pile poil a tes considérations (et au passage à ce après quoi tout le monde court) et tu en rajoutes une couche de bouche pincée pas fan, pas convaincu.

Excuse moi mais cette posture un tantinet dédaigneuse est un peu nulle.

Sur ta réflexion à propos de l'utilisabilité du principe que j'indique à des choix graphiques plus complexes et bien je pense que ça doit être plutôt facile au contraire. Transformer un coin dans un carré de 5 px de coté en une bande de 6000px*5px avec une extrémité en coin et une bordure et une ombre portée etc... etc.. c'est de la broutille.

Le jour où j'aurai du temps à perdre j'essayerai peut être. Etant bien entendu évidemment que les réflexions superbement condescendantes comme les tiennes ne m'encouragent ni à tester ni encore moins à présenter le résultat de mes tests (comme ça tu pourra continuer à poser tes questions)

En attendant moi j'utilise les niftycorners mais je ne m'étendrai pas là dessus car je crains qu'une fois de plus tu ne sois pas très fan.
clb56 a écrit :
Excuse moi mais cette posture un tantinet dédaigneuse est un peu nulle.

Désolé clb56 que tu aies mal pris ma remarque. Ce n'est pas mon intention d'être condescendant envers qui que ce soit, mais je me contentais de donner mon avis, c'est à dire que je ne suis pas très convaincu par la solution que tu proposais.

D'abord, et je ne le précisais pas dans ma remarque – mais j'aurais peut-être dû... s'il faut toujours donner des gages de sa bonne foi –, j'ai passé plus d'une heure, à partir de l'exemple que tu donnais :

- à le reconstruire à partir de zéro, pour obtenir quelque chose de similaire mais peut-être d'un peu plus épuré sur certains aspects (je n'ai pas bien compris le caractère indispensable des padding compensés par des marges négatives). Ce que j'ai réussi à faire assez facilement.

- à tenter de l'adapter pour avoir à la fois des coins mais aussi des bordures imagées. J'ai beaucoup tatônné, finalement réussi, mais pour obtenir quelque chose d'assez lourd.
Si tu veux quelques informations sur ce que j'ai fait, j'ai effectivement travaillé avec des images de type 20×2000 pixels. Par contre, le principal problème était d'avoir une bordure à gauche ET une bordure à droite séparées (vu que la largeur doit être fluide. J'ai trouvé deux solutions :
1/ bordure de gauche en image de fond du conteneur, et bordure de droite en image de fond des paragraphes, listes, titres, etc. (avec des marges à zéro et des paddings pour les retraits). Pas tip top.
2/ bordure de gauche en image de fond du bloc conteneur, et bordure de droite en image de fond d'un bloc qui vient dédoubler le conteneur. Ce qui demande d'imbriquer deux blocs... À la rigueur.

Bref, toutes ces solutions demande, dans une certaine mesure, de rajouter des éléments. Dans l'exemple que tu donnais, il y avait un fil d'ariane qui étais utilisé pour dessiner un des coins. Mais si on n'a pas de fil d'ariane ? Il faut alors rajouter un élément. Certes, il faut être très puriste du "HTML sémantique" pour y voir un problème réel. Pour ma part, ce genre de bricolage ne me gêne pas trop, mais j'ai une tendresse particulière pour les solutions propres et nettes. Comme tu le dis :
clb56 a écrit :
Tu n'es pas fan de html ajouté.


Ceci dit, quand je relis ma réponse je comprends qu'elle ait pu être mal prise. Elle n'est pas condescendante, mais son aspect laconique (voire lapidaire...) peut la faire aparaîte comme telle.
En fait, je pensais qu'il ne s'agissait "que" d'un exemple que tu avais trouvé au hasard d'une recherche. Si j'avais vu que tu avais réalisé ce test toi-même, j'aurais été moins laconique. Désolé encore.
mpop a écrit :


Bref, toutes ces solutions demande, dans une certaine mesure, de rajouter des éléments. Dans l'exemple que tu donnais, il y avait un fil d'ariane qui étais utilisé pour dessiner un des coins. Mais si on n'a pas de fil d'ariane ? Il faut alors rajouter un élément.


Mais non bien sur que non !!!

sauf à avoir un site complètement vide tout conteneur type #contenu ou chez moi #page à un premier élément (chez moi un fil d'ariane, mais chez chez quelqu'un d'autre ,autre chose et quoiqu'il en soit rien de factice d'un strict point de vue html) et évidemment un deuxième élément (chez moi un h2, et évidemment puisque moi je structure le html lui même en en ayant rien à fiche de quelque mise en page que ce soit. donc bien sur qu'il y a un hn significatif qui apparait à un moment significatif) et bien évidemment aussi un dernier élément. Tout ceci existe de toute façon dans le code html pour autant que cet html existe. Que sans besoin de rien de plus on puisse jongler comme on veut avec les css me parait évident. Que personne n'y pense me parait tout aussi évident. Que l'on puisse faire mieux que si c'était moins bien ...

Il n'y a aucune lourdeur dans ce que j'ai indiqué car il n'y a aucune construction de html en vue d'une mise page (sauf le conteneur lui même).
que la css appliquée soit moins bien que si elle était mieux ne m'intéresse pas du tout. C'est évident mais comme ça fait plus d'un an que je n'aie même pas vu ce genre de possibilité ne serait ce qu'évoqué (-moz-border-radius is so hype is'nt it ?)

Bon bien sur j'aurais pu ne pas répondre à ta question (en fait je suis vraiment trop con moi) mais tu aurais pu surtout ne pas poser du tout la question puiqu'on connait déjà la réponse > personne n'y arrive.

Que moi j'y arrive après tout quelle importance.
clb56 a écrit :
Bon bien sur j'aurais pu ne pas répondre à ta question (en fait je suis vraiment trop con moi) mais tu aurais pu surtout ne pas poser du tout la question puiqu'on connait déjà la réponse > personne n'y arrive.

Que moi j'y arrive après tout quelle importance.

J'ai déjà dit que j'étais désolé de ne pas avoir fait preuve de tout le tact nécessaire.

Comme je le disais dans mon précédent message, je n'avais pas vu que c'est toi qui avais réalisé cette page. Je pensais que tu proposais juste une solution croisée au détour d'une page web.

Sur le fond du problème :
La question initiale portait sur border-radius. Comme on l'utilise souvent pour des blocs spécifiques plutôt que pour un bloc conteneur comprenant toute la page, j'ai plutôt pensé à un bloc simple, avec peu de contenu. Un peu comme le test que j'avais réalisé la semaine dernière :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Transposer ce modèle à une boîte fluide n'est pas évident. Il faudrait pour cela disposer de plus d'éléments de contenu à l'intérieur de cette boîte, ou alors en rajouter.
Bien entendu, dans la solution que tu proposes, on a tout le contenu nécessaire, vu qu'il s'agit d'un bloc ayant un contenu important et varié.
Je viens d'ailleurs de reprendre mes essais de cet après-midi pour faire quelque chose qui tient un peu la route, et on peut faire quelque chose du genre :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

Dans ce cas précis, j'ai utilisé un bloc conteneur et trois blocs enfants (haut, milieu et bas), avec un élément de contenu dans le bloc du haut et un dans le bloc du bas.
Mais si l'on n'a pas besoin de bordures avec images, ta solution est peut-être plus simple.

Voilà. Fin des hostilités ? Smiley cligne
mpop a écrit :

Transposer ce modèle à une boîte fluide n'est pas évident. Il faudrait pour cela disposer de plus d'éléments de contenu à l'intérieur de cette boîte, ou alors en rajouter.


Peut être mais quoiqu'il en soit celà mériterait d'être vérifier très pragmatiquement sur chaque cas concret. A t'on une construction du type :


<conteneur>
<element id="first_element"></element>
<element id="after_first_element"></element>

...

<element id="last_element"></element>

</conteneur>

???

Dans ce cas puisque 3+1=4 c'est bien ce qui suffit.

évidemment je laisse de coté la possibilité de id="before_last_element" pourtant très réelle.

Au bout du compte qu'a t'on ? > un conteneur avec 3 éléments (tu imagines un ul avec trois li !!!) est ce à ce point pléthore ?

PS : je suis très agressif mais peu rancunier.

PSbis : vu ton test > ah ben tu vois que ça marche
Modifié par clb56 (20 Feb 2006 - 02:08)
Salut,

@mpop > Pour les pauvres utilisateurs de IE, peux-tu modifier ta css :
div#entete {
background: url(data/06-haut-droite.png) no-repeat right top;
height:1%;
}

Pour qu'on puisse la voir. Merci par avance Smiley smile belle démo.
Modifié par papyjo (20 Feb 2006 - 07:45)
hello world Smiley biggol Smiley lol

à mpop

J'ai revu ton essai. Très bien rien à redire.

En fait dans le cas des bordures on a besoin de deux grands conteneurs dont l'un imbrique l'autre pour régler la question des bordures verticales et c'est bien ce que tu utilises.

Voici donc ma propre solution à cette affaire des bordures :
http://clb56.freezee.org/test_roundcorner/quatre_bordures.html

Evidemment inutile d'épiloguer sur le caractère extrèmement frustre de mes réalisations "graphiques". Je le sais déjà Smiley lol
Modifié par clb56 (20 Feb 2006 - 10:46)
clb56 a écrit :
En fait dans le cas des bordures on a besoin de deux grands conteneurs dont l'un imbrique l'autre pour régler la question des bordures verticales et c'est bien ce que tu utilises.

En fait, j'avais pensé faire un conteneur dédoublé (div imbriquée dans une autre div), mais je me suis rendu compte qu'un bloc conteneur et trois blocs enfants permettaient d'obtenir le même effet. Mais je retiens bien entendu cette possibilité.
papyjo a écrit :
Salut,

@mpop > Pour les pauvres utilisateurs de IE, peux-tu modifier ta css :
div#entete {
background: url(data/06-haut-droite.png) no-repeat right top;
height:1%;
}

Pour qu'on puisse la voir. Merci par avance Smiley smile belle démo.

J'ai fait un test avec IE 6, et ça marche. Le seul truc, c'est qu'il semble avoir du mal à afficher les images de fond correctement. Certaines disparaissent en partie. Mais si on recharge la page, tout passe.

La div#entete n'est pas vide (elle contient un h1). Que changerait l'utilisation du height: 1%; ? Qu'est-ce que c'est censé corriger ?

Edit: j'ai appliqué ce height: 1%; et ça a l'air de corriger le problème. Tu aurais un article ou un sujet du forum là dessus ?
Modifié par mpop (20 Feb 2006 - 16:05)
clb56 a écrit :
Voici donc ma propre solution à cette affaire des bordures :
http://clb56.freezee.org/test_roundcorner/quatre_bordures.html

Ça tient la route. Attention par contre à l'utilisation du sélecteur universel pour appliquer des marges à tes éléments à l'intérieur du conteneur : ça s'applique aux éléments de type bloc (et c'est bien), mais aussi aux éléments de type en-ligne.

Du coup, les span, em, strong même les liens se retrouvent dotés d'espaces blanc avant et après...
mpop a écrit :

Attention par contre à l'utilisation du sélecteur universel pour appliquer des marges à tes éléments à l'intérieur du conteneur :


ui, ui, ui...

en fait je n'utilise quasiment jamais ce sélecteur, mais comme je suis fainéant comme un poux, ben là je l'ai mis pour ne pas me fatiguer Smiley confused
J'ai tout simplement profité du fait que mon code, tout en étant consistant, reste quand même une épure par rapport à la complexité possible d'une page "réelle".

Evidemment * peut aussi permettre des choses très bien s'il est bien utilisé.

PS : bon, je te présente mes excuses pour ma mauvaise humeur d'hier.
Modifié par clb56 (20 Feb 2006 - 18:57)
Bonjour,

Je ne pensais pas que ma question allait soulever un tel engouement et une telle passion.
Allez, enterrez la hache de guerre, on ne parle que de code informatique... aucune raison de se battre pour ça !
Franchement, je suis impressionné par la réactivité de ce forum !

Je vous remercie de votre aide. Quoique je ne sais pas si je dois vous remercier, vu que je me retrouve maintenant avec un boulot monstre pour tester toutes vos solutions Smiley cligne . Surtout que mon idée n'est pas de creer un div 'coins arrondis' qui contient tout le contenu, mais des div 'coins arrondis', qui contiennent eux meme des divs 'coins arrondis'...
Je sens que je vais encore apprendre beaucoup de choses en testant tout ça... c'est ça l'important !

Pour avoir un aperçu (avec Mozilla, pour l'instant) de ce que je veux obtenir : www.ramenetascience.org
Toutes vos remarques sont d'ailleurs les bienvenues

Merci encore, à bientôt... et vivement css3 !
Modifié par zeltron (21 Feb 2006 - 00:30)
Pages :