[Débutant]Petit problème de background sur une css

Bonjour à tous. J'ai acheté le livre de Raphaël (vraiment bien !) et je découvre ce forum.
Ma question concerne une css que j'ai découvert sur cette page: http://www.positioniseverything.net/articles/onetruelayout/example/borders
Je souhaiterais retirer la bordure des derniers blocs (2c et 3d dans l'exemple) mais j'avoue que la css est d'un niveau un peu trop élevé pour moi.
J'ai modifié la css comme ceci mais je n'ai réussi qu'à retirer le bas de la bordure:

#block_2 .last .verticalalign 
	{
	width: 25%;
	background-image:none;
	}
#block_3 .last .verticalalign 
	{
	width: 24.9%;
	background-image:none;
	}

Sinon si c'est impossible, est-il possible que seul le bloc central s'étire en fonction du contenu mais surtout pas les blocs 2c et 3d ?
Merci beaucoup pour vos idées.
Modifié par Franck51 (22 Mar 2006 - 16:04)

C'est possible, mais un peu compliqué.

L'exemple que tu veux retravailler utilise des fausses bordures à partir de plusieurs images de fond, sur plusieurs éléments (le plus souvent imbriqués). Un peu sur ce modèle là :

http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Pour supprimer les bordures, il faut supprimer les images de fond (et dans ce cas sans doute aussi les padding, pour ne pas perdre d'espace inutilement) sur tous les éléments concernés. Ça peut monter jusqu'à 6 éléments pour une boîte.

Merci Mpop. Même si c'est un peu compliqué, peux-tu me dire sur quelle partie de la css je dois intervenir pour n'agir que sur les blocs du bas ? Peut-être que je peux essayer, non ?

Ils sont sympa sur Position Is Everything, mais s'ils indentaient et commentaient leur code HTML on s'y retrouverait déjà mieux. Bon, c'est parti.
Prenons comme exemple la boîte de droite, le code correspondant (obtenu avec Firefox en sélectionnant le texte et en faisant Clic droit > Afficher le code source de la sélection) est le suivant :

<div class="box_copy last">
	<h2>Block 3d</h2>
	<p>filler</p>
	<p>filler</p>
	<p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
	<div class="verticalalign"><p>Snap 3d</p></div>
</div>

(j'indente un peu pour qu'on s'y retrouve mieux).

Les images de fond utilisées portent probablment sur la div globale (ayant les deux classes "box_copy" et "last"), sur le titre de niveau 2 (h2) à l'intérieur de cette div, sur la div de classe "verticalalign" et sur le paragraphe qu'elle contient.

Vu la manière dont est construit le code, c'est à dire à l'aide de nombreuses classes CSS, j'ai bien l'impression qu'il réutilise les mêmes images de fond pour certaines parties semblables des différents blocs. Du coup, supprimer une image de fond ne veut plus dire supprimer la référence à cette image de fond (cela supprimerait l'image de fond en question pour tous les blocs qui utilisent la règle CSS en question !), mais indiquer un background: none; pour tous les éléments des blocs visés. Un peu compliqué sur les bords.

Quoique, je pense à ça :

div.box_copy.last {background: none;}
div.box_copy.last * {background: none;}

On sélectionne d'abord les div ayant pour classes à la fois "box_copy" et "last" pour leur retirer leur background. Puis on fait de même pour tous les éléments contenus dans ces div.

Testé vite fait. Marche très bien avec Firefox ou Opéra, mais il me semble qu'IE comprend le sélecteur .classe1.classe2 comme si on avait uniquement .classe2 . Donc probablement pas exploitable...

--------------

Quoi qu'il en soit :
1/ Tu t'es lancé dans quelque chose d'un peu hardu tout de même !
2/ Je trouve à titre personnel que cet exemple donné par Position Is Everything est assez mauvais. Bon, en tant que démonstration du positionnement à volonté de colonnes, c'est pas mal. Mais pour la partie mise en place des bordures + simplicité et facilité de réutilisation du code, peut mieux faire !!!

À moins que tu ne saches ce que tu fais, je te déconseille d'essayer de partir de cette base pour un gabarit de page. Commence avec des choses un peu plus simples...

Je me permets de te renvoyer encore vers les deux exemples suivant si tu cherches à créer des bordures en images :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

Enfin, ta requête finale (seul le bloc central s'étire) est tout à fait réalisable. Je compte tester un gabarit de page de ce type bientôt, mais je n'en ai pas encore sous la main à montrer. Et donner des explications exploitables serait aussi long que de faire ce gabarit (pas bien compliqué, mais il faut avoir des bases solides).

Mille merci mpop pour ton coup de main. Oui, je suis bien conscient de m'être attaqué à un gros morceau mais j'avoue que c'est une mise en page qui convient tout à fait à ce que je veux faire (c'est pour un intranet).
De mon côté, j'ai essayé ceci (déja sur le bloc 2 pour voir):

#block_2  .last
	{
	background: none;
	}
	
#block_2  .last *
	{
	background: none;
	}

J'élimine bien toutes les bordures mais malheureusement, il me reste toujours celle de droite. Je vois pas pourquoi...
Je continue de chercher. Sinon, j'aime beaucoup aussi la présentation de ton site avec plusieurs petits blocs à droite et un en bas. C'est compliqué à faire ?Je peux te racheter la css?

Modifié par Franck51 (23 Mar 2006 - 11:27)