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