Puis-je chevaucher les bordures CSS? Essayage de souligner du bord de la page à la fin du texte

J'essaie de centrer un en-tête (avec une largeur variable) et d'avoir le soulignement courant du bord gauche de la page à la fin du texte. À moins de manquer quelque chose, il ne semble pas y avoir de moyen facile de le faire! Le plus proche que je suis venu à ce que je veux est:Puis-je chevaucher les bordures CSS? Essayage de souligner du bord de la page à la fin du texte

<style type="text/css"> 

#wrapper1 { 
margin-right: 50%; 
border-bottom: 4px solid red; 
} 

#wrapper2 { 
text-align: center; 
position: relative; 
left: 50%; 
} 

h1 { 
display: inline-block; 
margin: 0 auto; 
border-bottom: 4px solid red; 
} 

</style> 

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>

De cette façon, le texte est centré avec une bordure agissant comme souligné, et la frontière wrapper1 étend depuis le bord gauche du centre. MAIS, parce que l'en-tête se trouve dans l'encapsuleur et que la bordure de l'encapsuleur est en dehors du contenu, la bordure de l'encapsuleur se trouve sous la bordure de l'en-tête.

Toutes les suggestions reçues avec gratitude - cela me rend fou!

Source

2010-03-07 Mike

Bon effet, bonne idée! +1 – Pindatjuh

Merci, en utilisant également un peu de jquery pour le faire glisser de la gauche. Un peu inutile mais j'aime bien à quoi ça ressemble! – Mike

Dans votre #wrapper2:

bottom: -4px;

Est-ce que faire bouger 4 pixels vers le bas pour chevaucher l'autre ligne. (Testé dans Safari, travaux)

Source

2010-03-07 19:41:29 Pindatjuh

Bingo! J'avais essayé d'ajouter et de supprimer 4px de partout, mais pas là! Merci. – Mike

Plus rapide que moi et plus simple aussi je pense. –

Le padding/marge n'était pas nécessaire, votre réponse est exactement égale puisque 'bottom: -4px' et' top: 4px' sont des synonymes. Bien que je préfère «bas», parce que cela implique que vous voulez qu'il se déplace vers le bas, d'en bas. – Pindatjuh

Essayez d'enlever à la fois le fond de rembourrage et le fond de la marge sur les deux emballages (réglé sur 0), puis ajoutez-le à l'intérieur seulement jusqu'à ce qu'il semble juste. OK, j'y suis allée, et ça marche pour moi. J'ai dû mettre la position relative sur les deux enveloppes, ce qui vous permet ensuite de pousser l'enveloppe intérieure vers le bas de quelques pixels depuis son emplacement d'origine.

<html> 
<head><title>test</title></head> 
<body> 
<style type="text/css"> 

#wrapper1 { 
margin-right: 50%; 
margin-bottom:0; 
padding-bottom:0; 
border-bottom: 4px solid red; 
position:relative; 
} 

#wrapper2 { 
text-align: center; 
position: relative; 
left: 50%; 
margin-bottom:0; 
padding-bottom:0; 
position:relative; 
top:4px; /*The width of the border doing the underlining*/ 
} 

h1 { 
display: inline-block; 
margin: 0 auto; 
border-bottom: 4px solid red; 
} 

</style> 

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div> 

</body> 
</html>

Source

2010-03-07 19:40:56

Oui, ça marche aussi. Il semble que je devais regarder de plus près comme l'enveloppe intérieure! – Mike

Puis-je chevaucher les bordures CSS? Essayage de souligner du bord de la page à la fin du texte

Répondre

Questions connexes