HTML and CSS Reference
In-Depth Information
Now change the
cols
and
rows
attributes into CSS width and height values. This is tricky because frames put
these values on the container (the outer
div
), whereas CSS puts them on the contained item (the inner
div
).
For example, the 20%
col
from the top
div
becomes a 20%
width
on its first child
div
, and the 80%
col
from
the top
div
becomes an 80%
width
on its second child
div
, as shown in
Listing 5.9
.
Listing 5.9. Replacing cols and rows with CSS Width and Height
Code View:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XOM 1.1 API</title></head>
<body>
<div>
<div style="width: 20%;">
<div style="height: 30%;" frameborder="1"
src="overview-frame.html" scrolling="auto"
id="packageListFrame" title="All Packages" />
<div style="height: 70%" frameborder="1"
src="allclasses-frame.html" id="packageFrame"
title="All classes and interfaces
(except non-static nested types)" scrolling="auto" />
</div>
<div style="width: 80%" src="overview-summary.html"
id="classFrame" title="Package, class and interface
descriptions" scrolling="auto" />
</div>
</body>
</html>
We also need to change the
frameborder
attributes into CSS
border
properties. We replace the
scrolling
attribute with the CSS
overflow
property.
Listing 5.10
shows this step.
Listing 5.10. Replace Scrolling with CSS Overflow
Search WWH ::
Custom Search