En-tête CSS en utilisant la hauteur de ligne pour déplacer la bordure?

Question

J'utilise le CSS suivant:

h2 { 
    font-weight: normal; 
    border-bottom: 1px solid #DDD; 
    font-size: 1.6em; 
    font-style: italic; 
} 

h2 span { 
    position: absolute; 
    top: 7px; 
    padding-right: 6px; 
    background-color: #F9F9EE; 
} 

Utilisé comme:

<h2><span>abc</span></h2> 

donne l'effet suivant:

abc ------------------ 

Le texte 'abc' est le contenu de cap en la ligne pointillée est la bordure qui est décalée. L'approche suivante fonctionne bien tant que vous ne l'utilisez qu'une seule fois sur la page. Ma question est, comment puis-je obtenir le même effet sans utiliser le positionnement absolu ou même peut-être la hauteur de la ligne puisque je soupçonne l'un ou les deux sont les coupables.

Je me souviens d'avoir vu le même effet sur quelques blogs mais l'URL me manque.

Merci. :)

Answer 1

Je ne suis pas tout à fait sûr de ce que vous essayez de faire et quel est le problème exactement, mais en ajoutant position: relative; au style h2 créera un conteneur de positionnement dans lequel l'étendue position: absolute; calculera ses valeurs à partir de.

Answer 2

Je ne vois pas l'effet que vous avez décrit dans Firefox, seulement dans IE6. L'une des façons d'obtenir cet effet est d'utiliser une image de fond à pixel unique, carrelée horizontalement à 50% de la hauteur de la div. Ce n'est pas aussi agréable, car vous devez utiliser une image, mais elle devrait ressembler à ce que vous voulez sans affecter le code HTML.

Je vous suggère quelque chose comme:

h2 { 
    font-weight: normal; 
    font-size: 1.6em; 
    font-style: italic; 
    background: url(pixel.png) repeat-x 0% 50%; 
} 

h2 span { 
    padding-right: 6px; 
    background-color: #F9F9EE; 
} 

Je l'ai vérifié dans IE6 et Firefox, utiliser plusieurs fois sur la même page. :)

Answer 3

Ma façon de le faire est préféré:

<fieldset class="blah"> 
    <legend>Heading</legend> 
content... 
</fieldset> 

puis ajoutez

fieldset.blah {border-top: 1px solid #999;} 

dans votre CSS. J'espère que cela pourra aider.

Answer 4

Comme Rory mentionné, en utilisant la position relative sur l'étiquette H2 résout le problème sans l'utilisation d'une image.

h2 { 
    font-weight: normal; 
    border-bottom: 1px solid #DDD; 
    font-size: 1.6em; 
    font-style: italic; 
    position:relative; 
} 

h2 span { 
    position: absolute; 
    top: -0.8em; 
    padding-right: 6px; 
    background-color: #F9F9EE; 
} 

Cela fonctionne dans les trois navigateurs que j'utilise pour tester (IE, Firefox et Chrome).

Answer 5

Essayez ceci:

h2 { 
    font-weight: normal; 
    border-bottom: 1px solid #DDD; 
    font-size: 1.6em; 
    height: 0.75em; 
    margin-bottom: 1.85em; 
    overflow: visible; 
    font-style: italic; 
} 

h2 span { 
    padding-right: 6px; 
    background-color: #F9F9EE; 
}