Changing the Layout with CSS
Congratulations, you've built a very efficient and versatile page. Just how efficient and versatile will likely amaze you.
Converting the Layout to Full-Width
To make your layout span the entire width of any browser window, we'll edit a couple of rules.
-Open project.css
-Change the margin property in the body selector from 0 10% to simply 0
body {
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px
margin: 0px;
padding: 0px;
}If you'd also like your sidebar to be "fluid", then change the width in the #sidebar selector from 200px to 30%.
#sidebar {
width: 30%;
font-size: 12px;
vertical-align: top;
/*/*/font-size: 85%; /* */
}Converting Layout to Fixed Width
If you want you layout to be fixed to a width of 720px, then here's how you'd do it:
-Change the margin property in the body selector from 0 10% to simply 0
body {
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px
margin: 0px;
padding: 0px;
}-Add a width property to the #maintable selector and set it to 720px:
#mainTable {
width: 720px;
border: 1px solid #000;
/*/*/line-height: 1.5em; /* */
}-Set the #sidebar width back to its original value of 200px:
#sidebar {
width: 200px;
font-size: 12px;
vertical-align: top;
/*/*/font-size: 85%; /* */
}Imagine that you have 300 pages linked to this style sheet and you'll begin to understand the sheer power.
Changing Text Size
To change text size, all you have to do is change the font-size value in the body selector.
-Change the font-size in the body selector from 14px to 12px
body {
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px
margin: 0px;
padding: 0px;
}Powerful, powerful stuff. Of course, with a little scripting (as on our example page) you can have users reset layout and/or text sizing at will.
-Save and Close project.css
Setting a Special Link to Mark the Current Page
It's always nice when you can set the link that relates to the current page to a special color or state so that users have an idea of where they are in the overall scheme of your site. Nothing could be simpler with our CSS-TD page.
-Open project.css
-Create a new selector called: #current a:
#current a {
color: #FFFFFF !important;
/*/*/background-color: #999999!important;
border: 2px dotted #999 !important; /* */
}What it Does: This rule sets text color, background color, and border for any link inside a list item to which is assigned the ID: current. We are using the !important directive so that modern browsers give the rule's values precedence over competing rules. Finally, we are hiding the background-color and border properties from Netscape 4 to prevent problems.
-Save and Close project.css
To assign this rule to one of your links:
-Open worksheet.htm
-Place you cursor anywhere within one of the links in the sidebar. Let's do it for the first link.
-Right-click the <li> tag on the tag selector bar
-Choose Set ID--> current
-Preview your page in a modern browser (version 5 or higher) and you'll see that the first link is highlighted.
Notes and Afterthoughts
The techniques we've covered are but a glance into the world of PVII Design Packs, Extensions, and Books... which encompass hundreds of pages full of quality Dreamweaver and web development information.
We hope you've enjoyed this tutorial and that it will inspire you to go beyond the "Dreamweaver Box".
As with all PVII material, the journey does not end here. Please feel free to discuss this tutorial on the PVII Newsgroup:
news://forums.projectseven.com/pviiwebdev
See you there!