28172 sujets

CSS et mise en forme, CSS3

Image en repeat-y

Bonjour j'ai chercher partout et j'ai pas trouver la solution a mon problème

je voudrais que mon image se répète verticalement mais si je met pas de width et height elle ne s'affiche pas ou si je met sa taille elle s'affiche mais ne se répète pas voici mes code pour de plus ample informations:

CSS:


body {
	margin: auto;
	background: #000000;
	padding: 0;
	color: #FFFFFF;
	font: 12px Maiandra GD, Verdana, Times New Roman, serif;
	height: 100%;
}

#main {
	width: 100%;
	height: 100%;
}

#header {
	background: url('/interface/header.png') no-repeat center;
	width: 100%;
	height: 166px;
}

#border-left {
	background: url('/interface/border-left.png');
	background-repeat: repeat-y;
	float: left;
	margin-left: 22%; /* On deplace le border en pourcentage de gauche */
	margin-top: 50px; /* Marge du haut */
	width: 21px;
	height: 83px;
}

#border-right {
	background: url('/interface/border-right.png') repeat-y;
	width: 21px;
	height: 83px;
	float: right;
	margin-right: 22%; /* On deplace le border en pourcentage de droite */
	margin-top: 50px; /* Marge du haut */
}


HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon titre</title>

<!-- Chargement du style -->
<link rel="stylesheet" media="screen" type="text/css" id="css" href="/css/style.css" />
</head>

<body>

<div id="main">
<div id="header">

<div>
  <div id="border-left"></div>
  <div id="border-right"></div>
</div>

</div>
</div>

</body>
</html>


Merci pour votre aide Smiley cligne
Modifié par subzeros (30 May 2009 - 01:20)
Salut,

C'est normal, si tu ne renseignes pas la hauteur et la largeur et que tu n'as pas de contenu, elles valent 0 ...
Mets du contenu dans tes div et tu verras ton fond apparaître sans hauteur ni largeur.
Salut,

Pourrais-tu donner une url vers une version en ligne de ta page, ou sinon au moins fournir les trois images de background ? Parce que là, personnellement j'ai du mal à voir comment elles doivent se répéter.
Voilà ce que je comprends :
- le haut de ta page doit avoir l'image headerdox.png en background
- au centre de ta page, tu dois avoir une colonne de contenu, en largeur fixe, dont la bordure doit être composée de borderleft.png à gauche et borderright.png à droite.

Ça c'est assez simple :
Tout d'abord, ta zone de contenu doit faire environ 700px de large. Donc crée une image de 700px de large, transparente, dans laquelle tu colles simplement borderleft.png à gauche et borderright.png à droite. Tu dois obtenir le résultat suivant:
+--------+--------------------------------------+--------+
| border |          partie centrale             | border |
|  left  |               vide                   |  right |
|  .png  |                                      |  .png  |
+--------+--------------------------------------+--------+
Ensuite c'est tout bête :
[b]HTML[/b]
<body>
    <div id="main">
    </div>
</body>

[b]CSS[/b]
body {
background: url(headerdox.png) 50% top repeat-x;
}

#main {
width:700px;
margin:0 auto;
background: red url(maNouvelleImage.png) repeat-y;
}
Merci pour ta réponse donc la j'ai modifier comme tu ma dit se qui donne


[b]CSS[/b]

/* Structure du site */
body {
	background: #000000 url('/interface/header.png') 50% top repeat-x;
	color: #FFFFFF;
	font: 12px Maiandra GD, Verdana, Times New Roman, serif;
}

#main {
	width: 700px;
	margin: 0 auto;
	background: red url('/interface/transparent.png') repeat-y;
}

#border-left {
	background: url('/interface/border-left.png') repeat-y;
	float: left;
	margin-top: 50px; /* Marge du haut */
	width: 21px;
	height: 83px;
}

#border-right {
	background: url('/interface/border-right.png') repeat-y;
	float: right;
	margin-top: 50px; /* Marge du haut */
	width: 21px;
	height: 83px;
}

[b]HTML[/b]

<body>

<div id="main">

<div>
  <div id="border-left"></div>
  <div id="border-right"></div>
</div>

<div id="corps">
	test <br /><br />test <br /><br /><br /><br /><br /><br />Test<br /> test
</div>

</div>

</body>


Problème l'image transparente je ne la voit pas par contre j'ai remarquer si je met un height sur l'image transparente elle s'affiche voici un screen

