Bordures des div

[DarkVaV]

Bonjour,

J'ai un problème de bordures avec les div.

Je souhaiterai faire deux bordures en haut et en bas :

bHAUT.png

bBAS.png

et entre les deux un background

background.png

pour former qqchose comme :

Mais je n'arrive pas à mettre les bordures avec des images, les div s'affichent sans rien...

Si quelqu'un pouvait m'éclairer, merci

[nicoo]

As tu un début de code à nous montrer ?

[DarkVaV]

J'ai essayé plein de trucs, mais rien ne marche...

border-top : url('....');

exemple

[nicoo]

Un peu léger ton essai

Commence par faire ce tuto par exemple afin de te faire la main : http://www.alsacreations.com/articles/cadre/

[edit]après relecture de ton post et celui de sarc je m'aperçois que je réponds à côté mea culpa[/edit]

Pourrais tu nous transmettre le rendu visuel de ce que tu cherches à obtenir afin de trouver une solution ?

Modifié 20 Août 2007 par nicoo

[Sarc]

Bonjour,

Il n'existe à ce jour, à ma connaissance, aucun moyen de faire ce que tu veux faire totalement en CSS...

Il te faut faire un mélange HTML et CSS.

En CSS tu déclares le background de toute ta div, et en HTML tu es obligé de mettre <img src=...> en haut, puis en bas, pour faire "bordure". Il faut également mettre les paddings à 0 en haut et en bas de ta div, pour que les images collent bien le bord.

[Dudu]

Salut

Ça m'a l'air parfaitement possible

Code HTML

<div id="global">

<div id="en-tete">[...]</div>
<div id="contenu">[...]</div>
<div id="pied-de-page">[...]</div>

</div> <!-- #global -->

Code CSS

div#global {background: transparent url(background.png) repeat-y;}
div#en-tete {background: transparent url(bhaut.png) no-repeat;}
div#contenu {background-color: transparent;}
div#pied-de-page {background: transparent url(bbas.png) no-repeat;}

Il faudra que tu ajustes tes conteneurs pour qu'ils aient la même largeur, et t'assurer qu'il n'y a aucune marge extérieure ou intérieure qui viendrait séparer les 3 parties.

[DarkVaV]

Finalement j'ai fait quelque chose de plus facile...

Un peu pareil :

<div style="background bhaut[...]"> </div>
<div style="background background"> </div>
<div style="background bbas"> <br /></div>

Et ça marche... que demander de plus

Faut juste que je revoit ma mise en page derrière, mais c'est bon

(background: url(nomdelimage.png) no-repeat top left; est à lire, je n'avais pas le code sous les yeux)

Modifié 21 Août 2007 par DarkVaV

[DarkVaV]

En CSS tu déclares le background de toute ta div, et en HTML tu es obligé de mettre <img src=...> en haut, puis en bas, pour faire "bordure". Il faut également mettre les paddings à 0 en haut et en bas de ta div, pour que les images collent bien le bord.

Mon autre solution ne marchant pas finalement.

Je fais la tienne.

J'ai fait donc ce que tu demandes, sauf que les images sont décalées du bord, et malgré un :

<img src="images/backgroundb.png" style="padding-right: 0px; padding-left: 0px; padding: 0px; margin-left: auto; white-space:nowrap;">

l'image est toujours décalé, ce qui fait super moche par rapport au background qui est tout droit lui...

de plus le background continue pendant une ligne encore dessous car je ferme la div du background sous l'image

voici la capture d'écran : j'entoure le décalage et tu vois le background qui se répete une ligne dessus...

je suis desesperé, j'ai cherché pendant 4 heures, rien trouvé :'-(

[Sarc]

(Raaah, je voulais pas chipoter, mais ça y est, je vais devoir le faire vu que tu me poses une question)

Dudu, je suis pas fan de ta solution. Pour faire un menu stylisé, par exemple ce que veut faire DarkVaV, je suis pas spécialement pour mettre 3 div à la suite. Il risque d'y avoir des problèmes d'alignement, de taille, etc. L'avantage d'une seule div avec des images en haut et en bas, c'est que le menu reste une seule entité, contrairement à la solution des trois div, où on a trois entités distinctes, et qui peuvent donc se balader à leurs guises dans le cas de menus compliqués.

DarkVaV, pour t'aider il me faudrait ta page en ligne, si possible... Tu peux la mettre en ligne et donner l'URL ? Ca sera largement plus facile et immédiat de te donner une solution convenable.

[captain_torche]

Pareillement, j'essaye quand c'est possible de limiter le nombre de divs, et de styler le tout avec les balises internes : si titre il y a, j'en profite pour y mettre le fond du haut de mon élément, et j'essaye de faire de même en bas (sur un lien "plus d'infos", par exemple).

[DarkVaV]

Salut sarc,

j'ai fait la page en ligne :

ici ;-)

et ça donne en gros la capture que j'ai montré tout à l'heure, sans le fond de couleur

merci d'avance

[DarkVaV]

probleme resolu

j'ai mis un truc de trois colonnes comme ça

http://www.journaldunet.com/developpeur/tu...-colonnes.shtml

dans mon conteneur

avec les images en haut et en bas, le background fermant juste avant la bordure du bas

tout est parfait

[Dudu]

Dudu, je suis pas fan de ta solution. Pour faire un menu stylisé, par exemple ce que veut faire DarkVaV, je suis pas spécialement pour mettre 3 div à la suite.

Menu stylisé ? J'ai peut-être mal compris la question mais il me semblait qu'il s'agisse ici d'une mise en page.

Or dans une mise en page, mettre 3 div (qui contiendront un contenu balisé avec la plus grande sémantique) ne me paraît pas dérangeant.

Et effectivement, si les bhaut et bbas n'ont pas besoin de background.png on peut parfaitement se passer de mon div global

[Sarc]

Dudu, dans le message de départ, je n'étais pas sûr qu'il voulait une mise en page globale. Il me semblait que c'était par exemple pour un menu (où l'ouverture et la fermeture du menu sont deux images différentes), ou pour un cadre, plutôt que pour un design entier.

Pour le design entier, j'utilise aussi des div, mais je te disais juste que pour les menus ou les cadres, je préfère éviter la multiplication de div. (Je dis ça, et 5 minutes après je regarde mon code de Pitimonde, et je vois des div pour mes menus... :shutup:)