position css: problème absolu

Question

J'ai un problème de css. voici ce dont j'ai besoin.

Peu importe combien de mots le titre ont (exemple: le titre pourrait être What's new today?, pourrait être hello world)

il toujours une ligne d'arrière-plan passe par l'ensemble div, et l'arrière-plan du mot blanc. (Le mot doit être text-align:center; et il est cassé fond ressemble à la ligne)

Voici mon code:

<style> 
.ocell { 
width:960px; 
height:42px; 
text-align:center; 
padding: 20px 0 20px 0; 
} 
.wd { 
margin: 0 auto; 
background-col: white; 
margin-left: -10px; 
padding: 5px; 
} 
.line { 
position: absolute; 
border-bottom: solid 1px #999; 
margin-top:-18px; 
width: 960px; 
} 
</style> 
<div class="ocell"> 
<div class="wd">Title</div> 
<div class="line"></div> 
</div> 

également http://jsfiddle.net/zApLA/ peut-être peut également utiliser un background-image au lieu de la ligne. Merci.

Answer 1

Ceci peut être réalisé en utilisant simplement div avec fond de frontière pour la ligne, et l'élément de positionnement avec le texte sur cette ligne. Fiddle here.

Answer 2

Couple de problèmes avec votre CSS. Un - le div .wd couvre toute la largeur de la page (par défaut 100%) Deux - pas de z-index sset pour dire quelle div devrait être au-dessus de laquelle.

Essayez ce code (travaillé violon)

.ocell { 
width:960px; 
height:42px; 
text-align:center; 
padding: 20px 0 20px 0; 
} 
.wd { 
margin: 0 auto; 
background-color: #f0f; 
margin-left: -10px; 
padding: 5px; 
font-size:20px; 
    z-index:10; 
    border:1px solid #f0f; 
    display:inline; 
} 
.line { 
position: absolute; 
border-bottom: solid 1px #999; 
margin-top:-15px; 
width: 960px; 
    z-index:-1; 
}