Question de débutant div et background

Bonjour,

J'ai créer un div appelé main-container. Dans ce div, j'ai mis 2 autres divs, un appelé main qui est une colonne de 547 px et l'autre appelé column, de 253 px. Tout est bien ouvert et fermé.
voici le code :

<div id="main-container">
    	<div id="main"> 
    		<div class="texte">
           	 	mon texte
       		</div>
        </div>
    
   		<div id="column"> 
    		<div class="texte">
            	mon autre texte
        	</div>
    	</div>
</div>

Niveau css, ça donne ça :

#main-container {
	position:relative;
	height:auto;
	background-image:url(../newsletter/feature-body.png);
	background-repeat:repeat-y;
	}
	
#main {
	position:relative;
	height:auto;
	width:547px;
	float:left;
	background-image [decu]../newsletter/main-background.png);
	background-repeat:repeat-y;
	}
	
#column {
	position:relative;
	height:auto;
	width:253px;
	float:left;
	background-image [decu]../newsletter/column-background.png);
	background-repeat:repeat-y;
	}

Mon soucis, c'est que nul part, le background ne s'affiche. ni dans le main-container, ni dans les deux autres divs. Comme je débute dans l'imbrication des divs, je vois pas trop où se situe le problème, qui à mon avis ne doit pas être bien compliqué.

PS : Je n'ai mis que les portions de code relatives à mon soucis, si vous pensez que le problème se situe autre part, je peux vous mettre le reste du code.
Modifié par nokow (23 Feb 2011 - 13:06)

Holà Nokow,

Le problème vient du fait que la syntaxe de ton background-image n'est pas correcte, elle doit être :

background-image: url('chemin-fichier');

CAD : ne pas oublier "url", et les apostrophes.

Par exemple :

background-image: url('../newsletter/column-background.png');

Et là, tout devrait fonctionner. Si jamais ça ne marche pas, teste avec une simple couleur (background: red;).

Bon courage,

Larry

Oups, j'ai répondu un peu vite, je n'avais pas fait attention au fait que tes deux blocs principaux flottaient. Il faut rétablir le flux normal, après ton div "column", avec un div "debug" (tu le nommes comme tu veux )

<div id="main-container"> 
        <div id="main">  
            <div class="texte"> 
                    mon texte <br />
                    mon texte <br />
                    mon texte <br />
                    mon texte <br />
                    mon texte <br />
                    mon texte <br />
            </div> 
        </div> 

        <div id="column">  
            <div class="texte"> 
                mon autre texte 
            </div> 
        </div> 
		<div class="debug"></div>
</div>

Et rajoute dans ta feuille de style :

.debug
{
clear: both;
}

Ou bien, rajoute aux propriétés CSS de #main-container :

overflow: auto;

A toi de voir ! Tu peux faire les deux.

Maintenant, tout devrait fonctionner !!

Bon courage,

Larry
Modifié par LARRy_ (23 Feb 2011 - 14:10)

LARRy_ a écrit :

CAD : ne pas oublier "url", et les apostrophes.

Par exemple :

background-image: url('../newsletter/column-background.png');

Apostrophe non obligatoire, ça fonctionne très bien sans.

Ca fonctionne, c'est merveilleux. Pour la syntaxe, je suis impardonnable, je ne me suis pas bien relu.

Pour le reste, étant débutant, je n'avais encore jamais eu ce cas, donc, je ne connaissais pas.

Un tout grand merci

Pas de quoi Nokow !

Et effectivement, les apostrophes ne sont pas obligatoires (ça je ne savais pas, merci JuJu57 ! )