HTML and CSS Reference
In-Depth Information
<body>
<table style="width: 100%; height: 100%; border: 1px solid black;">
<tr>
<td style="vertical-align: top; width: 80%">
<img id="orange1" src="orange.jpg"/>
<img id="orange2" src="orange.jpg"/>
</td>
<td style="vertical-align: top;">Left:
<input type="text" id="leftText"/><br/>
Top:
<input type="text" id="topText"/><br/>
Position:
<select id="positioning">
<option>relative</option>
<option>absolute</option>
</select><br/>
<input type="button" id="btnPosition" value="Update"/>
</td>
</tr>
</table>
</body>
</html>
When the code is rendered in the browser, the default position is in effect, as shown in
Figure 1-44.
FIGURE 1-44
The default position of two images
All positioning attributes that have been discussed are available declaratively in the style
attribute of the HTML element but can also be accessed programmatically and manipulated
via JavaScript. The webpage is enhanced to provide some end-user functionality to control
the positioning of the two images. The code in Listing 1-3 provides an HTML page with the
two images and some input controls to control the positioning of the second image. You
can enter the
top
and
left
positions as well as whether to position relative to the first orange
picture or to position as absolute to the parent table element.
Search WWH ::
Custom Search