Background: répéter un motif en fixant un écart entre chaque itération

Question

31 May 2007 à 17:52

Bonjour à tous,

Je souhaiterai savoir s'il est possible de répéter un élément en background tout en fixant un écart entre chaque itérations.

Par exemple faire une ligne en disant je voudrais que l'écart entre chaque ligne soit de 2 em. Je ne connais donc pas à l'avance la valeur en pixel de l'écart que je souhaite et ne peux donc pas l'intégrer à mon image de base.

Merci,

Antoine
Modifié par RockMakesMeSweat (31 May 2007 - 17:52)

fvsch

31 May 2007 à 18:21

Bonjour,

RockMakesMeSweat a écrit :
Je souhaiterai savoir s'il est possible de répéter un élément en background tout en fixant un écart entre chaque itérations.

Non. Du moins pas en CSS 2.1.

RockMakesMeSweat a écrit :
Je ne connais donc pas à l'avance la valeur en pixel de l'écart que je souhaite et ne peux donc pas l'intégrer à mon image de base.

Donc je ne propose pas cette solution... Smiley lol

Une piste à creuser tout de même : background sur élément de type en-ligne (par exemple un span).

RockMakesMeSweat

31 May 2007 à 18:42

Merci pour ton aide !

Je vais préciser mon problème : Je bosse sur un menu pour lequel j'ai utilisé la technique des portes coulissantes.

Voici mon code :



<!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" />
		<style type="text/css">

body{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #a19fa0;
	font-size: 12px;
	background-color: #ffffff;
}

#conteneur{
	margin: 15px auto;
	padding: 0 30px;
	width: 820px;
}

#menu{
	margin: 0;
	padding: 0;
	background-color: #ff5a01;
	color: #ffffff;
}

#menu ul{
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
}

#menu li{
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	white-space: nowrap;
	font-size: 1em;
	line-height: 3em;
}

#menu a{
	margin: 0;
	padding: 0 15px;
	color: #ffffff;
	text-decoration: none;
	display: block;
}

div.clear{
	clear: both;
}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<div id="menu">
				<ul>
					<li><a href="#">Cat&eacute;gorie 1</a></li>
					<li><a href="#">Cat&eacute;gorie 2</a></li>
					<li><a href="#">Cat&eacute;gorie 3</a></li>
					<li><a href="#">Cat&eacute;gorie 4</a></li>
					<li><a href="#">Cat&eacute;gorie 5</a></li>
					<li><a href="#">Cat&eacute;gorie 6</a></li>
					<li><a href="#">Cat&eacute;gorie 7</a></li>
					<li><a href="#">Cat&eacute;gorie 8</a></li>
					<li><a href="#">Cat&eacute;gorie 9</a></li>
					<li><a href="#">Cat&eacute;gorie 10</a></li>
				</ul>
				<div class="clear"></div>
			</div>
			<div id="main">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
				nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
				enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
				nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
				hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
			</div>
		</div>
	</body>
</html>

Ce qui donne : http://www.potatos.fr/test_css/exemple11/exemple11.htm

Ce que je souhaiterai, c'est, quand mon menu passe à la ligne, introduire une marge blanche entre mes deux lignes.
Je ne vois pas comment faire dans la mesure où tous mes éléments sont des bloc et/ou ne vont pas jusqu'au bout de mon bloc orange, donc pas possibilité de jouer avec les bordure ou les margin des li ou des a.

Une piste à laquelle je n'aurais pas pensé ?

Antoine

PS :

En gros je voudrais passer de ça :

à ça :

Modifié par RockMakesMeSweat (31 May 2007 - 18:47)

ghost

1 Jun 2007 à 03:09

Bonjour,

Et pourquoi pas ton bloc menu avec un background #fff, ton <ul> avec un background orange et un margin-top de 15px et surtout 2 listes?

RockMakesMeSweat

1 Jun 2007 à 09:51

Salut Ghost et merci de prendre le temps de répondre à mes questions !

Deux choses s'opposent à la solution de splitter mon menu en deux :

- Sémantiquement, ça m'embête d'avoir deux listes là où il ne devrait en avoir qu'une.
- Ce visuel est destiné à un site dynamique, donc impossible pour moi de savoir à l'avance où doit se trouver la coupure.

Si je peux outrepasser la première raison, la seconde, elle ne me laisse pas d'autre choix que d'éliminer cette solution.

Antoine

hakkou

1 Jun 2007 à 10:20

pourquoi t'essay pas de magouiller pour mettre les background sur les LI ? aprés tu met des padding dans les LI et tu les colles l'une aprés l'autre non ?

RockMakesMeSweat

1 Jun 2007 à 10:22

En fait le problème est que les li ne vont pas jusqu'au bout du div orange, donc si je met ma ligne blanche en background des li, cette ligne blanche n'ira pas jusqu'à l'extrémité du div orange.

Ca donnerai un truc comme ça :

Modifié par RockMakesMeSweat (01 Jun 2007 - 10:25)

ghost

