Vous pouvez émuler une position d'arrière-plan fixe qui n'est malheureusement pas prise en charge par IE6 (voir la réponse de nerdposeur) avec un positionnement "manuel" prudent en utilisant la position d'arrière-plan.Positionnez la grande image avec 0,0 offset. Utilisez la même image pour l'onglet sélectionné, mais en la décalant vers la gauche et vers le haut exactement par la position du coin supérieur gauche de l'onglet. Cela assurera la correspondance exacte des deux arrière-plans que vous voulez.
Vous semblez avoir un menu fixe, ce qui signifie que vous devez écrire avec soin les CSS de fond pour vos quatre éléments de menu, un par un. Bien sûr, si votre menu est dynamique, cette approche ne fonctionne pas. Voici une démo que je cuisinais rapidement en commençant par this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tabbed Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 20px;
padding: 0px;
background: #CACCB4;
font: 16px arial, sans-serif;
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
}
pre {text-indent: 30px}
#tabmenu {
color: #000;
border-bottom: 2px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #DEDECF;
background: #898B5E;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
#tabmenu a.active {
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
background-position: -125px -18px;
border-bottom: 3px solid #ABAD85; }
#content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #ABAD85;
padding: 20px;
border: 2px solid black;
border-top: none;
z-index: 2; }
#content a {
text-decoration: none;
color: #E8E9BE; }
#content a:hover { background: #898B5E; }
</style>
</head>
<body>
<ul id="tabmenu">
<li><a href="tab1.html">Enormous</a></li>
<li><a class="active" href="tab2.html">Flared</a></li>
<li><a href="tab3.html">Nostrils</a></li>
</ul>
<div id="content">
<p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
<p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
<br />
</div>
</body>
</html>
Ou fond: transparent; ? – strager
Merci pour votre aide. Je vais essayer "background: inherit" pour voir si cela fonctionne (avec une certaine restructuration comme vous l'avez suggéré). J'ai essayé beaucoup de façons avant, mais le mal de tête est de savoir comment mélanger l'arrière-plan des éléments de menu avec l'arrière-plan à motifs de façon transparente. Merci pour les conseils d'angle arrondis aussi! –
@ strager: Bien sûr, le fond: transparent est la première chose qui me vient à l'esprit. Mais j'aimerais que ce soit aussi simple. Le fait est que le menu de navigation est enveloppé à l'intérieur d'un calque avec une couleur d'arrière-plan. Donc, en utilisant transparent ici ne révélera pas le fond à motifs verts en dessous. Dites-nous si la chose héritée a fonctionné. –