Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Using HTML to layer with the "z-index"

HTML z-index layer Weebly

  • Please log in to reply

#1
Maj. Tom

Maj. Tom

    New Member

  • Member
  • Pip
  • 2 posts

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. 


  • 0

Advertisements


#2
admin

admin

    Founder Geek

  • Administrator
  • 24,504 posts
I think style="float:..." is what you're looking for.
  • 0

#3
Maj. Tom

Maj. Tom

    New Member

  • Topic Starter
  • Member
  • Pip
  • 2 posts

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? 


  • 0






Similar Topics


Also tagged with one or more of these keywords: HTML, z-index, layer, Weebly

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP