28173 sujets

CSS et mise en forme, CSS3

Problème pour faire un joli cadre décoré.

Bonjour,

Voilà, je cherche à faire un cadre autour d'un bloc. Le CSS ne semble pas vraiment indiqué pour faire ça... la solution que j'ai trouvé consiste en un tableau de 3 colonnes sur 3 lignes, les cellules autour sont composées de fonds avec mes images, la cellule centrale de mon texte/contenu.

Mais comme je veux que ce contenu empiète sur le fond et les contours, j'ai tenté de mettre un "margin:-50px;" dessus.
Cela fonctionne sous Firefox en partie, en fait, les cellules qui en html sont écrites avant sont bien en-dessous (haut et gauches), mais celles écrites dans le HTML après (bas et droites) se retrouve en premier plan et cachent donc une partie de ma cellule principale.
Sous IE 7, toutes les cellules "contours" se retrouvent au dessus.

J'ai essayé de mettre un z-index:0 sur les contours et z-index:1 sur la cellule central (qui doit être en premier plan), mais ça ne change rien.

J'espère m'être bien fait comprendre et que vous pourrez m'aider.
:)

Merci.
Je serais très étonné que les css ne soient pas "indiqués" pour cela... Pourrais-tu nous fournir une capture d'écran du résultat auquel tu aimerais arriver?
Des marges négatives sur une cellule de tableau, ça me semble peu réaliste pour obtenir un résultat fonctionnel.

Il nous faudrait effectivement pour t'en dire plus une idée du résultat à obtenir. Et en particulier savoir s'il doit être extensible en largeur ou pas.
Florent V. a écrit :
Je réitère ma question : largeur fixe ou fluide ?


Pardon, non ce n'est pas fixe...

Florent V. a écrit :

Largeur fluide... on va s'arracher les cheveux pour rien (en particulier pour ce type de design). Mieux vaut dans ce cas conserver un tableau de mise en forme.


Mais le soucis est que je perds beaucoup de place ! Mes images de contours font 70px de large...si je ne peux pas écrire dessus, c'est embêtant.

Florent V. a écrit :

Et pour décaler les éléments dans une cellule de tableau, on cherchera plutôt du côté de position: relative.


Je vais chercher dans la doc, mais en quoi position relative va m'aider ? j'aurai toujours le même problème de juxtaposition non ?
Const a écrit :
Je vais chercher dans la doc, mais en quoi position relative va m'aider ? j'aurai toujours le même problème de juxtaposition non ?

Disons que le positionnement relatif est la méthode « naturelle » pour décaler un élément, et permet d'avoir des résultats sensiblement plus compatibles entre les navigateurs qu'avec des marges négatives (bien sûr, on utilisera par exemple des top: -20px ou left: -30px pour les décalages).

Par contre, le positionnement relatif est quelque peu limité, donc ça ne sera pas parfait.

Sinon, deux exemples sans tableau, le premier en largeur fixe :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
Et le second en largeur fluide (mais sans les explications) :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

Mais étant donné que tu es à la recherche du saint graal de la décoration des blocs en CSS, je ne peux pas t'affirmer que ça te permettra de résoudre ton problème.

Au pire, il faudra modifier ton design, pour faire quelque chose de plus régulier (en l'état, je vois mal comment tu peux espérer que les différentes images tombent pile...), avec des images sur les bords moins larges, etc.
Const a écrit :
Sinon, cette solution ne me semble pas viable car si on agrandit la fenêtre il a des trous...

Effectivement, sur un écran en 1600+ pixels de large (fenêtre maximisée) et sans donner de largeur maximale, ça fait des trous... Smiley rolleyes

La technique en question vise à grouper certains éléments (coins et bords) pour éviter d'avoir pile 9 éléments. Si ça n'est pas jouable de cette manière, je ne vois rien d'autre que le tableau à neuf cellules.
Sujet clos
Aller à