Bonjour à tous, après avoir recherché en vain, je viens vous demander un peu d'aide.

J'ai fait ce design il y a un bon moment de cela.
http://rviper.free.fr/portfolio/
(je sais, les boutons sont moches, mais je veux que reprendre les coins que j'ai fait)

En HTML, avec des tableaux, c'était simple. Un tableau de 3x3. En haut à gauche, le coin «haut-gauche», idem avec les 3 autres coins. Les côtés, c'était l'image en background qui se répetait. Mais en CSS, comment faire? Je peux déjà afficher les coins, mais je dois mettre l'image en background au centre, et c'est ce que je n'ai pas réussis à trouver.

Je comptes faire mon site selon la résolution de l'écran du visiteur.

Merci d'avance.

Bon je suis pas expert en css mais je peux dire (j'espère ne pas me tromper) que pour faire un design adaptable à la résolution de la personne il faut utiliser des % dans ton code.
Par exemple menu = 10% du total

En espérant t'avoir aidé.

Principe :
http://wall.deblan.fr/1216021430/html/1/

<bloc d'une largeur X>
<div image de fond : coin haut gauche>
<div image de fond : coin haut droit>
<div image de fond : coin bas gauche>
<div image de fond : coin bas droit>
<div>contenu</div>
</div>
</div>
</div>
</div>
</div>

<bloc d'une largeur Y>
<div image de fond : coin haut gauche>
<div image de fond : coin haut droit>
<div image de fond : coin bas gauche>
<div image de fond : coin bas droit>
<div>contenu</div>
</div>
</div>
</div>
</div>
</div>

claw62 Ouais, ça je l'avais compris, mais merci quand même.

deepblue Je n'ai pas trop compris.
<div image de fond : coin haut gauche> ça veut dire quoi exactement? Je mets mon «img src=""» dans mon div? Et mon background-image aussi?

nan tu met ton image en fond, en background.
Chaque div aura une image de fond différente : un aura comme find le coin gauche du haut (placé en haut à gauche), n autre le coin droit du haut (avec l'image placé a droite, sur le haut), un autre avec le coin gauche du bas (place au coin gauche, en bas) et enfin le coin droit du bas (placé en bas à droit) dans un dernier div.
Tout sa placé dans un div global ou tu mettra le fond pour le contenu

deep pas sûr que le fait d'imbriquer 6 div soit judicieux...

[R]Viper j'ai beau réfléchir, si tu comptes faire un design extensible, je pense que le plus simple est de faire un bloc "contenu", dans lequel tu mets deux autres blocs, un par colonne (gauche et droite) de hauteur 100%. Chaque bloc "colonne" contient les coins, un collé en haut et l'autre collé en bas, et en background l'image qui fait le petit ascenseur.

C'est une méthode un peu barbare, mais je ne vois pas d'autre solution !

En revanche si tu choisis un design à largeur fixe, tout ça est pas mal simplifié, car le background de ton bloc "contenu" permet de faire les deux ascenseurs d'un coup, tes coins sont dans un bloc plutôt horizontal placé en haut et en bas de ton bloc contenu.

Dis moi si c'est pas clair, je te ferais un schéma... ^^

deepblue Encore une fois, je ne comprends pas trop tes 6 div imbriqués... =S

MathieuN7 Je peux toujours faire un design fixe finalement, cela semble réellement beaucoup plus simple.
Sinon, ton petit schéma, je refuserais pas de le voir. =)
Pour l'instant, je place mes coins de la façon suivante..

.tl (tl pour top left)
{
position: absolute;
background-image: url("img/menuhg.gif");
width: 11px;
height: 25px;
}

Et «j'appelle» div class="tl" dans mon body, mais je doute que ce soit la bonne façon de procéder.

[R]Viper > tu veux bien remplacer tes tableaux non ? Je te donne une méthode pour le faire sans tableau.

MathieuN7 > et pourquoi pas ?

[R]Viper je vais essayer de te faire le schéma avant 14h, si c'est pas fait à 14h je te le fais ce soir à 22h en rentrant du taff.

deep ça sert à quoi au juste d'imbriquer comme ça ? Moi ça me gène, l'impression de refaire ce que faisait Frontpage avec les tableaux !

http://bordel.deblan.fr/html/table2div.html
(code mode rapide)

Si demain tu veux changer de design en ne passant que par le css, tu peux.

Ca sert à quoi au juste d'imbriquer comme ça ? Ca permet d'éviter quel souci ?

Ou alors c'est juste par habitude, sans raison particulière ?

deepblue j'ai finalement réussis à avoir un semblant de ce que je veux, mais cela me reste tout de même difficile à accepter comme méthode.
http://wall.deblan.fr/1216169434/html/1/

Celà recréé mon bloc, mais quand j'écris, dans midc (pour middle center), à met des carrés blancs. =S

fait un screen.

MathieuN7 > je ne l'ai jamais fait avec autant de div. Ca permet d'oublier les tableaux qui étaient là pour la mise en page. Plus de tableaux, donc plus de problème aux changements de designs.

Je viens de penser à une autre méthode moins contraignante :

http://wall.deblan.fr/1216170539/html/1/

<div fond noir>
<div fond : http://rviper.free.fr/portfolio/img/midhc.gif >
img http://rviper.free.fr/portfolio/img/midhg.gif flottante à gauche
img http://rviper.free.fr/portfolio/img/midhd.gif flottante à droite
</div>

<div fond : image avec les pointillés : position gauche en repeay-y>
<div fond : image avec les pointillés : position droite en repeay-y>
<div><p>Contenu</p></div>
</div>
</div>

<div fond : http://rviper.free.fr/portfolio/img/midbc.gif >
img http://rviper.free.fr/portfolio/img/midbg.gif flottante à gauche
img http://rviper.free.fr/portfolio/img/midbd.gif flottante à droite
</div>
</div>

Au dodo

deepblue http://img291.imageshack.ack.us/my.php?image=csscb0.png

et si tu écris dans .centre ?

deepblue Dans centre, j'ai écrit. Il est à l'extérieur du menu.

Les tableaux c'est très bien. Tu peux les utiliser pour le graphisme, faut arreter cette parano des pages plus lourdes a charger ou du code modifiable...

On ne fera pas de nouveau un débat là dessus.

Mr_Monkey Si je veux quitter les tableaux pour migrer vers le CSS et les divs, c'est que je sais que cela est mieux, sinon je ne ferais pas toute ces démarches.

deepblue (et les autres) J'essaie de faire le design avec Dreamweaver, cela va réellement mieux; il me créé le CSS tout seul. Je viendrais vous dire lorsque cela sera terminé et/ou si j'ai des questions.