- Joined
- 2 Mar 2002
- Messages
- 1,572
I've been playing around with page layouts using CSS. Problem is, how do I define a footer using CSS? My CSS definitions are at http://vern.ionichost.com/nucleus/default.css. Any help would be very much appreciated.
/* start body style definition */
body {
font-family: verdana, arial, sans-serif;
font-size: x-small;
color: #000;
background-color: #999999;
}
/* end body style definition */
/*start body link styles definition*/
body a:link {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background-color: #FFFFFF;
color: #CC0000;
text-decoration: none;
}
body a:visited {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background-color: #FFFFFF;
color: #CC0000;
text-decoration: none;
}
body a:hover {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background-color: #FFFFFF;
color: #FF0000;
text-decoration: none;
}
body a:active {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background-color: #FFFFFF;
color: #FF0000;
text-decoration: none;
}
/*end body link styles definition*/
/*
The definitions below determine how the page looks.
There are 3 main div-elements, which are all positioned absolute
(relative to the upper left corner of the screen):
.contents: contains the main contents of the page.
.menu: sidebar with menu
.logo: logo to be displayed above the sidebar
*/
/*start body definition*/
.contents {
float:left;
width:80%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}
/*end body definition*/
/*start menu definition*/
.menu {
top: 90px;
left: 30px;
width: 120px;
margin-left:0px;
/* use a lighter text color (grey) and a smaller font */
color: #777;
font-size: x-small;
background-color: #999999;
}
/*end menu definition*/
/*start menu link styles definition*/
.menu a:link {
font-family: verdana, arial, sans-serif;
font-size: x-small;
color: #CC0000;
text-decoration: none;
font-weight: bold;
background-color: #999999;
}
.menu a:visited {
font-family: verdana, arial, sans-serif;
font-size: x-small;
color: #CC0000;
text-decoration: none;
font-weight: bold;
background-color: #999999;
}
.menu a:hover {
font-family: verdana, arial, sans-serif;
font-size: x-small;
color: #FF0000;
text-decoration: none;
background-color: #999999;
}
.menu a:active {
font-family: verdana, arial, sans-serif;
font-size: x-small;
color: #FF0000;
text-decoration: none;
background-color: #999999;
}
/*end menu link styles definition*/
/*
Definitions for headers in the menu (.menu h2), page titles (h1)
and dateheads (.contents h2):
- page titles are centered (within the .contents div)
- menu headers (h2) use a small font
- dateheads use a large font and are in a box
*/
h1 {
text-align: center;
}
.menu h2 {
font-size: small;
}
.contents h2 {
background-color: whitesmoke;
border: 1px solid #ccc;
padding: 5px;
font-size: large;
margin-bottom: 5px;
}
/*
Definitions for the item listings like they are done on the main page and in archives
- h3.item is the title of an item (<h3 class="item">)
- .itembody is the item contents
- .iteminfo contains the time of posting and the name of the author, and the amount of comments
anchors in the iteminfo (.iteminfo a) are not underlined and bold
*/
/* item title */
h3.item {
font-size: medium;
margin: 0px;
margin-top: 10px;
}
.itembody {
margin-top: 5px;
margin-bottom: 5px;
}
.iteminfo {
font-size: x-small;
color: gray;
}
.iteminfo a {
font-weight: bolder;
color: #555;
text-decoration: none;
}
/*
Definitions of how comments listings look like on item pages
- h3.comment contains the name of the comment author
- .commentbody contains the text from the comment
- .commentinfo contains the time of commenting
*/
/* comment title */
h3.comment {
font-size: medium;
margin-bottom: 10px;
}
.commentbody {
align: justify;
}
.commentinfo {
font-size: x-small;
color: gray;
}
/*
Some rules that apply to contents generated using the markup buttons
"add left box" and "add right box"
both boxes have slightly larger text, and take a maximum of 20% of
the width of the contents.
*/
.leftbox, .rightbox {
margin: 3px;
padding: 3px;
font-size: larger;
width: 20%;
}
.leftbox {
float: left;
border-right: 2px solid #ccc;
}
.rightbox {
float: right;
border-left: 2px solid #ccc;
}
/*
Some general rules:
- images never have a border (even when they are inside a hyperlink)
- elements having class="skip" are not shown
- item lists using <ul class="nobullets"> have no list-item bullets
- highlighted text (in search results) have a yellow background
*/
img {
border: none;
}
.skip {
display: none;
background-color: #FFFFFF;
}
ul.nobullets {
list-style: none;
margin-left: 0px;
padding-left: 0px;
}
.highlight {
background-color: yellow;
}
Originally posted by Benny
"You do not have access to this document" :huh: