Tag: span
Nabin Nepal (Starx) css html image span
April 6, 2012

Placing an icon beside the text of an H1 tag by using a span

Question by Only Bolivian Here

Only Bolivian HereOnly Bolivian Here

Here’s the HTML I’m trying to use:

<h1>Order Not Paid<span class="not-paid"></span></h1>

Of course if there is a better way please say so.

Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.

When I place text in the span, the icon shows correctly.

What CSS rule can I apply for this effect? Here’s what I have so far (It’s SASS, but easy to grasp):

h1 {
    font-size: 24px;

    span.not-paid {
        background-image: url('/Public/images/remove.png');
        background-repeat: no-repeat;
    }
}

I’d like the icon to appear where the span is.

Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.

<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>

Answer by Alex

AlexAlex

If the icon is small and not reused anywhere else just set it as part of the h1.

HTML:

<h1 class="not-paid">Order Not Paid</h1>

CSS:

h1.not-paid {
  font-size: 24px;
  padding:0 16px 0 0; /* whatever the dimensions the image needs */
  background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}

A little cleaner this way.

Answer by Starx

StarxStarx

First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.

h1 {
    font- size: 24px;
}

h1 span.not-paid {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}
Nabin Nepal (Starx) alt javascript span
April 5, 2012

'alt' inside span

Question by user1184254

user1184254user1184254

If ‘alt’ is inside ‘span’ would I need to change the following script

        function setNavi( $c, $i ) {
                var title = $i.attr( 'alt' );
                $('#title').text( title );

                var current = $c.triggerHandler( 'currentPosition' );
                $('#pagenumber span').text( current+1 );

            }

    $(function() {

        $('#carousel').carouFredSel({
            debug: true,
            responsive: true,
            circular: false,
            auto: true,
            prev: '#prev',
            next: '#next',
            items: {
                visible: 1,
                width: 200,
                height: '66%'
            },
            scroll: {
                onBefore: function( $oI, $nI ) {
                    setNavi( $(this), $nI );
                }
            },
                onCreate: function( $vI ) {
                    setNavi( $(this), $vI );
                }
            });

html:

<div id="carousel">
<span id="1"><img src="images/someimage.jpg"  alt="sometitle" /></span>
<span id="2"><img src="images/someimage2.jpg" alt="sometitle2" /></span>
</div>

<div id="navi">
 <p id="pagenumber">Now showing image <span></span> of 7.</p>
 <p id="title"></p>
</div>

the pagenumber is displaying correctly, but not the image title. also tried using ‘title’ instead of ‘alt’ but it still results in a blank title.

Answer by Starx

StarxStarx

You dont need to do this, its semantically incorrect. There is title field for span. Use that instead of alt.

...

Please fill the form - I will response as fast as I can!