28220 sujets

CSS et mise en forme, CSS3

Position des div et background-image

Bonjour à tous et toutes,

je cherche à créer une colonne à gauche de mon site.
Dans un div, j'ai mon contenu (menu), à hauteur variable. Sur la droite de ce div, j'ai une image en background (bordure de mon menu).

Mon problème est comment faire pour que ce background à gauche s'étire en fonction de mon div qui contient le contenu? Est ce que je doit "imbriquer" mes divs?

J'ai essayé différentes type de positions (absolute, relative, etc ...) et mon image d'arrière plan s'affiche quand je lui défini une valeur de hauteur (height:200px par exemple) mais je veux qu'elle s'étire en fonction de mon menu.

Merci d'avance!

Seb

NB: j'ai cherché le forum mais pas trouvé de solutions. Si cela a déjà été demandé, outes mes excuses, pointez moi sur le bon sujet Smiley cligne ...
dans le css, a l'endroit de ton menuu tu dois avoir un truc dans le genre :

#menu {
background-image: url(truc.png);
}

he bien rajoute juste
background-repeat: repeat-y;

ce qui fera que ton image de fond se repetera verticalement jusqu'en bas du menu...

p.s : si je n'ai rien compris, pourrais tu nous monttrer une screenshot?
Modifié par Keeper (24 Aug 2005 - 14:01)
Bonjour,

@Keeper
Quand il y a du code merci d'utilser la fonction code dans la barre d'outil Mise en forme

