[Maj. Tom]

Hello.  I am relatively new to coding with HTML.  I am creating a new website using Weebly, in which I am creating guitar tutorials.  I am trying to create a guitar chord chart using HTML.  This is what I have so far: 

<hr style="width:11.775%; float:left; position:absolute; top:0px" />
<hr style="width:11.775%; float:left; position:absolute; top:4px" />
<hr style="width:11.775%; float:left; position:absolute; top:44px" />
<hr style="width:11.775%; float:left; position:absolute; top:84px" />
<hr style="width:11.775%; float:left; position:absolute; top:124px" />
<hr style="width:11.775%; float:left; position:absolute; top:164px" />
<hr style="width:11.775%; float:left; position:absolute; top:204px" />
<div style="border-left:1px solid; height:225px" />
<div style="border-left:1px solid; position:absolute; left:20px; height:225px" />
<div style="border-left:1px solid; position:absolute; left:20px; height:225px" />
<div style="border-left:1px solid; position:absolute; left:20px; height:225px" />
<div style="border-left:1px solid; position:absolute; left:20px; height:225px" />
<div style="border-left:1px solid; position:absolute; left:20px; height:225px" />

So far, the result is exactly what I wanted.  However, a guitar chord chart is absolutely useless without any information on it.  Right now, what I want to do is to layer numbers using the "z-index" command over the lines on the chart.  I tried using the following: 

<p class="note">
3
<p/>

<p.note style="position:absolute; z-index:10" />

This did not work the way I hoped.  The lines all moved away from each other with the "3" somewhere in the middle of the mess. 

 

What did I mess up?  Should I use "position:relative" instead of "position:absolute, because everything was just worse when I did that.  Is there anything else I'm missing?  Is there anything unrelated to the issue that could be improved in this code?  As I said earlier, I am new to HTML and CSS coding, so any help would be appreciated. 

[Advertisements]

I think style="float:..." is what you're looking for.

[admin]

I think style="float:..." is what you're looking for.

[Maj. Tom]

Hi!  Thank you for your quick response!  I tried using style="float..." in the <p.note style=... /> command.  Is this the section of code you were referring to, because I still can't get the z-index to work the way I want it to.  Were you referring to <div style="..." instead?