|
Devil'sCry |
Posté le 10 Août 2009 à 15:46 |
Messages : 136
|
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.
|
|
Daru13 |
Posté le 10 Août 2009 à 15:16 |
Messages : 2883
|
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 ? 
Personnellement j'aligne plusieurs div sans problème et sans retour à la ligne...
|
|
fayt nagashimas |
Posté le 10 Août 2009 à 13:57 |
Messages : 369
|
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 !
|
|
Devil'sCry |
Posté le 10 Août 2009 à 13:36 |
Messages : 136
|
Oui, c'est normal, le <Div> renvois à la ligne à sa fermeture.
Utilise plutôt des <span>.
|
|
fayt nagashimas |
Posté le 10 Août 2009 à 13:31 |
Messages : 369
|
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 |
Posté le 10 Août 2009 à 11:08 |
Messages : 136
|
tu as oublié pour certains background-image de mettre un "url" avant tes parenthèses, comme tu l'as fais dans Body.
|
|
fayt nagashimas |
Posté le 09 Août 2009 à 23:23 |
Messages : 369
|
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>
|
