Update Layout
This commit is contained in:
willysr
+23
-239
@@ -1,267 +1,51 @@
|
||||
/* NavBar */
|
||||
div#nav {
|
||||
font-size: 0.8em;
|
||||
float: right;
|
||||
margin-top: 74px;
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
div#nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#nav li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0 10px;
|
||||
/* reset */
|
||||
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, p, th, td, article, section, figure, img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#nav li:hover {
|
||||
border-bottom: 2px solid #F00;
|
||||
}
|
||||
|
||||
div#nav li a {
|
||||
display: block;
|
||||
padding: 0.25em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div#nav>ul a {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
body {
|
||||
margin: 10px;
|
||||
font-family: "Verdana";
|
||||
color: #000;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
div.subtitle, div.notifications {
|
||||
border-bottom: 1px solid #DEDEDE;
|
||||
margin-right: 10px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
div.notifications {
|
||||
text-align: center;
|
||||
color: #F00;
|
||||
header[role="banner"] {
|
||||
background: url("../images/background.jpg") 0 0 no-repeat;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00F;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 3px solid #F00;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.subject:hover {
|
||||
border-bottom: 0;
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div.header, div.header-class {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
background: #BBD9EE url("../images/background.jpg") 0 0 no-repeat;
|
||||
font-size: 20px;
|
||||
color: #F00;
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div.header-class {
|
||||
background: #BBD9EE url("../images/background-repeat.jpg") 0 0 repeat-x;
|
||||
}
|
||||
|
||||
div.content {
|
||||
margin: 0 200px 0 0;
|
||||
}
|
||||
|
||||
div.intro {
|
||||
width: 75%;
|
||||
border: 0px solid #F00;
|
||||
}
|
||||
|
||||
div.quotes {
|
||||
nav[role="navigation"] ul {
|
||||
float: right;
|
||||
border: 3px solid #ab801a;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 2px 0;
|
||||
width: 20%;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
font-family: "Verdana, Georgia, Arial";
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
div.date {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
color: #000;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
div.sidebar {
|
||||
float: right;
|
||||
width: 200px;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
div.subjects, div.news {
|
||||
margin: 0 10px 0 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
div.news {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
div.subjects h1, div.news h1 {
|
||||
border-bottom: 1px solid #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.subjects img {
|
||||
margin: 10px 10px 10px 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div.update-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
margin-top:65px;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
p.even {
|
||||
background: #E0EECF;
|
||||
padding: 2px;
|
||||
nav[role="navigation"] li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p.odd {
|
||||
background: #fdddaa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
span.subjectTitle {
|
||||
float: left;
|
||||
font-size: 1.5em;
|
||||
color: #000;
|
||||
margin-left: 0;
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
div.footer {
|
||||
height:10px;
|
||||
border-top:1px solid #B1B1B1;
|
||||
margin-right: 1em;
|
||||
text-align:center;
|
||||
font-family:"Verdana, Sans-Serif";
|
||||
font-size:0.8em;
|
||||
font-weight:normal;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
/*
|
||||
CSS Text Boxes
|
||||
Copyright : MikeCherim.com (http://green-beast.com/)
|
||||
*/
|
||||
|
||||
body > #class-information {
|
||||
margin : auto;
|
||||
float: right;
|
||||
}
|
||||
|
||||
div#class-information {
|
||||
float:right;
|
||||
}
|
||||
/*
|
||||
Now I'm resetting the paragraph padding (it was zeroed). I'm also clearing
|
||||
the p, but I don't really need this for the top one, only the bottom. The
|
||||
top has no effect (it'll clear the heading by default), but it is needed
|
||||
for the bottom (depending on the shell width versus the ul width). It may
|
||||
not be needed at all. Your situation will determine.
|
||||
*/
|
||||
#class-information p {
|
||||
padding : 0px;
|
||||
clear : both;
|
||||
}
|
||||
|
||||
/*
|
||||
I define the width of the ul, set the height (in ems!) align the text and
|
||||
remove list styles. The last may not be needed on most browsers
|
||||
*/
|
||||
ul.cinfo {
|
||||
height : 9em;
|
||||
text-align : center;
|
||||
list-style-type : none;
|
||||
}
|
||||
|
||||
/*
|
||||
Now I style the individual boxes (li)
|
||||
*/
|
||||
ul.cinfo li {
|
||||
margin : 0 2px 10px;
|
||||
border : 1px solid #666;
|
||||
width : 160px;
|
||||
height : auto;
|
||||
background : #f6f6ff;
|
||||
float : left;
|
||||
display : block;
|
||||
}
|
||||
|
||||
/*
|
||||
Style the li links
|
||||
*/
|
||||
#class-information a {
|
||||
color : #A01300;
|
||||
}
|
||||
|
||||
#class-information a:hover, #class-information a:focus, #class-information a:active {
|
||||
text-decoration : none;
|
||||
color: #FFF;
|
||||
background-color: #A01300;
|
||||
}
|
||||
|
||||
#class-information a:focus, #class-information a:active {
|
||||
color: #FFF;
|
||||
background-color: #A01300;
|
||||
}
|
||||
|
||||
/*
|
||||
Style the h3 links
|
||||
*/
|
||||
#class-information ul.cinfo h3 {
|
||||
color : #FFF;
|
||||
display : block;
|
||||
width : 160px;
|
||||
padding : 2px 0;
|
||||
background : #5280bc;
|
||||
border-bottom : 1px solid #666;
|
||||
text-decoration : none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#class-information ul.cinfo h3 a:hover, #class-information ul.cinfo h3 a:focus, #class-information ul.cinfo h3 a:active {
|
||||
background : #957412;
|
||||
color : #fff;
|
||||
}
|
||||
|
||||
/*
|
||||
This tyles the text p content within the li separately. The most important
|
||||
thing here is to re-kill the padding and add the margin to create good gutters
|
||||
*/
|
||||
ul.cinfo p {
|
||||
font-size : 0.9em;
|
||||
padding : 0;
|
||||
margin : 10px;
|
||||
}
|
||||
+12
-8
@@ -1,9 +1,13 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.php">Home</a></li>
|
||||
<li><a href="about.php">About</a></li>
|
||||
<li><a href="schedule.html">Schedule</a></li>
|
||||
<li><a href="teaching.php">Teaching</a></li>
|
||||
<li><a href="publications.php">Publications</a></li>
|
||||
</ul>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="index.php">Home</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="about.php">About</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="schedule.html">Schedule</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="teaching.php">Teaching</a></li>
|
||||
<li>|</li>
|
||||
<li><a href="publications.php">Publications</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user