Step 12: Contact information styling
Description
- Use of definition list (DL, DT and DD elements)
- Styling link and text
Example
Show example Step 12: Contact information styling in a separate window
HTML Source Code
Show HTML Source Code: career-redesign-step-12.inc
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Career Center Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/career-main-step-12.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="body">
<div id="title"> <a href="http://www.uiuc.edu/"> <img class="logo" alt="UIUC Home Page" src="images/vsmltraditional.gif" width="35" height="46" /></a>
<p class="title">
<span class="title">T</span>he
<span class="title">C</span>areer
<span class="title">C</span>enter
</p>
<p class="uiuc"><a href="http://www.uiuc.edu/">The University of Illinois at Urbana-Champaign</a></p>
</div>
<div id="nav1">
<h2 class="nav">Career Counseling Resources</h2>
<ul title="Career Counseling Resources">
<li class="nobullet"><a href="http://www.uiuc.edu/">school, work, life balance</a></li>
<li><a href="http://www.uiuc.edu/">tools to get the job</a></li>
<li><a href="http://www.uiuc.edu/">career exploration</a></li>
<li><a href="http://www.uiuc.edu/">self exploration</a></li>
</ul>
</div>
<div id="nav2">
<h2 class="nav">Resources by Audience</h2>
<ul title="Resources by Audience">
<li class="nobullet"><a href="http://www.uiuc.edu/">undergrads</a></li>
<li><a href="http://www.uiuc.edu/">graduates</a></li>
<li><a href="http://www.uiuc.edu/">parents</a></li>
<li><a href="http://www.uiuc.edu/">alumni</a></li>
<li><a href="http://www.uiuc.edu/">faculty/staff</a></li>
<li><a href="http://www.uiuc.edu/">employers</a></li>
</ul>
</div>
<!--this is the inline styling for changing the height of the leftnav bar, this might change on a per page basis!-->
<!-- New code for Step 9 after this line -->
<div id="leftnav">
<h2 class="nav">Resources by Audience</h2>
<ul title="Career Center Services">
<li><a href="http://www.uiuc.edu/">Career Home</a></li>
<li><a href="http://www.uiuc.edu/">Career Counseling</a></li>
<li><a href="http://www.uiuc.edu/">Pre-Health Advising</a></li>
<li><a href="http://www.uiuc.edu/">Services</a></li>
<li><a href="http://www.uiuc.edu/">Workshops</a></li>
<li><a href="http://www.uiuc.edu/">Resource Center</a></li>
<li><a href="http://www.uiuc.edu/">Question Board/FAQ</a></li>
</ul>
<h2 class="nav">Search Career Center</h2>
<form action="http://www.google.com/u/uiuc-careercenter" method="get" title="Google Search">
<p class="search"><label class="hidden" for="search-box">Search Text</label> <input type="text" name="q" id="search_box" maxlength="255" title="Search text"></p>
<p class="search"><input type="submit" title="Start Google Search" value="Search" name="btnG"></p>
</form>
<h4>contact info</h4>
<!-- Adjust the height of the "padding-bottom" property depending on the height of the primary content -->
<dl style="padding-bottom: 60em">
<dt>Location</dt>
<dd>715 S.Wright St.</dd>
<dd>Champaign, IL 61820</dd>
<dt>Hours</dt>
<dd>8:30-5:00</dd>
<dt>Phone/Fax</dt>
<dd>217-333-0820 (phone) </dd>
<dd>217-333-0122 (fax)</dd>
<dt>Email</dt>
<dd><a href="mailto:tcc-feedback@uiuc.edu">TCC-FEEDBACK@uiuc.edu</a></dd>
</dl>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Career Center Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/career-main-step-12.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="body">
<div id="title"> <a href="http://www.uiuc.edu/"> <img class="logo" alt="UIUC Home Page" src="images/vsmltraditional.gif" width="35" height="46" /></a>
<p class="title">
<span class="title">T</span>he
<span class="title">C</span>areer
<span class="title">C</span>enter
</p>
<p class="uiuc"><a href="http://www.uiuc.edu/">The University of Illinois at Urbana-Champaign</a></p>
</div>
<div id="nav1">
<h2 class="nav">Career Counseling Resources</h2>
<ul title="Career Counseling Resources">
<li class="nobullet"><a href="http://www.uiuc.edu/">school, work, life balance</a></li>
<li><a href="http://www.uiuc.edu/">tools to get the job</a></li>
<li><a href="http://www.uiuc.edu/">career exploration</a></li>
<li><a href="http://www.uiuc.edu/">self exploration</a></li>
</ul>
</div>
<div id="nav2">
<h2 class="nav">Resources by Audience</h2>
<ul title="Resources by Audience">
<li class="nobullet"><a href="http://www.uiuc.edu/">undergrads</a></li>
<li><a href="http://www.uiuc.edu/">graduates</a></li>
<li><a href="http://www.uiuc.edu/">parents</a></li>
<li><a href="http://www.uiuc.edu/">alumni</a></li>
<li><a href="http://www.uiuc.edu/">faculty/staff</a></li>
<li><a href="http://www.uiuc.edu/">employers</a></li>
</ul>
</div>
<!--this is the inline styling for changing the height of the leftnav bar, this might change on a per page basis!-->
<!-- New code for Step 9 after this line -->
<div id="leftnav">
<h2 class="nav">Resources by Audience</h2>
<ul title="Career Center Services">
<li><a href="http://www.uiuc.edu/">Career Home</a></li>
<li><a href="http://www.uiuc.edu/">Career Counseling</a></li>
<li><a href="http://www.uiuc.edu/">Pre-Health Advising</a></li>
<li><a href="http://www.uiuc.edu/">Services</a></li>
<li><a href="http://www.uiuc.edu/">Workshops</a></li>
<li><a href="http://www.uiuc.edu/">Resource Center</a></li>
<li><a href="http://www.uiuc.edu/">Question Board/FAQ</a></li>
</ul>
<h2 class="nav">Search Career Center</h2>
<form action="http://www.google.com/u/uiuc-careercenter" method="get" title="Google Search">
<p class="search"><label class="hidden" for="search-box">Search Text</label> <input type="text" name="q" id="search_box" maxlength="255" title="Search text"></p>
<p class="search"><input type="submit" title="Start Google Search" value="Search" name="btnG"></p>
</form>
<h4>contact info</h4>
<!-- Adjust the height of the "padding-bottom" property depending on the height of the primary content -->
<dl style="padding-bottom: 60em">
<dt>Location</dt>
<dd>715 S.Wright St.</dd>
<dd>Champaign, IL 61820</dd>
<dt>Hours</dt>
<dd>8:30-5:00</dd>
<dt>Phone/Fax</dt>
<dd>217-333-0820 (phone) </dd>
<dd>217-333-0122 (fax)</dd>
<dt>Email</dt>
<dd><a href="mailto:tcc-feedback@uiuc.edu">TCC-FEEDBACK@uiuc.edu</a></dd>
</dl>
</div>
</div>
</body>
</html>
CSS Source Code
Show CSS Source Code: career-main-step-12.css
<style type="text/css">
BODY {
MARGIN: 0;
PADDING: 0;
BACKGROUND-IMAGE: url(../images/bckgd.gif);
BACKGROUND-REPEAT: repeat;
FONT-FAMILY: helvetica, arial, sans-serif;
FONT-SIZE: small;
}
DIV#body {
MARGIN: 0;
PADDING: 0;
BORDER: rgb(56,56,73) 2px solid;
MARGIN-TOP: .75em;
MARGIN-LEFT: 5%;
WIDTH: 90%;
BACKGROUND-COLOR: #FFFFFF;
}
IMG.logo {
BORDER: white 2px solid;
LEFT: 7%;
POSITION: absolute;
TOP: 2em;
}
DIV#title {
MARGIN: 0px;
PADDING: 0px;
PADDING-TOP: 0.35em;
PADDING-TOP: 0.35em;
BORDER-BOTTOM: rgb(66,66,118) 1px solid;
BACKGROUND-POSITION: right top;
BACKGROUND-IMAGE: url(../images/arcade.jpg);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-COLOR: rgb(66,66,118);
COLOR: #ffffff;
}
DIV#title P.title {
MARGIN: 0;
PADDING: 0;
FONT-SIZE: 225%;
MARGIN-LEFT: 70px;
TEXT-TRANSFORM: uppercase;
PADDING-TOP: 0px;
FONT-FAMILY: "Adobe Garamond", garamond, times, serif;
FONT-WEIGHT: normal;
}
DIV#title P.uiuc {
MARGIN: 0;
PADDING: 0;
MARGIN-LEFT: 75px;
PADDING-BOTTOM: .5em;
FONT-SIZE: 72%;
TEXT-TRANSFORM: uppercase;
FONT-FAMILY: "univers 55", ariel, helvetica, sans-serif;
LETTER-SPACING: 0.2em
}
DIV#title A {
COLOR: white;
TEXT-DECORATION: none;
}
DIV#title A:link, DIV#title A:visited {
COLOR: white;
}
DIV#title A:hover, DIV#title A:focus {
COLOR: rgb(204,102,0);
}
SPAN.title {
FONT-SIZE: 150%;
}
H2.nav {
POSITION: absolute;
TOP: -20em;
LEFT: -200em;
}
DIV#nav1 {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: 0.25em;
PADDING-BOTTOM: 0.25em;
BORDER-BOTTOM: rgb(56,56,73) 1px solid;
WIDTH: 100%;
COLOR: white;
BACKGROUND-COLOR: #f5b673;
TEXT-ALIGN: center
}
DIV#nav1 UL {
PADDING: 0px;
MARGIN: 0px;
}
DIV#nav1 LI {
DISPLAY: inline;
PADDING-LEFT: 0.5em;
BACKGROUND-IMAGE: url(../images/separator-1.png);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: left center;
}
DIV#nav1 LI.nobullet {
BACKGROUND-IMAGE: none;
}
DIV#nav1 A {
PADDING: 0px;
PADDING-RIGHT: 0.25em;
PADDING-LEFT: 0.25em;
TEXT-DECORATION: none;
}
DIV#nav1 A:link, DIV#nav1 A:visited {
FONT-WEIGHT: bold;
COLOR: rgb(56,56,73);
}
DIV#nav1 A:hover, DIV#nav1 A:focus {
COLOR: #f5b673;
BACKGROUND-COLOR: rgb(56,56,73)
}
DIV#nav2 {
MARGIN: 0px;
PADDING: 0px;
PADDING-BOTTOM: 0.25em;
PADDING-TOP: 0.25em;
BORDER-BOTTOM: rgb(56,56,73) 1px solid;
WIDTH: 100%;
COLOR: rgb(56,56,73);
BACKGROUND-COLOR: white;
TEXT-ALIGN: center;
FONT-FAMILY: "Times new roman", times, sans-serif;
}
DIV#nav2 UL {
PADDING: 0px;
MARGIN: 0px;
}
DIV#nav2 LI {
MARGIN: 0px;
PADDING: 0px;
PADDING-LEFT: 0.5em;
DISPLAY: inline;
BACKGROUND-IMAGE: url(../images/separator-2.jpg);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: left center;
}
DIV#nav2 LI.nobullet {
BACKGROUND-IMAGE: none;
}
DIV#nav2 A {
MARGIN: 0px;
PADDING: 0px;
PADDING-RIGHT: 0.25em;
PADDING-LEFT: 0.25em;
TEXT-DECORATION: none
}
DIV#nav2 A:link, DIV#nav2 A:visited {
FONT-WEIGHT: bold;
COLOR: rgb(56,56,73);
}
DIV#nav2 A:hover, DIV#nav2 A:focus {
COLOR: #f5b673;
BACKGROUND-COLOR: rgb(56,56,73)
}
DIV#leftnav {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 20%;
BACKGROUND-COLOR: rgb(192,192,192);
}
DIV#leftnav UL {
BACKGROUND-COLOR: rgb(228,230,234);
PADDING: 0;
MARGIN: 0;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: right;
PADDING-BOTTOM: 5em;
}
DIV#leftnav LI {
PADDING-TOP: 1em;
PADDING-BOTTOM: 0.25em;
PADDING-RIGHT: 0.5em
}
DIV#leftnav LI A {
PADDING: 0px;
PADDING-RIGHT: 0.25em;
PADDING-LEFT: 0.5em;
TEXT-DECORATION: none;
FONT-WEIGHT: bold;
}
DIV#leftnav LI A:link, DIV#leftnav LI A:visited {
COLOR: rgb(56,56,73);
}
DIV#leftnav LI A:hover, DIV#leftnav LI A:focus {
COLOR: #f5b673;
BACKGROUND-COLOR: rgb(56,56,73)
}
DIV#leftnav FORM {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: .5em;
PADDING-BOTTOM: .5em;
BACKGROUND-COLOR: rgb(228,230,234);
BORDER-TOP: black solid 1px;
BORDER-BOTTOM: black solid 1px;
TEXT-ALIGN: center;
}
DIV#leftnav p.search {
MARGIN: 0;
PADDING: 0;
FONT-WEIGHT: bold;
}
DIV#leftnav INPUT {
MARGIN: .25em;
}
/* Step 12 new code after this line */
DIV#leftnav FORM {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: .5em;
PADDING-BOTTOM: .5em;
BACKGROUND-COLOR: rgb(228,230,234);
BORDER-TOP: black solid 1px;
BORDER-BOTTOM: black solid 1px;
TEXT-ALIGN: center;
}
DIV#leftnav p.search {
MARGIN: 0;
PADDING: 0;
FONT-WEIGHT: bold;
}
DIV#leftnav INPUT {
MARGIN: .25em;
}
DIV#leftnav H4 {
MARGIN: 0;
MARGIN-TOP: .5em;
PADDING: 0;
BACKGROUND-COLOR: rgb(192,192,192);
FONT-FAMILY: sans-serif;
LETTER-SPACING: 0.07em;
FONT-SIZE: 100%;
WIDTH: 100%;
}
DIV#leftnav DL {
MARGIN: 0px;
PADDING-LEFT: .25em;
PADDING-BOTTOM: 1em;
FONT-FAMILY: sans-serif;
LETTER-SPACING: 0.07em;
FONT-SIZE: 80%;
}
DIV#leftnav DT {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: 1em;
FONT-WEIGHT: BOLD;
}
DIV#leftnav DD {
MARGIN: 0;
PADDING: 0;
MARGIN-LEFT: .5em;
LETTER-SPACING: 0;
}
DIV#leftnav DD A {
FONT-WEIGHT: normal;
TEXT-DECORATION: underline;
FONT-WEIGHT: bold;
}
DIV#leftnav DD A:link, DIV#leftnav DD A:visited {
COLOR: rgb(56,56,73);
}
DIV#leftnav DD A:hover, DIV#leftnav DD A:focus {
COLOR: #000000;
}
</style>
BODY {
MARGIN: 0;
PADDING: 0;
BACKGROUND-IMAGE: url(../images/bckgd.gif);
BACKGROUND-REPEAT: repeat;
FONT-FAMILY: helvetica, arial, sans-serif;
FONT-SIZE: small;
}
DIV#body {
MARGIN: 0;
PADDING: 0;
BORDER: rgb(56,56,73) 2px solid;
MARGIN-TOP: .75em;
MARGIN-LEFT: 5%;
WIDTH: 90%;
BACKGROUND-COLOR: #FFFFFF;
}
IMG.logo {
BORDER: white 2px solid;
LEFT: 7%;
POSITION: absolute;
TOP: 2em;
}
DIV#title {
MARGIN: 0px;
PADDING: 0px;
PADDING-TOP: 0.35em;
PADDING-TOP: 0.35em;
BORDER-BOTTOM: rgb(66,66,118) 1px solid;
BACKGROUND-POSITION: right top;
BACKGROUND-IMAGE: url(../images/arcade.jpg);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-COLOR: rgb(66,66,118);
COLOR: #ffffff;
}
DIV#title P.title {
MARGIN: 0;
PADDING: 0;
FONT-SIZE: 225%;
MARGIN-LEFT: 70px;
TEXT-TRANSFORM: uppercase;
PADDING-TOP: 0px;
FONT-FAMILY: "Adobe Garamond", garamond, times, serif;
FONT-WEIGHT: normal;
}
DIV#title P.uiuc {
MARGIN: 0;
PADDING: 0;
MARGIN-LEFT: 75px;
PADDING-BOTTOM: .5em;
FONT-SIZE: 72%;
TEXT-TRANSFORM: uppercase;
FONT-FAMILY: "univers 55", ariel, helvetica, sans-serif;
LETTER-SPACING: 0.2em
}
DIV#title A {
COLOR: white;
TEXT-DECORATION: none;
}
DIV#title A:link, DIV#title A:visited {
COLOR: white;
}
DIV#title A:hover, DIV#title A:focus {
COLOR: rgb(204,102,0);
}
SPAN.title {
FONT-SIZE: 150%;
}
H2.nav {
POSITION: absolute;
TOP: -20em;
LEFT: -200em;
}
DIV#nav1 {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: 0.25em;
PADDING-BOTTOM: 0.25em;
BORDER-BOTTOM: rgb(56,56,73) 1px solid;
WIDTH: 100%;
COLOR: white;
BACKGROUND-COLOR: #f5b673;
TEXT-ALIGN: center
}
DIV#nav1 UL {
PADDING: 0px;
MARGIN: 0px;
}
DIV#nav1 LI {
DISPLAY: inline;
PADDING-LEFT: 0.5em;
BACKGROUND-IMAGE: url(../images/separator-1.png);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: left center;
}
DIV#nav1 LI.nobullet {
BACKGROUND-IMAGE: none;
}
DIV#nav1 A {
PADDING: 0px;
PADDING-RIGHT: 0.25em;
PADDING-LEFT: 0.25em;
TEXT-DECORATION: none;
}
DIV#nav1 A:link, DIV#nav1 A:visited {
FONT-WEIGHT: bold;
COLOR: rgb(56,56,73);
}
DIV#nav1 A:hover, DIV#nav1 A:focus {
COLOR: #f5b673;
BACKGROUND-COLOR: rgb(56,56,73)
}
DIV#nav2 {
MARGIN: 0px;
PADDING: 0px;
PADDING-BOTTOM: 0.25em;
PADDING-TOP: 0.25em;
BORDER-BOTTOM: rgb(56,56,73) 1px solid;
WIDTH: 100%;
COLOR: rgb(56,56,73);
BACKGROUND-COLOR: white;
TEXT-ALIGN: center;
FONT-FAMILY: "Times new roman", times, sans-serif;
}
DIV#nav2 UL {
PADDING: 0px;
MARGIN: 0px;
}
DIV#nav2 LI {
MARGIN: 0px;
PADDING: 0px;
PADDING-LEFT: 0.5em;
DISPLAY: inline;
BACKGROUND-IMAGE: url(../images/separator-2.jpg);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: left center;
}
DIV#nav2 LI.nobullet {
BACKGROUND-IMAGE: none;
}
DIV#nav2 A {
MARGIN: 0px;
PADDING: 0px;
PADDING-RIGHT: 0.25em;
PADDING-LEFT: 0.25em;
TEXT-DECORATION: none
}
DIV#nav2 A:link, DIV#nav2 A:visited {
FONT-WEIGHT: bold;
COLOR: rgb(56,56,73);
}
DIV#nav2 A:hover, DIV#nav2 A:focus {
COLOR: #f5b673;
BACKGROUND-COLOR: rgb(56,56,73)
}
DIV#leftnav {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 20%;
BACKGROUND-COLOR: rgb(192,192,192);
}
DIV#leftnav UL {
BACKGROUND-COLOR: rgb(228,230,234);
PADDING: 0;
MARGIN: 0;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: right;
PADDING-BOTTOM: 5em;
}
DIV#leftnav LI {
PADDING-TOP: 1em;
PADDING-BOTTOM: 0.25em;
PADDING-RIGHT: 0.5em
}
DIV#leftnav LI A {
PADDING: 0px;
PADDING-RIGHT: 0.25em;
PADDING-LEFT: 0.5em;
TEXT-DECORATION: none;
FONT-WEIGHT: bold;
}
DIV#leftnav LI A:link, DIV#leftnav LI A:visited {
COLOR: rgb(56,56,73);
}
DIV#leftnav LI A:hover, DIV#leftnav LI A:focus {
COLOR: #f5b673;
BACKGROUND-COLOR: rgb(56,56,73)
}
DIV#leftnav FORM {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: .5em;
PADDING-BOTTOM: .5em;
BACKGROUND-COLOR: rgb(228,230,234);
BORDER-TOP: black solid 1px;
BORDER-BOTTOM: black solid 1px;
TEXT-ALIGN: center;
}
DIV#leftnav p.search {
MARGIN: 0;
PADDING: 0;
FONT-WEIGHT: bold;
}
DIV#leftnav INPUT {
MARGIN: .25em;
}
/* Step 12 new code after this line */
DIV#leftnav FORM {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: .5em;
PADDING-BOTTOM: .5em;
BACKGROUND-COLOR: rgb(228,230,234);
BORDER-TOP: black solid 1px;
BORDER-BOTTOM: black solid 1px;
TEXT-ALIGN: center;
}
DIV#leftnav p.search {
MARGIN: 0;
PADDING: 0;
FONT-WEIGHT: bold;
}
DIV#leftnav INPUT {
MARGIN: .25em;
}
DIV#leftnav H4 {
MARGIN: 0;
MARGIN-TOP: .5em;
PADDING: 0;
BACKGROUND-COLOR: rgb(192,192,192);
FONT-FAMILY: sans-serif;
LETTER-SPACING: 0.07em;
FONT-SIZE: 100%;
WIDTH: 100%;
}
DIV#leftnav DL {
MARGIN: 0px;
PADDING-LEFT: .25em;
PADDING-BOTTOM: 1em;
FONT-FAMILY: sans-serif;
LETTER-SPACING: 0.07em;
FONT-SIZE: 80%;
}
DIV#leftnav DT {
MARGIN: 0;
PADDING: 0;
PADDING-TOP: 1em;
FONT-WEIGHT: BOLD;
}
DIV#leftnav DD {
MARGIN: 0;
PADDING: 0;
MARGIN-LEFT: .5em;
LETTER-SPACING: 0;
}
DIV#leftnav DD A {
FONT-WEIGHT: normal;
TEXT-DECORATION: underline;
FONT-WEIGHT: bold;
}
DIV#leftnav DD A:link, DIV#leftnav DD A:visited {
COLOR: rgb(56,56,73);
}
DIV#leftnav DD A:hover, DIV#leftnav DD A:focus {
COLOR: #000000;
}
</style>