Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Simple html/css code to show graphics from a sheet not working.

Farflame

New Coder
I have some old code which displayed country flags on my page using HTML and CSS. The original source went missing but I'd copied the files over to my own server. That worked for a while but recently I noticed that the flags were no longer being displayed.

I've written a basic page from scratch to demonstrate the error. I'm probably making some very basic mistake here. Could someone review this to see if I've done something obviously wrong? Something tells me this is too simplistic and maybe shouldn't work anyway but I can't remember how I got it working before.

The simple HTML page is as follows.

HTML:
<!DOCTYPE html>

<html>

<head>
<link/><link rel="stylesheet" type="text/css" href="flags.css">
</head>

<body>

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

</body>

</html>

The flags css is like this....

.f32 .flag{display:inline-block;height:32px;width:32px;vertical-align:text-top;line-height:32px;background:url(flags32.png) no-repeat;}
.f32 ._African_Union(OAS){background-position:0 -32px;}
.f32 ._Arab_League{background-position:0 -64px;}

There are more lines but this gives a basic idea and I think the top row is what's important here.

The flags32.png file (a strip of country flags in a single png) are in the same location as the css and the html file here. When I run this, I get nothing except the word 'Argentina'. The flag doesn't show. Should this work?
 
Don't know about the css part but this
Code:
<link/><link rel="stylesheet" type="text/css" href="flags.css">
is not correct. Remove the <link/> part.
You will probably need to use divs inside the list to show images.

Quick example. not using images though.

CSS:
.flags {
    list-style: none;
}
.flags li {
    display: inline-block;
    margin-right: 20px;
}
.flags .flag-1 {
    width: 120px;
    height: 120px;
    background-color: red;
    border: solid 3px black;
    
}
.flags .flag-2 {
    width: 120px;
    height: 120px;
    background-color: green;
    border: dashed 3px yellow;
    box-shadow: 10px 10px 10px black;
    
}
.flags .flag-3 {
    width: 120px;
    height: 120px;
    background-color: purple;
    border: solid 3px red;
    border-radius: 20%;
    
}

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
   <ul class="flags">
    <li><div class="flag-1"></div></li>
    <li><div class="flag-2"></div></li>
    <li><div class="flag-3"></div></li>
   </ul>
</body>
</html>
 
Last edited:
Back
Top Bottom