Espace Membre
Partenaires
GameCorp - Index des forums
Game Making
Programmation
Création de sites
[résolu] cadre en images.

[résolu] cadre en images.

fayt nagashimas Message lu Posté le 09 Août 2009 à 23:23 Bulle
Avatar de fayt nagashimas
Membre Avancé

Messages : 369
GCPoints : 59439
 J'en suis venu à faire pas mal de trucs en php, et au milieu du développement du système d'inscription, j'ai décidé de m'atteler à la galerie.

Ses fonctionnalités sont simples : on a une table pour la galerie. Cette table utilise un id pour lister les photos. En cliquant sur une flèche dirigée vers la droite, on incrémente l'id, à gauche on le diminue d'une unité. Avec la flèche du haut, on retourne au niveau des thumbnails. C'est assez archaïque, mais ça fonctionne, sur un fond blanc, avec une petite bordure pour les images.
Mais là... j'aimerais faire un cadre sympa, tout en images. J'utilise alors des divs auxquels j'applique un css tout bête.
Eh bien... le background-image ne marche pas, excepté sur la balise body. en revanche le background-color fonctionne. la pagination est médiocre et la barre de défilement est affichée à droite. Quand j'applique une couleur à chacun des divs du cadre, ils sont les uns au dessus des autres. Quand je les change pour des spans, tout disparaît.
Peut-être s'agit-il d'une erreur dans le code ? Mais je ne la trouve pas.

Css :

Citation :

body
{
background-Image: url("assets/fond.jpg");
background-repeat: repeat-x;
background-color: rgb(95, 94, 94);
margin-top: 30px;
margin-bottom: 15px;
font-size: 0.8em;
font-family: serif;
}

img
{
border-style: none;
}

.cadre{
margin: auto;
width: 446px;
height: 446px;
float:left;
}

.upleft
{
width: 23px;
height: 23px;
background-image: ("assets/galerie/topleftcorner.png");
background-color: red;
clear: left;
}

.upright
{
width: 23px;
height: 23px;
background-image: ("assets/galerie/toprightcorner.png");
}

.bottomleft
{
width: 23px;
height: 23px;
background-image: ("assets/galerie/bottomleftcorner.png");
clear: left;
}

.bottomright
{
width: 23px;
height: 23px;
background-image: ("assets/galerie/bottomrightcorner.png");
}

.up
{
background-image: ("assets/galerie/top.png");
background-repeat: repeat-x;
width: 400px;
height: 23px;
}

.bottom
{
background-image: ("assets/galerie/bottom.png");
background-repeat: repeat-x;
width: 400px;
height: 23px;
}

.left
{
background-image: ("assets/galerie/left.png");
background-repeat: repeat-y;
width: 23px;
height: 400px;
clear: left;
}

.right
{
background-image: ("assets/galerie/right.png");
background-repeat: repeat-y;
width: 23px;
height: 400px;
}

.middle {
width: 400px;
height: 400px;
background-color: white;
}



xhtml :

Citation :

<body>

<div class="cadre">
<div class="upleft"></div>
<div class="up"></div>
<div class="upright"></div>

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

<div class="bottomleft"></div>
<div class="bottom"></div>
<div class="bottomright"></div>
</div>

</body>
Devil'sCry Message lu Posté le 10 Août 2009 à 11:08 Bulle
Avatar de Devil'sCry
Explorateur

Messages : 136
GCPoints : 47714
 tu as oublié pour certains background-image de mettre un "url" avant tes parenthèses, comme tu l'as fais dans Body.
We are falling, The light is calling, Black night, Dark sky, The Devil's Cry.
fayt nagashimas Message lu Posté le 10 Août 2009 à 13:31 Bulle
Avatar de fayt nagashimas
Membre Avancé

Messages : 369
GCPoints : 59439
 Effectivement. L'inconvénient quand on copie-colle des instructions...

Eh bien, toutes les images sont placées les unes au-dessus des autres.
Devil'sCry Message lu Posté le 10 Août 2009 à 13:36 Bulle
Avatar de Devil'sCry
Explorateur

Messages : 136
GCPoints : 47714
 Oui, c'est normal, le <Div> renvois à la ligne à sa fermeture.
Utilise plutôt des <span>.
We are falling, The light is calling, Black night, Dark sky, The Devil's Cry.
fayt nagashimas Message lu Posté le 10 Août 2009 à 13:57 Bulle
Avatar de fayt nagashimas
Membre Avancé

Messages : 369
GCPoints : 59439
 Ca ne fonctionnait pas avec des spans, alors j'ai utilisé un tableau à la place. Le positionnement est niquel, et il s'étend sans problème. Merci beaucoup pour ton aide, une fois de plus !
Daru13 Message lu Posté le 10 Août 2009 à 15:16 Bulle
Avatar de Daru13
Membre Elite

Messages : 2883
GCPoints : 107892
Devil'sCry a écrit :

Oui, c'est normal, le <Div> renvois à la ligne à sa fermeture.
Utilise plutôt des <span>.



Euh tu es sur de ça ? :crazy:
Personnellement j'aligne plusieurs div sans problème et sans retour à la ligne...
Devil'sCry Message lu Posté le 10 Août 2009 à 15:46 Bulle
Avatar de Devil'sCry
Explorateur

Messages : 136
GCPoints : 47714
Citation :

Euh tu es sur de ça ? "/>
Personnellement j'aligne plusieurs div sans problème et sans retour à la ligne...


Oui, sûr à 100%.
Pour aligner plusieurs div, tu peux mettre float: left ou dans un tableau ou ... , mais nature elles ne le sont pas.
Après moi je travail avec IE 8, peut être que FF gère ça différement.
We are falling, The light is calling, Black night, Dark sky, The Devil's Cry.
GameCorp - Index des forums
Game Making
Programmation
Création de sites
[résolu] cadre en images.
Répondre
GameCorp - Site d'apprentissage et d'entraide à la création de jeux vidéo.
XHTML Valid 1.1 - Page générée en 0.0806 secondes