double image sur même ligne

10 nov. 2006, 02:58

Bonsoir,

Mon soucis est le suivant, je voudrais afficher une image de façon répéter horizontalement et au bout de cette ligne je voudrais afficher une image différente.

Voici mon code :
Fichier HTML

Code : Tout sélectionner

<div class="boite">
<h2><span class="titre">WELCOME</span>
<span class="fermer"></span></h2>
</div>

Fchier CSS

Code : Tout sélectionner

.boite {width: 400px; background: no-repeat bottom right;}
.boite h2 {width: 400px; height: 25px; cursor: move; font-weight: 400; background: transparent url(tib.png) repeat-x;}
.boite h2 span.titre {display: block; }
.boite h2 span.fermer { background: transparent url(fermer.png) no-repeat center right; }

malheureusement ce bout de code ne m'affiche pas l'image qui devrait se trouver sur la droite.

avez-vous une idée ?

Merci !

10 nov. 2006, 09:33

Je vois plusieurs détails à problème dans ton style CSS :

Code : Tout sélectionner

.boite h2 span.titre {display: block; }

Cette ligne va impliquer un retour de chariot après le contenu de ce span, tu ne pourras donc plus rien afficher au bout sur la même ligne : solution, supprimer cette propriété display;

Code : Tout sélectionner

.boite h2 span.fermer { background: transparent url(fermer.png) no-repeat center right; }

D'abord, il est préférable d'utiliser "inherit" au lieu de "transparent". Ensuite, tu as mis deux positions successives pour le centrage : "center" suivi de "right" : il faudrait en choisir une des deux. Malgré ça, il y a des chances pour que ça ne mette pas ton image complètement à droite. Pour ça, il faudrait légèrement modifier au niveau du HTML en inversant la position des <span> qui sont contenus dans le titre h2 et pour le span.fermer ajouter une propriété "float: right".

Au final ça va donner ce qui suite :
HTML :

Code : Tout sélectionner

<div class="boite">
  <h2>
    <span class="fermer"></span>
    <span class="titre">WELCOME</span>
  </h2>
</div>

CSS (avec quelques modifications) :

Code : Tout sélectionner

.boite {width: 400px; height: 25px; background: no-repeat bottom right;}
.boite h2 {line-height: 25px; cursor: move; font-weight: 400; background: inherit url(tib.png) repeat-x;}
.boite h2 span.fermer { background: inherit url(fermer.png) no-repeat right; float: right;}

Teste ça et reviens nous dire ce qu'il en est.

10 nov. 2006, 16:05

salut cyrano,

euh ça ne fonctionne pas

ça modifie complétement toute ma présentation...

Voici le code complet, hier je l'avais simplifié pour faciliter la compréhension.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link href="phpfr/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="psr" class="boite">
	<h2><span>WELCOME</span></h2>
	<p>bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	</p>
	<p>bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	bla bla bla	</p>
</div>
</body>
</html>

Code : Tout sélectionner

* {margin: 0; padding: 0;}
.boite {width: 400px; background: no-repeat bottom right; margin-bottom: 1.7em; }
.boite h2 {width: 400px; height: 25px; cursor: move; background: transparent url(titlebar.png) no-repeat bottom right;}
.boite h2 span {display: block; margin: 3px 0 0 10px; float: left;}

#psr {
position: absolute;
background-image: url(fond.png); 
}
#psr p {
margin: 0px 15px 0px 15px;
}

voici ce que j'ai actuellement (façon simplifié les images ne sont pas comme ça) :

et voici ce que je voudrais obtenir :

avec 1 étant une image répété et 2 une image simple non répété

Merci !

11 nov. 2006, 04:25

Pour ton entète tu peux très bien utiliser le positionnement floatant :
tu fait un bloc en

Code : Tout sélectionner

#abs{postion:absolute;}

puis dedans tu positionne ton bloc "2"

Code : Tout sélectionner

#droite{float:right;}

ce qui le placera à droite dans ton bloc.
puis

Code : Tout sélectionner

#fond{float:left;}

se qui donne :

Code : Tout sélectionner

<p id="abs">
<div id="droite">
bloc à droite
</div>

<div id="fond">
fond
</div>
</p>

J'ai fait sa ici
http://creatif-web.be/assoc/index.php
sa ma permit d'avoir un design liquide

11 nov. 2006, 15:26

Salut !

j'ai repris un peu ce que tu as fais ici ça m'a servis puisque j'y suis arrivé !!

Merci d'avoir éclairer ma lanterne sur le fonctionnement surtout !

11 nov. 2006, 17:22

tu peu mettre une troisième balise avec une image en repeat-x.
avec les floatant au dessus effet spéciaux garanti.

12 nov. 2006, 16:32

Attention de bien inverser le xhtml dans le positionnement des floatant.
le floatant de droite doit se mettre avant celui de gauche.
Et même chose IE crée un bug d'espace de 3 px, si quelqu'un peux m'aider à l'analiser, sa serai cool.
Merci
PS : Sa fonctionne quand même mais il faut utiliser l'écriture enfant parent qu'IE ne connait pas et qui est malgrés tout "ascendant".

double image sur même ligne

Qui est en ligne