1 Jun 2007 à 12:17

Re,

Si le contexte reste le même, je ne vois pas ou se situe le problème "dynamiquement parlant", à largeur de <li> fixe et largeur de page fixe, tu ne peux pas placer plus de 7 items par ligne et un poil de php devrait régler ce problème ?Et même pouvoir faire qu'un <ul>.

RockMakesMeSweat

1 Jun 2007 à 12:22

Pour l'exemple j'ai utilisé des textes de même longueur dans chacun de mes <li>.
Dans la réalité, l'intitulé de chaque menu est libre et peut donc contenir tantôt 3 caractères, tantôt 30, d'où la difficulté à évaluer le nombre limite de <li> par ligne.

Après c'est certain, je peux imposer des limites à l'utilisateur. Mais dans la mesure du possible, ce n'est pas la solution que j'aimerai adopter.

En tous cas merci quand même !

fvsch

1 Jun 2007 à 13:36

Je pense que le mieux à faire reste l'utilisation d'une image de fond de hauteur fixe (en pixels) sur ul, image répétée en hauteur et en largeur qui dessine le fond orange + la bordure blanche.

On donnera à ul une hauteur de ligne équivalente à la hauteur de l'image + sa bordure. Du moins équivalente avec la taille du texte par défaut (classiquement, à 12px). Donc pour une image de hauteur 36px, faire un ul {line-height: 3em;}.

Les li, eux, seront en display: inline (avec des espaces insécables si c'est jugé nécessaire), et probablement en vertical-align: middle si besoin.

Donc avec un texte ayant une taille par défaut, ça devrait coller. Par contre, pour éviter les problèmes de lisibilité avec texte blanc sur blanc quand on agrandit ou réduit la taille du texte, penser à un petit ul li {background-color: orange;}.

Ce n'est pas une solution parfaite, mais ça me semble satisfaisant.

RockMakesMeSweat

1 Jun 2007 à 14:29

Salut Florent et merci,

A défaut de mieux, je me suis en effet rabattu sur la solution d'une image en background.

Ca marche nickel pour peu qu'on ne modifie pas la taille des caractères. C'est dommage et si vous avez une idée pour contrer ce problème, je suis preneur !

Vous pouvez voir ce que ça donne ici : http://www.potatos.fr/test_css/exemple12/exemple12.htm

et voici le code associé :



<!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" />
		<style type="text/css">
body{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #a19fa0;
	font-size: 12px;
	background-color: #ffffff;
}

#conteneur{
	margin: 15px auto;
	padding: 0 30px;
	width: 820px;
}

#menu{
	margin: 0;
	padding: 0;
	background-color: #ff5a01;
	color: #ffffff;
	background-image: url(../fond_menu.gif);
	float: left;
	width: 100%;
}

#menu ul{
	margin: 0;
	padding: 0;
}

#menu li{
	margin: 0 8px;
	padding: 0;
	float: left;
	list-style: none;
}

#menu a{
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
}

#menu a:hover{
	background-image: url(../selecteur_2.gif);
	background-repeat: repeat-x;
	background-position: top center;
}

#menu li span{
	margin: 0 0 15px 0;
	padding: 12px 0;
	white-space: nowrap;
	font-size: 12px;
	line-height: 12px;
	display: block;
}

#menu li.select span{
	background-image: url(../selecteur_2.gif);
	background-repeat: repeat-x;
	background-position: bottom center;
	font-weight: bold;
}

#inter_menu_main{
	margin: 0;
	padding: 0;
	height: 1px;
	background-color: #ffffff;
	clear: both;
}

#main{
	margin: 0;
	padding: 0;
}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<div id="menu">
				<ul>
					<li><a href="#"><span>Catégorie 1</span></a></li>
					<li><a href="#"><span>Catégorie 2</span></a></li>
					<li><a href="#"><span>Catégorie 3</span></a></li>
					<li><span>Catégorie 4</span></li>
					<li class="select"><a href="#"><span>Catégorie 5</span></a></li>
					<li><a href="#"><span>Catégorie 6</span></a></li>
					<li><a href="#"><span>Catégorie 7</span></a></li>
					<li><a href="#"><span>Catégorie 8</span></a></li>
					<li><a href="#"><span>Catégorie 9</span></a></li>
					<li><a href="#"><span>Catégorie 10</span></a></li>
					<li><a href="#"><span>Catégorie 11</span></a></li>
					<li><a href="#"><span>Catégorie 12</span></a></li>
					<li><a href="#"><span>Catégorie 13</span></a></li>
					<li><a href="#"><span>Catégorie 14</span></a></li>
					<li><a href="#"><span>Catégorie 15</span></a></li>
				</ul>
				<div id="inter_menu_main"><img src="img/pi.gif" /></div>
			</div>
			<div id="main">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
				nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
				enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
				nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
				hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
			</div>
		</div>
	</body>
</html>

Sujet clos

CSS et mise en forme, CSS3

Background: répéter un motif en fixant un écart entre chaque itération