Version complète: sur le forum Webmaster Hub : Bordures des div
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
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 wink.gif

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 ?
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 smile.gif

Code HTML
HTML
<div id="global">

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

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


Code CSS
CODE
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 :
HTML
<div style="background bhaut[...]">&nbsp;</div>
<div style="background background">&nbsp;</div>
<div style="background bbas">&nbsp;<br /></div>


Et ça marche... que demander de plus tongue.gif

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

(background: url(nomdelimage.png) no-repeat top left; est à lire, je n'avais pas le code sous les yeux)
DarkVaV
CITATION(sarc @ lundi 20 août 2007 à 17:53) *
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 :
HTML
<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. wink.gif
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 happy.gif

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
CITATION(sarc @ mercredi 22 août 2007 à 16:04) *
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 wink.gif
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.gif shutup.gif)
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.