Update Layout
This commit is contained in:
willysr
+22
-238
@@ -1,267 +1,51 @@
|
|||||||
/* NavBar */
|
html {
|
||||||
div#nav {
|
font-size: 62.5%;
|
||||||
font-size: 0.8em;
|
background: #FFF;
|
||||||
float: right;
|
|
||||||
margin-top: 74px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div#nav ul {
|
/* reset */
|
||||||
|
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, p, th, td, article, section, figure, img {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#nav li {
|
|
||||||
position: relative;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 10px;
|
|
||||||
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 {
|
body {
|
||||||
margin: 10px;
|
font-size: 1.5rem;
|
||||||
font-family: "Verdana";
|
line-height: 2rem;
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.subtitle, div.notifications {
|
header[role="banner"] {
|
||||||
border-bottom: 1px solid #DEDEDE;
|
background: url("../images/background.jpg") 0 0 no-repeat;
|
||||||
margin-right: 10px;
|
width: 100%;
|
||||||
font-size: 1.5em;
|
height: 100px;
|
||||||
}
|
|
||||||
|
|
||||||
div.notifications {
|
|
||||||
text-align: center;
|
|
||||||
color: #F00;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #00F;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
border-bottom: 3px solid #F00;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.subject:hover {
|
a:active {
|
||||||
border-bottom: 0;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.header, div.header-class {
|
a:visited {
|
||||||
width: 100%;
|
text-decoration: none;
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
margin: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
background: #BBD9EE url("../images/background.jpg") 0 0 no-repeat;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #F00;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.header-class {
|
|
||||||
background: #BBD9EE url("../images/background-repeat.jpg") 0 0 repeat-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content {
|
nav[role="navigation"] ul {
|
||||||
margin: 0 200px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.intro {
|
|
||||||
width: 75%;
|
|
||||||
border: 0px solid #F00;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.quotes {
|
|
||||||
float: right;
|
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;
|
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;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
p.even {
|
|
||||||
background: #E0EECF;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
margin: 0;
|
||||||
|
margin-top:65px;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#class-information ul.cinfo h3 a:hover, #class-information ul.cinfo h3 a:focus, #class-information ul.cinfo h3 a:active {
|
nav[role="navigation"] li {
|
||||||
background : #957412;
|
display: inline;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
@@ -1,9 +1,13 @@
|
|||||||
<nav>
|
<nav role="navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="index.php">Home</a></li>
|
<li><a href="index.php">Home</a></li>
|
||||||
|
<li>|</li>
|
||||||
<li><a href="about.php">About</a></li>
|
<li><a href="about.php">About</a></li>
|
||||||
|
<li>|</li>
|
||||||
<li><a href="schedule.html">Schedule</a></li>
|
<li><a href="schedule.html">Schedule</a></li>
|
||||||
|
<li>|</li>
|
||||||
<li><a href="teaching.php">Teaching</a></li>
|
<li><a href="teaching.php">Teaching</a></li>
|
||||||
|
<li>|</li>
|
||||||
<li><a href="publications.php">Publications</a></li>
|
<li><a href="publications.php">Publications</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -32,20 +32,20 @@ include "includes/navbar.html";
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="news">
|
<section class="news">
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<h1>My Classes in 2012/2013</h1>
|
<h1>My Classes in Gasal 2012/2013</h1>
|
||||||
<time datetime="2012-06-13"></time>
|
<time datetime="2012-06-13"></time>
|
||||||
</header>
|
</header>
|
||||||
<p>I will be teaching A, B, and C</p>
|
<p>I will be teaching Project Management, Computer Security, and Computer Technology</p>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<h1>This page is HTML5 Compliance</h1>
|
<h1>This page is HTML5 Compliance</h1>
|
||||||
<time datetime="2012-06-13"></time>
|
<time datetime="2012-06-13"></time>
|
||||||
</header>
|
</header>
|
||||||
<p>I have migrated this simple web page to be HTML5 compliance. If for some reason you experienced difficulties viewing this page properly, then i suggest you to update your browser to the latest version.</p>
|
<p>I have migrated this simple web page to be HTML5 compliance. If for some reason you experienced difficulties viewing this page properly, then i suggest you to update your browser to the latest version.</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<?php
|
<?php
|
||||||
include "includes/footer.php";
|
include "includes/footer.php";
|
||||||
|
|||||||
Reference in New Issue
Block a user