(An update has been added below)
In my project, I am working with a .css file and an index.html document. The goal is to create a panel of buttons on the screen [to prototype the usability of a touchscreen interface], with each button assigned a specific position on the screen (referencing the "margin-top" and "margin-left" tags in the .css file). Later, I will be adding onclick functionality, among other things.
Currently, I am focused on getting the buttons to display correctly on the screen. What's puzzling is that the first element in the .css section (i.e. the .aButton #....) always appears at position (0,0) when viewed in the browser. For example, right now, button1 is displayed at (0,0) while all the other buttons are in their correct positions. If I rearrange the css code and place the button2 section above the button1 section, then button1 displays in the correct place but button2 ends up at (0,0).
I would appreciate any suggestions or ideas!
Here are the relevant parts:
From index.html
<div id="buttonPanel" class="aButton">
<div id="button1" class="aButton"></div>
<div id="button2" class="aButton"></div>
<div id="button3" class="aButton"></div>
<div id="button4" class="aButton"></div>
<div id="button5" class="aButton"></div>
</div>
From styles.css:
.aButton #button1
{
margin-top: 262px;
margin-left: 110px;
}
.aButton #button2
{
margin-top: 24px;
margin-left: 347px;
}
.aButton #button3
{
margin-top: 32px;
margin-left: 114px;
}
.aButton #button4
{
margin-top: 524px;
margin-left: 104px;
}
.aButton #button5
{
margin-top: 392px;
margin-left: 106px;
}
An Update: I have updated Fr0zenFyr's jsfiddle with the complete html and css files and encountered the same issue! http://jsfiddle.net/b4NYd/ I realize now that omitting them both was a mistake, and I suspect it may have something to do with how the .aButton #buttonx {} definitions interact strangely with the #buttonx {} definitions preceding them. I can temporarily resolve the problem by combining the two, but I would like to understand why this issue arises, especially since I plan to use different classes for prototyping various layouts later on.
Another Update: Problem solved! It turns out, it was due to my comments. Lesson learned!