Image de fond et div

Bonjour,

Voilà j'ai trois colonnes et j'aimerai appliquer des bordures dégradés de chaque côté de ce bloc de 3 colonnes. J'utilise déjà l'image de fond du body. Je ne vois pas trop comment faire.
Voici mon code.

<div id="milieu">
<div id="gauche">... </div> 
<div id="centre">...</div>
<div id="droite">.....</div> 
</div>

#milieu {
background: url(monimage.jpg) repeat-y top center;
}
#gauche {
float: left; 
background-color: Green;
width: 145px;
}
#centre {
float: left; 
background-color: #000;
width: 500px;
}
#droite {
margin-left: 645px;
background-color: Red;
width: 300px;
}

Je précise mon bloc de 3 colonnes a la même largeur que le site. J'aimerai que ces bordures apparaissent en dehors de la largeur de mon site. Je ne sais pas si je suis très clair.
Modifié par azzurro (23 Oct 2009 - 19:07)

Avec une capture commentée, ça sera plus clair

Vous trouverez ci-dessous le plan de mon site. Rien de bien exceptionnel. C'est du classique.
Ce que j'aimerai réussir à faire c'est à mettre une image en lieu et place des deux rectangles verts. Malheureusement je n'y arrive pas. Impossible d'utiliser le background dans la balise body car je l'utilise déjà pour faire un dégradé avec mon header.

Merci d'avance de votre aide.

Et si tu mettais ses images à même les col1 et col3. Tu mets ces 2 éléments plus large que prévu, dans ton css tu applique tes images en background positionné en left pour col1 et right pour col3 puis un padding qui va placer ton contenu à côté des images.

Julie,

Malheureusement c'est impossible.
J'ai déjà essayé la 3ème colonne passe en dessous des autres.

Pour rappel voici la structure de mon code.

<div id="global">
	<div id="header">...</div>
<div id="menu">...</div>
	<div id="centre">
		<div id="col1">...</div>
		<div id="col2">...</div>
		<div id="col3">...</div>
	</div>
	<div id="pied">...</div>
</div>

Ok, alors on revoir quelques petites choses :
Déjà la solution de Julie me semble la bonne, par contre fait attention avec les padding, ils ne sont pas compris pareil par tous les navigateurs, donc tu va devoir faire des patchs pour IE par exemple.
Par contre dans le html : inverse col2 et col3 c'est à dire :

<

div id="col1">...</div>
<div id="col3">...</div>
<div id="col2">...</div>

Ensuite dans ton css, pour tous tes blocks, il faut rajouter ces 2 lignes :
position:relative;
overflow:auto (ou hidden selon le cas, visible marche mal pour gérer les float)

ensuite pour col1 : float:left
et pour col 3 : float:right

Normalement ça devrait marcher

J'ai essayé mais malheureusement ça ne fonctionne pas. Lorsque j'élargie ma colonne1 la colonne 2 passe en-dessous.

as-tu élargie ton div "centre"? la colonne de gauche passe probablement en dessous par manque d'espace, ta largeur de ton div centre n'est peut-être pas la bonne.

Bonjour,

Rien ne t'empèche dans ce cas particulier de rajouter une div milieu2 pour rajouter tes bordures. Oui ça créé une imbrication supplémentaire, non ce n'est pas grave, tant que ça reste limité.

Pour résumé: J'ai bien fait ce qu'à indiquer HD ready.
Pour la col1 voilà le code css

#col1 {
left: -10px;
position:relative;
overflow:auto;
float: left; 
background-color: Green;
width: 145px;
}

Ma colonne1 se décale bien de 10 pixels. Il apparaît un décalage entre center et col1. Normal.
Impossilbe de faire disparaître ce décalage
Si j'agrandit de 10 pixels la col1 ou col2, le div col2 passe sous col3.

Merci d'avance de votre aide.

Je voyais plus quelque chose comme ça:

disons que tes images que tu veux ajouter ont 20px de large.

#centre { 
width: 1005px;
} 
#col1 {
display: block;
float: left;  
background: url(images1) left no-repeat; 
width: 135px;
paddind-left: 30px; 
} 
#col2 {
display: block;
float: left;  
background-color: #000; 
width: 500px; 
} 
#col3 {
display: block;
float: right;  
background: url(images2) right no-repeat; 
width: 290px;
paddind-right: 30px; 
}

J'ai mis padding à 30px histoire de laisser une espace entre l'image et le texte.
quand tu mets un padding faut enlever la valeur à ton width... c'est peut-être ce qui cause le décalage. Padding et width s'additionne, pour te donner la largeur total de ton block.

Merci Julie,

