样式A <li> 元件

Question

I'm trying to make a list of music-elements with their picture and their description for mobile usage. As I have to work with Responsive Design I implemented Foundation but now if I want to make up a < li > item he can't find the right CSS so I tried to put numbers in front of the css-file names in order to manipulate the sequence he uses to put the styles on the elements, my code goes something like this:

Mainpage:

<ul class="small-block-grid-3 large-block-grid-6">
    <li class="spotsList">
        <div class="spotsDiv">
            <img src="Images/PlayIcon.png" style="width: 50px; height: 50px; float:left"/>
            <article>
                <b>Spotnaam: <asp:Label ID="lblNaam" runat="server" Text="Duvel forever"></asp:Label></b>
                <br/> 
                Spotnr: <asp:Label ID="lblnr" runat="server" Text="049345679"></asp:Label>
            </article>
        </div> 
    </li>

    <li class="spotsList">
        <div class="spotsDiv">
            <img src="Images/PlayIcon.png" style="width: 50px; height: 50px; float:left"/>
            <article>
                <b>Spotnaam: <asp:Label ID="Label1" runat="server" Text="Duvel always"></asp:Label></b>
                <br/> 
                Spotnr: <asp:Label ID="Label2" runat="server" Text="049345679"></asp:Label>
            </article>
        </div> 
    </li>
</ul>

and my CSS goes like this:

/*Layout Divs for spots*/
.spotsDiv {
    height: 56px;
    width: 400px;
}

/*Layout li items*/
.spotsList {
    width: 400px; 
    margin-right: 10px; 
    margin-bottom:5px; 
    border-bottom: 1px solid black;
}

Should I use another way of styling or is there another way to choose the order of css that gets implemented? Any suggestions?

Answer 1

You don't need numbers for ordering your CSS files. The order styles are loaded is the order of appearance in your HTML.

Order would be 1, 2, 3:

...
<link rel="stylesheet" type="text/css" href="1.css">
<link rel="stylesheet" type="text/css" href="2.css">
<link rel="stylesheet" type="text/css" href="3.css">
...

Order would be 2, 3, 1:

...
<link rel="stylesheet" type="text/css" href="2.css">
<link rel="stylesheet" type="text/css" href="3.css">
<link rel="stylesheet" type="text/css" href="1.css">
...

Style that are loaded at the end, overwrites styles from before (if they have the same specificity http://css-tricks.com/specifics-on-css-specificity/ ).

Answer 2

As I can see in your example, the guy is just using an image, you can try to do this:

http://jsfiddle.net/Ltr8r/

You have to display an image instead of the list style default !

 list-style-type: none;
 background-image: url(Images/PlayIcon.png);

if it's just a CSS problem, you have to put your own css BEFORE all the other ;-)