28173 sujets

CSS et mise en forme, CSS3

[pb résolu] image non affichée en repeat-y

bonjour tout le monde,

voila, ca fait quelques heures que j'essaie d'afficher 2 images, mais impossible de l'afficher quand je met comme taille height:100% ou auto....

les voila :
http://shinois.free.fr/animesrecents/img/centre-gauche.jpg et http://shinois.free.fr/animesrecents/img/centre-droite.jpg

voila la page de test : http://shinois.free.fr/animesrecents/animerecent.html

le XHTML :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="animerecent.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="animerecent">
	<table width="100%" border="0">
	  <tr>
		<td><div id="haut-gauche"></div></td>
		<td><div id="haut"><div align="center"><img alt="animesrecents" src="img/animrecent-titre.jpg" /></div></div></td>
		<td><div id="haut-droite"></div></td>
	  </tr>
	  <tr>
		<td><div id="centre-gauche"></div></td>
		<td><div id="centre">
		dazdaz daz dza dza dazd az dza dza dza dza dzad az daz daz d
		dazdaz daz dza dza dazd az dza dza dza dza dzad az daz daz d
		dazdaz daz dza dza dazd az dza dza dza dza dzad az daz daz d
		dazdaz daz dza dza dazd az dza dza dza dza dzad az daz daz d
		dazdaz daz dza dza dazd az dza dza dza dza dzad az daz daz d
		
		</div></td>
		<td><div id="centre-droite"></div></td>
	  </tr>
	  <tr>
		<td><div id="bas-gauche"></div></td>
		<td><div id="bas"></div></td>
		<td><div id="bas-droite"></div></td>
	  </tr>
	</table>
</div>


</body>
</html>


le CSS : 


body
{
background: black;
}

#animerecent table
{
	border-collapse: collapse;
	margin: 0;
	padding: 0;
}

#animerecent table tr, td
{
	margin: 0;
	padding: 0;
}

#animerecent #haut-gauche
{
	width: 40px;
	height: 66px;
	background: url("img/haut-gauche.jpg") no-repeat;
}

#animerecent #haut
{
	height: 66px;
	width: 100%;
	display: block;
	background-image: url(img/haut.jpg);
	background-repeat: repeat-x;
}

#animerecent #haut-droite
{
	width: 40px;
	height: 66px;
	background: url("img/haut-droite.jpg") no-repeat;
}

#animerecent #centre-gauche
{
	display: block;
	height: 100%;
	width: 40px;
	background-image: url(img/centre-gauche.jpg);
	background-repeat: repeat-y;
}

#animerecent #centre-droite
{
	display: block;
	height: 100%;
	width: 40px;
	background-image: url(img/centre-droite.jpg);
	background-repeat: repeat-y;

}

#animerecent #bas-gauche
{
	width: 40px;
	height: 66px;
	background: url("img/bas-gauche.jpg") no-repeat;
}

#animerecent #bas
{
	height: 66px;
	width: 100%;
	background-image: url(img/bas.jpg);
	background-repeat: repeat-x;
}

#animerecent #bas-droite
{
	width: 40px;
	height: 66px;
	background: url("img/bas-droite.jpg") no-repeat;
}

#animerecent #centre
{
	width: auto;
	height: auto;
	display: block;
	background: #03a5e8;
}



voili voilou, dès que je met une taille fixe (height: 300px;) l'image est affichée, mais la taille ne varie pas... Or, le rectangle varie horizontalement, et normalement, verticalement Smiley cligne

voila, en esperant que quelqu'un a une ptite solution a tester Smiley langue

merci a vous
bonne journée
a++

Léo
Modifié par leomac (13 Aug 2007 - 14:21)
leomac a écrit :
mais impossible de l'afficher quand je met comme taille height:100% ou auto...

Tu veux dire que quand tu demandes à un bloc div vide de tout contenu de prendre une hauteur automatique, ou de prendre 100% de la hauteur d'un élément dont la hauteur n'est pas fixée (ni en pixels, ni en pourcentages), la div en question prend très logiquement une hauteur de 0px?

Ben ça me semble relativement normal comme comportement. Smiley smile

Solution: virer les div en question (inutiles), et mettre les images de fond sur les td concernés.
salut Florent

mici pour ton aide Smiley cligne

en faite, j'avais deja essayé ca :

<td id="centre-gauche"></td>


mais ca me fait le meme probleme...

En fait, je me disais que si je mettais comme hauteur 100% ca prendrait la taille maximale... mais la, le bloc mesure 0px, donc aucune image n'est affichée...

j'ai quand meme reessayé en mettant l'attribut id à la balise td, mais toujours pas...

le css est vraiment trop difficile, je trouve... Smiley langue


pour restreindre la recherche, voila l'attribut css de l'id centre-gauche :


#animerecent #centre-gauche
{
	display: block;
	height: 100%;
	width: 40px;
	background-image: url(img/centre-gauche.jpg);
	background-repeat: repeat-y;
}

#animerecent #centre-droite
{
	display: block;
	height: 100%;
	width: 40px;
	background-image: url(img/centre-droite.jpg);
	background-repeat: repeat-y;

}



mici a++

Léo
Ou la contraire, non ? (que des divs et pas de tableaux). Parce que là on a quand même huit images de fond rien que pour les bords du tableau... Les quatres côtés et les quatre angles... Je pense que deux images pourraient suffire, une en haut et une en bas (si l'on connaît la largeur du tableau).
As-tu lu ceci : Bords arrondis ?
Dzana
Modifié par Dzana (12 Aug 2007 - 18:28)
salut Smiley cligne

oui, je connaissais, mais en fait, je voudrais que la largeur varie selon la résolution du navigateur (pour mon site Smiley langue )

je voudrais que le div prenne la valeur maximum Smiley langue arf, a chaque fois, je galere un long moment avant de trouver une solution... Smiley langue mais la, j'y arrive vraiment pas Smiley langue
leomac a écrit :
le css est vraiment trop difficile, je trouve... Smiley langue

Ou bien peut-être manques-tu un peu de rigueur? Si tu écris un code CSS non fonctionnel pour une div enfant d'un td, puis réutilises ce même code à l'identique pour le td... ben il y a des chances que ça ne marche pas.

Par exemple, tu déclares ton td en affichage de type bloc (display: block), alors qu'un td est normalement en affichage de type cellule de tableau (display: table-cell)... forcément, au mieux ça ne fera rien, au pire ça va mettre un bazar pas possible dans ta mise en page.

Tu pourrais tout simplement faire ceci (avec le code HTML correspondant, bien sûr):
td#centre-gauche {
	background-image: url(img/centre-gauche.jpg);
	background-repeat: repeat-y;
}
td#centre-droite {
	background-image: url(img/centre-droite.jpg);
	background-repeat: repeat-y;
}

Si ça ne marche pas, c'est que les chemins indiqués depuis la feuille de style vers les images sont faux. Smiley cligne
Modifié par Florent V. (12 Aug 2007 - 20:38)
salut Florent,

mici pour pour ton aide...
je viens d'essayer ton code en affectant l'id au td, et ca marche nickel !!

merci beaucoup pour ton aide, je suis pas assez attentif... En tout cas, a chaque fois, j'en apprends plus sur alsacreations xD

Encore merci pour votre aide et vos conseils !!

mici a+++

Léo Smiley cligne
Sujet clos
Aller à