Reply
Old March 27th, 2003 Top | #1

OSNN Folding Team  
vern's Avatar
Dominus
Joined: March 2002
Location: Minnesota, USA
Posts: 1,570
Reputation: 660
Power: 143

Default Page layout using CSS

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.
vern is offline   Reply With Quote
Old March 27th, 2003 Top | #2
 
Tabula Rasa's Avatar
Stranger Than Kindness
Joined: July 2002
Location: Israel
Posts: 3,233
Reputation: 450
Power: 154

Default

"You do not have access to this document" :huh:
Tabula Rasa is offline   Reply With Quote
Old March 28th, 2003 Top | #3

OSNN Folding Team  
vern's Avatar
Dominus
Joined: March 2002
Location: Minnesota, USA
Posts: 1,570
Reputation: 660
Power: 143

Default ...

Everyone has rights to view default.css. But if you really can't access it ... this is it...

/* 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:
vern is offline   Reply With Quote
Old March 30th, 2003 Top | #4
 
Kevin Ar18's Avatar
OSNN Senior Addict
Joined: February 2002
Posts: 300
Reputation: 0
Power: 125

Default Re: Page layout using CSS

Originally posted by vern
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.
What do you mean by a footer?
Kevin Ar18 is offline   Reply With Quote
Old April 3rd, 2003 Top | #5
 
X-Istence's Avatar
*
Joined: December 2001
Location: USA
Posts: 6,490
Reputation: 2808
Power: 217

Default

One thing, CSS stylesheets do not get cached, html pages however do, try to keep it as much HTML as possible. This is for people on dialup.
X-Istence is offline   Reply With Quote

Reply

Bookmarks

Thread Tools

Posting Rules

Similar Threads
Thread Thread Starter Forum Replies Last Post
Page Layout Lee Site Problems & Feedback 41 April 24th, 2004 9:26pm
Screen Size/Page Layout DragonHeart Windows Desktop Systems 4 November 9th, 2002 11:55am
Keyboard Layout Jivefrog General Hardware 3 May 20th, 2002 5:12am
Like the new layout ? waddy Green Room 12 February 12th, 2002 9:37pm