Voilà voilà
Merci pour la réponse!
Je pense que tu as compris. J'ai mis la répétition du background mais cela ne s'affiche pas (je pense que c'est parce que ce div ne contient rien ie texte, just un arrière plan).

Voici mon code xhtml:
<div id="leftblocks">
	<div id="leftblock-t_"></div>
	<div id="leftblock-tr_"><img id="leftblock_tr" src="images/leftblock_tr.gif" width="32" height="29" alt="" /></div>
	<div id="leftblock-title_"class="leftblocktitle">titre</div>
	<div id="leftblock-r_"></div>
	<div id="leftblock-content_">blablablablab<br /><br />blalalalalala</div>
	<div id="leftblock-b_"></div>
	<div id="leftblock-br_"><img id="leftblock_br" src="images/leftblock_br.gif" width="32" height="26" alt="" /></div>
</div>


C'est le div avec leftblock-r_ qui ne s'affiche pas.

Voici son css:

#leftblock-r_ {
        position:absolute;
        left:198px;
        top:29px;
	width:32px;
	background-image: url(images/leftblock_r.gif);
        background-repeat: repeat-y;


Si tu regarde ici: maxdev france, ce sont les 2 blocs à gauche que je veux convertir.
Pour le moment, cela ressemble à ça (attenion aux yeux, c'est pas très beau lol!):
<table width="230" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td style="width: 100%; background-image: url({image-path}leftblock_t.gif); background-repeat: repeat-x;"></td>
		<td rowspan="2"><img src="{image-path}leftblock_tr.gif" width="32" height="29"></td>
		<td><img src="{image-path}espaceur.gif" width="1" height="20"></td>
	</tr>
	<tr>
		<td width="198" height="30" rowspan="2" bgcolor="#FACC9B" valign="top" align="center" class="leftblocktitle"><!-- [block-title] --></td>
		<td><img src="{image-path}espaceur.gif" width="1" height="9"></td>
	</tr>
	<tr>
		<td rowspan="2" style="background-image: url({image-path}leftblock_r.gif); background-repeat: repeat-y;"></td>
		<td><img src="{image-path}espaceur.gif" width="1" height="21"></td>
	</tr>
	<tr>
		<td width="198" bgcolor="#FACC9B" class="leftblockcontent" style="width=100%; padding-left: 5px; padding-right: 3px"><!-- [block-content] --></td>
		<td><img src="{image-path}espaceur.gif" width="1"></td>
	</tr>
	<tr>
		<td style=" width: 100%; background-image: url({image-path}leftblock_b.gif); background-repeat: repeat-x;"></td>
		<td><img src="{image-path}leftblock_br.gif" width="32" height="26"></td>
		<td><img src="{image-path}espaceur.gif" width="1"></td>
	</tr>
</table>


Merci!
SebHascoet a écrit :
Merci pour la réponse!
Je pense que tu as compris. J'ai mis la répétition du background mais cela ne s'affiche pas (je pense que c'est parce que ce div ne contient rien ie texte, just un arrière plan).

Voici mon code xhtml:
<div id="leftblocks">
	<div id="leftblock-t_"></div>
	<div id="leftblock-tr_"><img id="leftblock_tr" src="images/leftblock_tr.gif" width="32" height="29" alt="" /></div>
	<div id="leftblock-title_"class="leftblocktitle">titre</div>
	<div id="leftblock-r_"></div>
	<div id="leftblock-content_">blablablablab<br /><br />blalalalalala</div>
	<div id="leftblock-b_"></div>
	<div id="leftblock-br_"><img id="leftblock_br" src="images/leftblock_br.gif" width="32" height="26" alt="" /></div>
</div>


C'est le div avec leftblock-r_ qui ne s'affiche pas.
[...]
Merci!


Heuuu houlà !
Ça fait beacoup de balises pour pas grand chose, ça. Ça ne sert à rien de virer les tableaux si c'est pour en remettre autant après Smiley smile

Le problème vient que tu penses encore de la même facon qu'avec les tableaux. Moi je verrais ton machin comme ça :


<div id="menu_principal">
 <h1>Menu Pricipal</h1>
 [... menus en liste ... ]
 <hr />
</div>


Pour le div principal tu lui mets une image de fond qui se répète verticalement et qui représente en fait une ligne de l'image de fond du menu.

Le H1 a une image de fond qui ne se répète pas et qui comprend tout le haut du bloc avec l'arrondi.

le HR (bon ou un autre truc, c'est compliqué à styler tu peux utiliser autre chose) comprend tout le bas du bloc avec l'arrondi.

Ce qui donnerait un truc du style (non testé, juste à titre indicatif): 

div#menu_principal
{
  background-image: url( ligne-fond.png );
  background-repeat: repeat-y;
  ...
}

#menu_principal h1
{
  color: #FF6600;
  margin: 0;
  text-align: center;
  background-image: url( haut-menu.png );
  background-repeat: no-repeat;
  ...
}

#menu_principal hr 
{
   background-image: url( bas-menu.png );
   background-repeat: no-repeat;
   ...
}


ça me paraît beaucoup plus simple et a de ce fait moins de raisons de ne pas fonctionner Smiley cligne
Merci!
je vais essayer ca ce soir et voir ce que ça donne. va falloir que je recoupe mon modele d'abord.

C'est vrai, j'ai encore du mal à penser en terme de "blocs" et non de cellules et tables mais je me soigne Smiley cligne
Re bonjour,

Merci encore pour ton aide lanza, ça marche nickel!
J'ai effectivement eu quelques problèmes pour coder le hr mais tout va bien maintenant.
Par contre, j'aimerais savoir comment mettre un padding left sur mes blocs de gauche.

Voici mon xhtml:
<div id="leftblock">
<h1><!-- [block-title] --></h1>
<p class="leftblockcontent"><!-- [block-content] --></p>
<hr />
</div>


et son css:
/* Début Leftblock */
#leftblock {
background-image: url(../images/leftblock_backg.png);
background-repeat: repeat-y;
}

#leftblock h1 {
width:216px;
height:20px;
margin: 0px;
background-image: url(../images/leftblock_haut.png);
background-repeat: no-repeat;
color: #FF6600;
padding-top: 15px;
text-align: center;
font-size : 16px;
font-family : Arial;
font-weight: bold;
}

#leftblockcontent {
color : #000000;
font-size : 11px;
font-family : Tahoma;
padding-left: 55px;
}

#leftblock hr {
width:216px;
height:25px;
margin: 0px;
border: 0px;
background-image: url(../images/leftblock_bas.png);
background-repeat: no-repeat;
}
/* Fin Leftblock */


mais je n'arrive pas insérer le padding left (je l'ai mis ici sur #leftblockcontent à titre d'exemple avec une grande valeur - 55px - pour tester mais cela ne fonctionne pas).
Le seul endroit ou cela fonctionne est quand je le mets dans #leftblock (mon conteneur) mais cela me décale tout le reste également.

Comment faire pour que seul le contenu soit décalé ?

Encore merci!

Seb
ton p a une class leftblockcontent alors que ta règle css représente un id.

remplace 
#leftblockcontent 
{
...
}


par 

.leftblockcontent 
{
...
}


ça devrait marcher.
Sujet clos
Aller à