CODEWITHSUNDEEP
htmlcss
Scott Deerwester
Scott Deerwester

Reputation: 3977

How to draw a box within an HTML element?

I have a Web app that is producing HTML roughly like this:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
    </div>
    <span>Version 1.0</span>
</div>

looking roughly like this:

First example

Server-side processing gives me coordinates within the image that I'd like to highlight (say, by drawing a red box on top of the image). What I'm hoping to do is something like:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"/>
    </div>
    <span>Version 1.0</span>
</div>

(where the coordinates are generated in the HTML source by the server) looking roughly like this:

Second example

with:

#highlight: {
   position: absolute;
   border: 2px solid red;
}
#element: {
   position: relative;
}

But instead I'm getting:

Third example

where the last span is inside the element that was just closed. What am I missing?

Update

I edited the question to get rid of a typo, but left in the error that was actually causing the problem.

Upvotes: 0

Views: 1382

Answers (1)

Jacob G
Jacob G

Reputation: 14172

Lots of errors!

Error 1:

<div id="highlight" style="width:30px;height:10px;top:10px;left:10px!!!!!/>

Missing end quote:

<div id="highlight" style="width:30px;height:10px;top:10px;left:10px"/>

Error 2:

A div cannot close itself:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"!!!!/>
    </div>
    <span>Version 1.0</span>
</div>

Fixed:

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"></div>
    </div>
    <span>Version 1.0</span>
</div>

Upvotes: 1

Related Questions