5 Replies - 720 Views - Last Post: 22 September 2016 - 08:22 PM

#1 TireFire   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 21-September 16

How to specify an element is a child element with HTML

Posted 21 September 2016 - 07:26 PM

Hello,

I'm building a dollhouse website. I want there to be accessories that are positioned relative to their dolls.

The w3 schools entry for position:absolute says:

>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

Great! So I just need to make my accessories absolutely positioned descendants of the positioned doll elements, and that should work. Except I have no idea how to generate this relationship writing HTML in my Django template. I need an arbitrary number of accessories to be loaded for an arbitrary number of dolls. The code I currently have generates this html structure.

Here is the code:

    <div id="display-area">
        <img id="curtains" src ={% static "house/images/curtains.jpg" %} alt="curtains"/>
      {% for doll in doll_objects %}
    <div><img class="hide" src="{{ MEDIA_URL }}{{ doll.doll_image }}" alt="{{ doll.doll_name }}" draggable="false" data-dollid="{{ doll.id }}"/>{% for accessory in doll.accessory_set.all %} <div><img class="hide" src="{{ MEDIA_URL }}{{ accessory.accessory_image }}" alt="{{ accessory.accessory_name }}" draggable="false" data-accessoryid="{{ accessory.id }}" data-linkeddoll="{{accessory.doll_id}}" style="position:absolute; left:{{ accessory.accessory_lpos }}; top:{{ accessory.accessory_tpos }}"/></div>
      {% endfor %}
      </div>
      {% endfor %}
      </div>


And here is the code in a more readable form with all the img attributes removed:

    <div id="display-area">
        <img id="curtains" src ={% static "house/images/curtains.jpg" %} alt="curtains"/>
      {% for doll in doll_objects %}
    <div><img/>{% for accessory in doll.accessory_set.all %} <div><img/></div>
      {% endfor %}
      </div>
      {% endfor %}
      </div>


1) How can I get the HTML to make the accessories children of the dolls, with their position:absolute being relative to the position of the doll?

2) How could I have found the solution to this problem besides asking about it? I tried numerous searches but I didn't come up with anything that yielded an answer to "how to make something a child element of another element in the raw html". Is there a better way to find this sort of information?

Is This A Good Question/Topic? 0
  • +

Replies To: How to specify an element is a child element with HTML

#2 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: How to specify an element is a child element with HTML

Posted 22 September 2016 - 06:36 AM

you want relative positioning. Not absolute.


Searching for image placement in html may have yielded better results.
Was This Post Helpful? 0
  • +
  • -

#3 TireFire   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 21-September 16

Re: How to specify an element is a child element with HTML

Posted 22 September 2016 - 04:51 PM

Relative positioning for what?

1) The doll currently has absolute positioning, which allows it to be positioned relative to its container. If I change the doll to position: relative, it sits outside of the container.

2) Same for the accessory, except that in addition to being moved outside of the container, it is still positioned relative to the wrong container - the doll's parent, rather than the doll. I still don't know why the accessory isn't being positioned relative to the doll, which is its parent.

I COULD use some sort of negative positioning to get these items back into the container, but that's pretty hacky especially considering there are many dolls of different sizes.

I want the child elements to be positioned relative to their container and to appear within their container.
Was This Post Helpful? 0
  • +
  • -

#4 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: How to specify an element is a child element with HTML

Posted 22 September 2016 - 07:27 PM

You have that backwards.

CSS3 Positioning
Was This Post Helpful? 0
  • +
  • -

#5 TireFire   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 21-September 16

Re: How to specify an element is a child element with HTML

Posted 22 September 2016 - 08:16 PM

Yeah, it definitely doesn't do that in my project. I wish it did, html/css would be very simple if it actually did what it says it does all the time. Although as I pointed out earlier, the w3schools definition of position:absolute says:

>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

Here is my project if you're curious. https://github.com/s...5524091fac7c7b3

In that case the red square has no positioned ancestors, so position absolute positions it relative to the window.
Was This Post Helpful? 0
  • +
  • -

#6 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: How to specify an element is a child element with HTML

Posted 22 September 2016 - 08:22 PM

I'm not seeing header content for your html, but it looks like you are using html 4.1, based on the elements?

Here is another that has fiddles, Mozilla
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1