http://img35.imageshack.us/img35/9062/sanstitre1hfb.jpg

Par contre tu ne parle pas des border ? parce que il ne se répète toujours pas ou alors j'ai rien comprit Smiley smile
Modifié par subzeros (30 May 2009 - 10:59)
a écrit :
Problème l'image transparente je ne la voit pas par contre j'ai remarquer si je met un height sur l'image transparente elle s'affiche
Ben oui, comme te disait Agylus, si tu n'as pas de contenu, la div a une hauteur de zéro. Vu que l'image est en arrière-plan, tu ne la vois pas.

Si tu veux avoir toujours les bordures à l'écran, même avec un contenu vide, mets ton image transparent.png en background du body, et crée une div#header pour "héberger" ton image header.png.

a écrit :
Par contre tu ne parle pas des border ? parce que il ne se répète toujours pas ou alors j'ai rien comprit
Les div border n'ont rien à faire ici, tu peux les virer, le code HTML que je t'ai donné dans mon post précédent devrait amplement suffire. Et il n'y a pas vraiment de raison que ça se répète pas tel qu'est le code (ou alors c'est moi qui ai rien compris Smiley smile ). Met une page en ligne et donne nous l'url, c'est ce qu'il y a de plus commode.
Modifié par marcv (30 May 2009 - 11:13)
a écrit :
Les div border n'ont rien à faire ici, tu peux les virer, le code HTML que je t'ai donné dans mon post précédent devrait amplement suffire. Et il n'y a pas vraiment de raison que ça se répète pas tel qu'est le code (ou alors c'est moi qui ai rien compris Smiley smile ). Met une page en ligne et donne nous l'url, c'est ce qu'il y a de plus commode.


Si j'enlève le code pour les border il ne s'affiche plus puisque il sont a part du header je te donne le lien http://performant-heberg.no-ip.biz/
a écrit :
je te parler toujours de la même page
En allant à l'url que tu as donnée, on tombe sur un formulaire d'inscription à WoW PrOphecy. Je ne vois là aucune des images de background dont on parle depuis le début de ce post, pas de div#main, ni de div#border-left ou div#border-right. Alors si ça c'est la bonne page, faut m'expliquer deux-trois trucs Smiley smile
1. ton image de background pour #main est complètement transparente. Ce n'est pas pas du tout ce que je t'ai proposé (je t'avais même fait un schéma...)
2. le code HTML n'est pas non plus celui que je t'ai proposé (je te répète que tu n'as pas besoin de ces div border-xxx)

Rappel :
Ça, c'est pour une version avec les bordures qui s'adaptent à ton contenu. Si tu veux que tes bordures soient toujours visibles, même avec zéro contenu, je t'ai proposé une légère modification dans un post précédent.
marcv a écrit :

Ça c'est assez simple :
Donc crée une image de 700px de large, transparente, dans laquelle tu colles simplement borderleft.png à gauche et borderright.png à droite. Tu dois obtenir le résultat suivant:
+--------+--------------------------------------+--------+
| border |          partie centrale             | border |
|  left  |               vide                   |  right |
|  .png  |                                      |  .png  |
+--------+--------------------------------------+--------+


Ensuite c'est tout bête :
[b]HTML[/b]
<body>
    <div id="main">
    </div>
</body>

[b]CSS[/b]
body {
background: url(headerdox.png) 50% top repeat-x;
}

#main {
width:700px;
margin:0 auto;
background: red url(maNouvelleImage.png) repeat-y;
}


Je deviens lourd Smiley decu mais je débute je suis désolé mais quand tu a dit "Donc crée une image de 700px de large, transparente" se que j'ai fait et donc si je comprend bien tu aurai voulu que je mette les border de chaque coter sur l'image transparente ?

PS : J'ai mit a jour si tu peut aller voir se que sa donne si c'est bien sa que tu ma expliqué
Modifié par subzeros (31 May 2009 - 10:43)
Oui, c'est bien ça. Tu as rajouté une div#corps et une div#footer, mais ça ne remet pas en question le layout principal, donc ok.

N'est-ce pas le résultat que tu attendais ?
Impeccable c'est se que je voulait merci pour ta patience Smiley cligne parce que il en a fallu ^^
Modifié par subzeros (01 Jun 2009 - 01:06)
Sujet clos
Aller à