Le problème avec ta méthode c'est que la col1 ne se décale pas vers la gauche.
J'ai bien essayé de rajouter un left: -10px; mais sans succès.
Sinon pour le reste c'est parfait. Les différentes colonnes sont parfaitement alignés encore merci.

Il faudrait juste que les trois colonnes se décalent de quelques pixels vers la gauche.
Modifié par azzurro (26 Oct 2009 - 18:38)

Bon j'ai fait quelques modifs et ça à l'air de bien fonctionner.
Merci à tous et à toi Julie

Bonne soirée.
Modifié par azzurro (26 Oct 2009 - 18:45)

Qu'est ce que tu veux dire par "ne se décale pas à gauche"?

Dans le code que je t'ais donné, col1 n'est pas décallé, et n'as pas besoin de l'être. C'est l'intérieur qui va être décalé(ton texte, ton contenu), ornie l'image qui sera en background dans le css. Le padding se trouve à être une marge interne, pas comme margin, qui elle, crée un décalage externe à ton block.

Left:-10px, ne s'applique que si tu avait mis ton block en position relative(si je me souvient bien). Ici tu n'as pas besoin de faire ça. Left:-10px, est donc inutile.

Ton block centre doit être plus large que les block menu et header. Placé avec un margin:auto il devrait bien se centrer par rapport au 2 autres block plus haut.

EDIT: oups! trop lente!
Modifié par juliesunset (26 Oct 2009 - 18:56)

Et si il faut bien décaler la colonne. Sur mon image que j'ai posté un peu plus haut mon dégradé en vert clair et légèrement décalé par rapport au menu horizontal et au header.

Pour résoudre ce pbl j'ai mis dans mon div centre

#milieu {
position:relative;
overflow:auto;
left: -17px;
background: url() repeat-y top right;
width: 979px;
}

Sinon vu que j'emploie un padding j'ai des soucis dans ie6.
Et moi qui croyait arrivé au bout.

Si, j'ai bien vue qu'il y avait un "décalage", mais ce que je te dis c'est que tu n'as pas besoin de décaler tes colonnes...

Comment je peux expliquer ça...
Tu as 3 div principales, header, menu et centre. Disons que ta page fait 900px de large. Header et menu seront à 900px, placer avec un margin auto pour les centrer. Centre lui sera à 940px, placer également en margin auto, créant ainsi un décalage de 20 px de chaque côté par rapport aux div header et menu.
Ensuite reste plus qu'à placer tes 3 colonnes à l'intérieur du div centre, avec les valeur comme je t'es donné plus haut et puis voilà.

C'est beaucoup moins compliqué de cette façon.
Modifié par juliesunset (26 Oct 2009 - 20:58)

Je suis entièrement d'accord avec toi Julie.
Ta méthode est bien plus simple.
Malheureusement impossible de centrer mon div centre (ça ne s'invente pas).
Il se place en-dessous du div menu au même niveau sur le côté gauche.
Par contre côté droit il dépasse de 40 pixels.

Ma technique de left négatif dans le div centrer n'est pas terrible non plus. Dans ie6 ça me décale sur la droite la colonne verte de droite.

Bizzare que ça ne se centre pas, margin auto fonctionne bien d'habitude... l'autre solution serai peut-être de mettre tes 3 div principales à l'intérieur d'un autre div lui aussi placé en margin auto. Ce div là serait de même largeur que div centre.

En gros ça donnerais ça:

<div id="contenant">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="centre">
        <div id="col1"></div>
        <div id="col2"></div>
        <div id="col3"></div>
    </div>
</div>

Probablement qu'à ce moment les div se placeraient comme il faut. Ne pas oublier les margin:auto.

Le fait de te créer un feuille de base pourrais régler certains problème de différence entre les nav...
À voir ici
Et tu modifie selon tes besoins. Pour moi ça a régler certain problèmes entouka!

J'ai déjà cette structure avec un div centre.
Mais les margins auto ne fonctionnent pas.

En ce qui concerne mon problème avec ie6. j'ai trouvé une solution.
Je vais l'exposer ici ça peut intéresser quelqu'un
J'ai remplacé left: -10 px par margin-left: -10px

Et puis j'ai agrandi de 10 pixels mon header , mon menu et mon contenant.

J'imagine qu'il y'a beaucoup mieux comme méthode mais malheureusement il n'y que ça qui marche.

C'est bizzare que les margin auto ne fonctionnent pas... rendu là je ne peu plus t'aidé, ça dépasse largement mes compétences!

Effectivement il y a sûrement mieux comme méthode... là je trouve que ça fait un peu bidouille, mais bon, si ça semble fonctionner pourquoi pas.