1

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?

3
  • you can do width: 400px !important; to force the width of the li if that is what you mean. Dec 13, 2013 at 10:57
  • That would be a possibility, but it still doesn't takes the layout even if I do that... The only way to make him take the layout is by adding at each element style"...", but if I go through a CSS class it doesn't works.
    – Akorna
    Dec 13, 2013 at 11:00
  • What exactly are you trying to accomplish? The width is the only property that gets overwritten. Dec 13, 2013 at 11:21

2 Answers 2

0

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 ;-)

1
  • It looked normal to me that you had to put the one that should be applied as last underneath all the others but indeed. Putting it on top did the trick.
    – Akorna
    Dec 13, 2013 at 11:59
0

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/).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.