1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

SPAN tag isn't working for me

Discussion in 'HTML & Website Design' started by Glitcher, Dec 29, 2013.

0
  1. #1
    Okay, here's a sample of what I want to code:

    [​IMG]

    It's basically an ordered list, floated left, with a white star for a list style image. Except I want the third star to be red, so here's the code I used:

    .fl { float: left; }

ol { padding-top: 5px;
   width: 400px;
   font-family: Arial, Helvetica, sans-serif;
}

ol li {
   float: left;
   list-style-image:url(../images/starwhite.png);
   margin: 0 25px;
}

ol li a {
   padding: 0px;
   color: #FFF;
   text-decoration: none;
   font-size: 14px;
}

ol li span { list-style-image:url(../images/starred.png); }


------------


<ol class="fl">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <span><li><a href="#">Portfolio</a></li></span>
  <li><a href="#">Contact</a></li>
</ol>
    Code (markup):
    You can see that I added a <SPAN> tag on the third line of the list and targeted it in the CSS style to use 'starred.png'. This is the result:

    [​IMG]

    No red star! I thought my syntax might have been wrong, so I tried writing the following instead:

    <li><span><a href="#">Portfolio</a></span></li>
    Code (markup):
    and

    <span style="list-style-image:url(images/starred.png)"><li><a href="#">Portfolio</a></li></span>
    Code (markup):

    No change, I still see white stars. Did the <SPAN> tag stop working for me or something?
     
    Solved! View solution.
    Glitcher, Dec 29, 2013 IP
  2. #2
    I wouldn't add anything in between list items, usually. Its just forbidden:)
    Perhaps the following? I'd recommend class one list though...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <style>
            .fl{
                float: left;
            }
          
            /* style for class one list */
            ul.one{
                padding-top: 5px;
                width: 400px;
                font-family: Arial, Helvetica, sans-serif;
                background-color: gray;
            }
            ul.one li{
                float: left;
                list-style-image: url(../images/starwhite.png);
                margin: 0 25px;
            }
            ul.one li.starred{
                list-style-image: url(../images/starred.png);
            }
            ul.one li a{
                padding: 0px;
                color: #FFF;
                text-decoration: none;
                font-size: 14px;
            }
          
            /* style for class two list */
            ul.two{
                padding-top: 5px;
                width: 400px;
                font-family: Arial, Helvetica, sans-serif;
                background-color: gray;
            }
            ul.two li{
                float: left;
                list-style-type: none;
                margin: 0 25px;
            }
            ul.two li a{
                padding: 0px;
                color: #FFF;
                text-decoration: none;
                font-size: 14px;
            }
            ul.two li a:before{
                content: url(../images/starwhite.png);
            }
            ul.two li span a:before{
                content: url(../images/starred.png);
            }
        </style>
    </head>
    <body>
        <!-- class one list -->
        <ul class="fl one">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li class="starred"><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      
        <!-- class two list -->
        <ul class="fl two">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><span><a href="#">Portfolio</a></span></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </body>
</html>
    HTML:
     
    hdewantara, Dec 30, 2013 IP
  3. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hey, your first style method worked great! Thanks for your help, hdewantara. :)
     
    Glitcher, Dec 30, 2013 IP
  4. Irfan-khan

    Irfan-khan Greenhorn

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    thats really nice way to find the solution of the problem :
     
    Irfan-khan, Dec 30, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    ... and that really was the problem right there -- the ONLY tag that can be a direct child of a UL or OL is LI. NO other tags are allowed! Putting a span there that way isn't just invalid, it's outright gibberish by the HTML structural rules...

    Of course some slightly less vague classes might help matters too... and the nasty staircase bug that's likely to trip in legacy IE... and the presentational use of classes like the idiotic "FL" for float left defeating the entire point of even using CSS in the first place isn't helping much either.

    ... and I wouldn't be fixing the width of anything, I'd probably not use floats since you don't have visible, I'd try to avoid using the inaccessible train wreck of fixed metric fonts... and I wouldn't use list-image-style since that's unreliable cross-browser.

    I'd also consider using a empty span as the image sandbag, so you could leverage css sprites reducing the number of files.

    So for markup:

    <ul id="mainMenu">
	<li><a href="#"><span></span>Home</a></li>
	<li><a href="#"><span></span>Services</a></li>
	<li><a href="#" class="current"><span></span>Portfolio</a></li>
	<li><a href="#"><span></span>Contact</a></li>
</ul>
    Code (markup):
    and for CSS:
    #mainMenu {
	list-style:none;
	padding:0;
	margin:0;
	font:normal 100%/120% arial,hevletica,sans-serif;
	background:#333;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	display:inline-block;
	padding:0.4em 0.8em;
	text-decoration:none;
	color:#FFF;
}

#mainMenu a span {
	display:inline-block;
	vertical-align:middle;
	width:15px;
	height:15px;
	margin-right:0.4em;
	background:url(images/stars.png) 0 0 no-repeat;
}

#mainMenu a.current span {
	background-position:0 -16px;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#FF0;
}

#mainMenu a:active span,
#mainMenu a:focus span,
#mainMenu a:hover span {
	background-position:0 -32px;
}
    Code (markup):
    Threw in some hover states to show the advantages of the approach.

    Tossed a live copy up on my server.
    http://www.cutcodedown.com/for_others/glitcher/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/glitcher/

    is wide open for easy access to the gooey bits and pieces. It uses a single image:
    [​IMG]

    for all three menu states - normal, current and hover.

    Hope this helps.
     
    deathshadow, Dec 30, 2013 IP
  6. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    ^^^ Heh, nice trick, deathshadow. Changing the alignment of the background seems like an efficient way to cut down on files, but I prefer to keep icons separate anyway. I still adapted your style to highlight the icons for a cursor hover, so thanks for that. ;)
     
    Glitcher, Jan 1, 2014 IP