HTML and CSS Reference
In-Depth Information
3.
Because iE 8 and earlier don't understand media queries, copy the
<link>
that
attaches horizontal.css to the web page, and paste it immediately below
the
<link>
to print.css. Then wrap the
<link>
you have just pasted in an internet
Explorer conditional comment so that it's seen only by older versions of iE:
<!--[if lte IE 8]>
<link href="styles/horizontal.css" rel="stylesheet" media="screen">
<![endif]-->
4. Change the
href
attribute of the original
<link>
so that it points to basic.css. After
making these changes, the HTMl at the top of the page should look like this:
<title>Mediterranean Destinations</title>
<meta name="viewport" content="width=device-width">
<link href="styles/
basic.css
" rel="stylesheet" media="screen">
<link href="styles/print.css" rel="stylesheet" media="print">
<!--[if lte IE 8]>
<link href="styles/horizontal.css" rel="stylesheet" media="screen">
<![endif]-->
<!--[if IE 6]>
5.
if you test the page in a browser, it should look exactly the same as before because
basic.css is the same as horizontal.css. The next stage is to edit basic.css to provide
basic styles for screens less than
600px
wide. The same styles will be used by
browsers that don't understand media queries, so you shouldn't add a media query
to the
media
attribute in the
<link>
.
6. There isn't sufficient room to display the sidebar and main content alongside each
other on a small screen, so delete the
width
property from the
#main
style rule in
basic.css, and change the left margin from
35%
to
1%
to match the right margin. The
sidebar needs to use the same values, so delete the
#aside
rule, and use a group
selector for the main content and sidebar like this:
#main
, #aside
{
margin: 15px 1% 10px
1%
;
background-color: #FFF;
padding: 18px 0;
}
7.
if you test the page in a browser, the sidebar and main content both fill the full width
of the page and are stacked on top of each other (see Figure
17-9
).
