CODEWITHSUNDEEP
csstexthtml
user1659445
user1659445

Reputation: 21

Remove space between span and text element

I'm trying to make a header's background color look like a rectangular speech bubble by adding a text element ◥. Below you can see the spanned text for the background shape and the style for ◥. But this creates a blank space between the bottom of the border and the ◥, and I would like the two to line up in order to look like a speech bubble.

Image of fail in action. https://i.sstatic.net/b0qnP.png

{block:Link}      
    <h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
        <div class="triangle">◥</div>
    </h1>
{block:Description}{Description}{/block:Description}    
{/block:Link}


.triangle{
    margin-left: 10px;
    font-size: 35px;
    color: #123033;
}
span.Headers{
    display: block;
    background-color: #123033;
    padding: 8px
}

I tried the trick with adding a parent group in which the font size is 0, and that didn't work. Nor did setting the margin on the header to 0. Putting the ◥ div on the same line hasn't done anything either. I spent about an hour looking through other questions to see what I could do, and I couldn't find a solution, but I am nub so forgive me if I missed something obvious.

Upvotes: 2

Views: 2928

Answers (2)

Mike Rock&#233;tt
Mike Rock&#233;tt

Reputation: 9007

It is unreliable to use text to create the effect. Different devices will render it differently, which is not what you want.

In your case, it would be best to use an image with the same colour, placing it in a <div/> below the heading, ensuring that they touch each other. Then, add some padding on the left, as you did with the .triangle style.

I have created an image for you to use: Grab it here

All in all, your markup would look like this:

HTML:

{block:Link}   
    <div class="header">
        <h1><a href="{URL}" {Target}>{Name} ☞</a></h1>
        <div class="triangle"></div>
    </div>  
{block:Description}{Description}{/block:Description}    
{/block:Link}

CSS:

div.header > h1 {
    background-color: #123033;
    padding: 8px
}

div.header > div.triangle {
    background: url('Arrow.png') top left no-repeat;
    height: 50px;
    padding-left: 10px
}

Do let me know if this works for you.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

If you're able to use generated content (which, I suppose, depends on your site's users), then I'd suggest (with the slightly amended HTML for demo purposes):

<h1><span class="Headers"><a href="#something">a name</a></span></h1>​

The following CSS:

h1 {
    display: block;
    position: relative;
    background-color: #ffa;
    padding: 0.5em;
}

h1::after {
    content: '';
    border: 1em solid #ffa;
    position: absolute;
    top: 100%;
    left: 2em;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

JS Fiddle demo.

In terms of compatibility caniuse suggests that generated content is supported in IE from version 8 onwards.

References:

Upvotes: 1

Related Questions