Farflame Farflame - 7 months ago 23
HTML Question

Is there a way to insert these flags from this list without the ul .. li?

I want to use the list of flags from this url as they're ideal for my purposes.

https://github.com/lafeber/world-flags-sprite

The only problem is that in the example, the way to insert the flags is with something like this :

<ul class="f32">
<li class="flag ar">Argentina</li>
</ul>


The line from the CSS for Argentina looks like this :

.f32 .ar{background-position:0 -992px;}


The problem is, I want to add these flags into a table and I want them to use as little space as possible. Inside this list, they have big borders and make a mess of my table. I've tried to add them with :

echo "<td class = 'f32 flag ar'></td>";


But that doesn't work. Is there a way I could just add a flag into my td without having to alter the CSS (it's stored on the Github server and appears to be updated).

Answer

It works with divs. Just replace ul and li tags with divs and us the same class names.

I would suggest use div tables rather than the old fashioned(table, tr, ..) ones.

So all you have to do is replace all li & ul with div. Then style the div to padding:0px; margin:0px auto;

The snippet below shows an example :

.f16 .flag{display:inline-block;height:16px;width:16px;vertical-align:text-top;line-height:16px;background:url(https://raw.githubusercontent.com/lafeber/world-flags-sprite/master/images/flags16.png) no-repeat;}

.f16 .ad{background-position:0 -352px;}
.f16 .ae{background-position:0 -368px;}
.f16 .af{background-position:0 -384px;}
.f16 .ag{background-position:0 -400px;}
.f16 .ai{background-position:0 -416px;}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Country List</title>
	
</head>
<body>
<style type="text/css">
	ul { font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; }
	ul.f16 { max-width: 320px; display: inline-block; vertical-align: top; font-size: 12px; }
	ul.f32 { display: inline-block; }
	.f16 .flag, .f32 .flag { width: auto; clear: right; }
	.f16 .flag { padding-left: 24px; }
	.f32 .flag { padding-left: 44px; }
	.f16 abbr, .f16 i { display: inline-block; width: 24px; }
	.f32 abbr, .f32 i { display: inline-block; width: 32px; line-height: 32px; vertical-align: bottom; }
	.f16 i { margin-left: -48px; margin-right: 24px; color: silver; }
	.f32 i { margin-left: -76px; margin-right: 44px; color: silver; }
	.flag.deprecated { color: silver; }
	.flag.island { color: navy; }
</style>

<div class="f16">
<abbr>  </abbr><li class="flag ac island"><i>AC</i>Ascension Island</li><br/>
<abbr>AD</abbr><div class="flag ad">Andorra(in div)</div><br/>
<abbr>AE</abbr><div class="flag ae">United Arab Emirates(in div)</div><br/>
<abbr>AF</abbr><div class="flag af">Afghanistan(in div)</div><br/>
<abbr>AG</abbr><li class="flag ag">Antigua and Barbuda</li><br/>
<abbr>AI</abbr><li class="flag ai">Anguilla</li><br/>

</div>

</body>
</html>