[CSS] entourer un cadre avec 6 images

les 4 coins, et les milieux horiz et vert

3 décembre 2005 à 15:07:02

Bonjour à tous !

Pratiquement tout est dit dans le titre, mais je vais essayer d'être plus clair.

J'ai 6 images : haut_gauche, haut_droite, bas_gauche, bas_droite, milieuhor, milieuvert (en JPG).

J'aimerais pouvoir placer les images dans les endroits qu'il faut des cadres, en sachant que j'ai suivi globalement le modèle du TP du Cours "Faites votre Design".

Seulement, comment faire pour dire "telle image ira dans tel coi, telle autre dans ce coin, et entre les 2 là il y aura celle-ci qui se répète".

Voilà, en éspérant avoir été assez clair.
Merci !

moejul

3 décembre 2005 à 15:09:16

Bonjour !

Je peux t'aider si tu me montres un aperçu de ce que tu voudrais obtenir

Spiky

3 décembre 2005 à 15:11:30

Essayes de jouer avec les position relatives et absolues

moejul

3 décembre 2005 à 15:15:07

Citation : Spiky

Essayes de jouer avec les position relatives et absolues

Mmh, cela ne fonctionne pas bien sous IE, je pense qu'insérer des divs et leur image en background serait plus approprié. J'attends qu'il me fournisse l'aperçu pour lui donner le code correct

Spiky

3 décembre 2005 à 15:22:29

C'est vrai que ce n'est pas une mauvaise idée, mais je comprend pas pourquoi est-ce que tu veux entourer ton cadre d'image de tous les cotés

StraToN

4 décembre 2005 à 13:36:16

Voilà en gros ce que je souhaite faire. Merci de votre aide !

Image utilisateur

Anonyme

4 décembre 2005 à 13:49:59

C'est possible de le faire en CSS 3, assez facilement.

StraToN

4 décembre 2005 à 16:12:19

OK, merci pour ta réponse.
Le problème c'est que je ne connais pas trop CSS3. J'en suis resté au CSS2 du SdZ. Peux tu me donner quelques pistes ?

moejul

4 décembre 2005 à 17:01:16

Salut, tout d'abord je te conseille de pas prendre 6 images mais 3 : Le haut (avec les 2 coins), le milieu (image d'un pixel de hauteur qu'on fera répéter) et le bas (avec les 2 coins).

Ensuite tu crée ce code dans le XHTML :

<div id="haut"></div>
<div id="milieu">
<p>Blablabla</p>
</div>
<div id="bas"></div>

En CSS :

#haut {
width: largeurdelimagepx;
height: hauteurdelimagepx;
background-image: url("haut.png");
background-repeat: no-repeat;
}

#milieu {
width: largeurdelimagepx;
background-image: url("milieu.png");
background-repeat: repeat-y;
}

#milieu p {
/* Ici, tu mets les propriétés que tu veux pour les paragraphes (tu les places). */
margin: ...px ...px ...px ...px;
padding: ...px ...px ...px ...px;
etc...
}

#bas {
width: largeurdelimagepx;
height: hauteurdelimagepx;
background-image: url("bas.png");
background-repeat: no-repeat;
}

J'espère t'avoir aidé

StraToN

4 décembre 2005 à 18:03:25

Effectivement c'est une methode qui fonctionnerait, mais je suis désolé, j'ai oublié de préciser que mon design est extensible... D'où problème :/

moejul

4 décembre 2005 à 21:54:25

Salut

Mmmh la méthode que je t'ai donnée sera extensible en hauteur... Tu peux faire pareil en largeur (mais alors il faudra bien 6 images). Tu as compris le principe je pense

Essaie quelque chose !

PaNTi

5 décembre 2005 à 18:08:01

Pourrait tu me donner un exemple de comment faire lorsque l'on a 6 images car je suis dans le meme cas que lui mais je n'y arrive pas

jumpy

5 décembre 2005 à 19:37:28

Je pense que tu pourrais t'inspirer du principe des portes coulissantes décrit par Douglas Browman, dont l'article est traduit sur Pompage.net : http://pompage.net/pompe/portescoulissantes/
La technique est appliquée à un menu mai le principe est le même : il faut utiliser une image gauche et une image droite qui s'écarte suivant la largeur du contenu (ou dans ton cas suivant la largeur de la page). Dans ton cas il est nécessaire d'utiliser 8 images je pense. Mais après tout dépend du résultat graphique que tu souhaite obtenir.

StraToN

18 décembre 2005 à 14:07:29

Bonjour à tous !

Désolé pour le retard à répondre à ce sujet. J'ai dû faire plusieurs essais pour finalement réussir à faire ce que je voulais.

Vous pouvez voir le résultat sur mon site : http://www.lesdesandgentlemen.c.la

Voici le XHTML

<div id="header">
<div class="haut_milieu">
<div class="droite_milieu">
<div class="gauche_milieu">
<div class="bas_milieu">
<div class="haut_gauche">
<div class="haut_droite">
<div class="bas_gauche">
<div class="bas_droite">

<p>
Du texte !
</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Ca fait beaucoup de <div> mais on peut remplacer tout ça par 2 include en PHP.

Ensuite, le CSS :

.haut_gauche

{

background-image : url("../images/haut_gauche.gif");

background-repeat : no-repeat;

background-position : top left;

}

.haut_milieu

{

background-image : url("../images/haut.gif");

background-repeat : repeat-x;

background-position : top;

}

.haut_droite

{

background-image : url("../images/haut_droite.gif");

background-repeat : no-repeat;

background-position : top right;

}

.droite_milieu

{

background-image : url("../images/droite.gif");

background-repeat : repeat-y;

background-position : right;

}

.gauche_milieu

{

background-image : url("../images/gauche.gif");

background-repeat : repeat-y;

background-position : left;

}

.bas_gauche

{

background-image : url("../images/bas_gauche.gif");

background-repeat : no-repeat;

background-position : bottom left;

}

.bas_droite

{

background-image : url("../images/bas_droite.gif");

background-repeat : no-repeat;

background-position : bottom right;

padding : 5% 5% 5% 5%;

}

.bas_milieu

{

background-image : url("../images/bas.gif");

background-repeat : repeat-x;

background-position : bottom;

}

Le principe important est de savoir que les <div> correspondant aux images se trouvant entre les coins doivent être déclarés avant les <div> des coins !

Voilà voilà !
Merci à tous pour vos conseils !

jp949

18 décembre 2005 à 14:26:32

tu avais la solution ici depuis 5 jours
http://localhost/spf_site/actu_01.php

StraToN

19 décembre 2005 à 22:15:42

Hum... Ca doit être une erreur d'inattention... Mais

localhost, c'est ton site en local...

Anonyme

19 décembre 2005 à 22:21:52

Citation : jp949

tu avais la solution ici depuis 5 jours
http://localhost/spf_site/actu_01.php

Citation : StraToN

Hum... Ca doit être une erreur d'inattention... Mais localhost, c'est ton site en local...

Oui mais c'est assez drôle je trouve

StraToN

20 décembre 2005 à 11:37:08

Je trouve aussi, mais bon, je ne voulais pas être trop sarcastique, 'veux pas d'ennuis moi

Bref, de toute façon, ca fera une solution supplémentaire. Il est temps de fermer ce post

jp949

20 décembre 2005 à 11:48:28

quoi vous ne pouvez pas rentrer sur mon serveur?
alors je donne l'adresse serveur externe
http://www.secpop-montpellier.fr/actu_01.php