|
CSS - Making A Table's Rows Have More Room At Top And Bottom
i have tried margins and padding but its not working!
Code: .contenttable {
font-family: Verdana;
font-size: 12px;
color: #606060;
}
.contenttable tr {
margin-top:10px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
}
the table is here. any ideas how i can improve it otherwise, after the <tr> margins are fixed? Similar TutorialsI was wondering if there was anyway to make a div appear at the bottom of the monitor. In other words, on my laptop, I have a site that I need to scroll down for. It goes as far down as a copyright notice. The copyright notice has a black border on top, right, and left, but not the bottom. That's fine because when it gets to that item, it stops scrolling and lines up with the bottom of the monitor. However, at home, I have a 21" monitor, and the bottom element is just floating there because everything easily fits within the screen. I wanted to see if I could get that bottom element to line up at the bottom of the viewable area somehow. Is this possible? Thanks. I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want. simple example: CSS: Code:
a:link, a:visited, a:active {
font-size: 1em;
}
a:hover {
font-size: 1.5em;
}
HTML: Code:
<div>
<a href="#">Text</a>
</div>
Hey all, See on http://yourfishguide.com/Main_Page the grass at the bottom is 'siting' on the bottom of the page? Then on http://yourfishguide.com/Your_Fish_Guide:About it's a little above the bottom of the page. How can I make the grass "stick" to the bottom of the page, regardless of the length of the content above it? Thanks, Jordan Hi, I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS. In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right. The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error. Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right? The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing). I hope that makes sense and, as always, any help appreciated. I'm trying to cleanup my html code by using more css. What would be correct way to replace spacing between table rows like this one: Code: <tr><td> </td></tr> to something "css" Thanks! I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP Code: <!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" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> I am trying to set a table to sit on the bottom of the browser at all times, like a hovered BG image. Anyone know how to do this? I've tried this but I obliviously don't know what i'm doing #grass { position:absolute; bottom:100% background-repeat: no-repeat; background-position: 0px -0px; } (it's a landscaping website, i want grass on the bottom on the screen) The guys in html told me to post this here instead. Basically I have this table that Should be at the bottom of the page, but if theres a lack of content it gets pulled up. The red highlights area in the attachment is what Im talking about - note Ive tried bottom : 0px; and height : 100%; Any ideas? I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn? Is there anything I can put in my style sheet to do this? Am I not being clear enough? Please help. EDIT : I've got a picture uploaded. See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/ I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: http://i78. photobucket.com/albums/j108/l8org8or/HELP.jpg (take out the spaces before "photobucket") I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. My site, http://www.in-a-dream.org, is having problems with space under the footer. Before it was a lot smaller, and then when I changed the layout somehow it became super stretched. I have no idea what is going on. The layout is not completely finished and I know there are broken images right now which will be changed. For right now the css is: Code:
/* Begin Typography & Colors */
body {
font-size: 70%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif,'Trebuchet MS';
background: #6C6C6C url('images/background.jpg');
color: #333;
text-align: center;
}
#page {
text-align: left;
position:relative;
left:0;
top:-1320px;
width: 894px;
}
#header {
background: #BB2845 url('images/header.jpg') no-repeat bottom center;
position:relative;
left:0;
top:0px;
width: 676px;
}
#topbackground {
background: #C7D67F url('images/topbackground2.jpg');
height: 1300px;
}
#headerimg {
margin: 7px 9px 0;
height: 370px;
width: 676px;
}
#content {
font-size: 1.2em;
background: #FFFFFF url('images/contentbackground.jpg');
position:relative;
left:0;
top:0px;
text-align: left;
padding: 0px 8px 0px 8px;
width: 660px;
}
.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}
#footer {
background: #DFE1E3 url('images/footerbackground.jpg');
border-bottom-color: #D2AED2;
border-bottom-width: 3px;
border-bottom-style: solid;
text-align: center
}
h1, h2, h3 {
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
font-weight: normal;
border-bottom: 1px dashed;
line-height: 1.6em;
}
h1 {
font-size: 4em;
text-align: center;
}
h2 {
font-size: 1.6em;
}
#sidebar h2 {
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
font-size: 1.2em;
font-weight: bold;
text-align: right;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, cite {
text-decoration: none;
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
}
.entry p a:visited {
color: #E0316C;
}
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em Verdana, Arial, Sans-Serif,'Trebuchet MS';
}
.commentlist li {
font-weight: bold;
}
.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
#commentform p {
font-family: Verdana, Arial, Sans-Serif,'Trebuchet MS';
}
.commentmetadata {
font-weight: normal;
}
#sidebar {
font: 1em Verdana, Arial, Sans-Serif,'Trebuchet MS';
background: #FFFFFF url('images/sidebarbackground.jpg');
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}
code {
font: 1.1em Verdana, Arial, Sans-Serif,'Trebuchet MS';
}
a {
color: #E03164;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Sans-Serif, 'Trebuchet MS';
}
a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:visited:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.images {
margin: 0px 12px 0 0;
padding: 10px;
background-color: #E6E6E6;
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
}
.images:hover {
margin: 0px 12px 0 0;
padding: 10px;
background-color: #D6D6D6;
border-bottom: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
}
.sideimages {
margin: 0px 0px 0 0;
padding: 5px;
background-color: #E6E6E6;
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
}
.sideimages:hover {
margin: 0px 0px 0 0;
padding: 5px;
background-color: #E2C1A2;
border-bottom: 1px solid #E2C1A2;
border-right: 1px solid #E2C1A2;
}
.images2 {
margin: 0px 6px 0 0;
padding: 5px;
background-color: #E6E6E6;
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
}
.images2:hover {
margin: 0px 6px 0 0;
padding: 5px;
background-color: #D6D6D6;
border-bottom: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
}
/* End Typography & Colors */
/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}
#page {
background-color:transparent;
margin: 20px auto;
padding: 0;
width: 894px;
}
#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 370px;
width: 676px;
}
#headerimg {
margin: 0;
height: 370px;
width: 100%;
}
.narrowcolumn {
float: left;
padding: 0px 0px;
margin: 0px 0px 0px 1px;
width: 894px;
}
#footer {
clear: both;
padding: 8px 8px 8px 8px;
width: 660px;
margin: 0px 1px;
height: 142px;
font-family: Verdana, Arial, Sans-Serif,'Trebuchet MS';
color: #FFFFFF;
}
/* End Structure */
/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}
h2 {
margin: 15px 0 0;
}
#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}
/* End Headers */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */
/* Begin Lists */
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
content: "�BB �20";
}
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
/* End Entry Lists */
/* Begin Form Elements */
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 3px;
}
#commentform textarea {
width: 80%;
padding: 2px 2px 0 0;
margin: 5px 5px 1px 3px;
}
/* End Form Elements */
/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}
.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}
#commentform p {
margin: 5px 0;
}
/* End Comments */
/* Begin Sidebar */
#sidebar
{ margin-top: -2px;
margin-left: 677px;
padding: 0px 9px 8px 8px;
width: 199px;
text-align: justify;
border-bottom-width: 2px;
border-bottom-color: #769BD2;
border-bottom-style: solid;
border-top-width: 2px;
border-top-color: #769BD2;
border-top-style: solid;
}
/* End Sidebar */
/* Begin Various Tags & Classes */
blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.center {
text-align: center;
}
hr {
display: none;
}
a img {
border: none;
}
/* End Various Tags & Classes*/
Also, how do I get my footer to stick to the content bar no matter how long or short it is so that it doesn't hang below the sidebar when the content area is shorter than the sidebar? Hi there, I have an HTML/CSS design I'm working on, that can be accessed he http://www.design-portal.co.uk/demo/ The CSS can be found he http://www.design-portal.co.uk/demo/style.css Basically what I would like is this: I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example: http://www.design-portal.co.uk/demo/images/demo.jpg As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it? Cheers in advance, Dave The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). I have a css layout I'm working, that is all divs (my first time doing this without tables). My page consists of all divs, and then the body is a table for displaying date from a database. My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down. If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table. I hope that makes sense. CSS Tags -- Just a portion of them: Code:
body {
margin: 0px 0px 0px 0px;
background-color: #E7F1FD;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {
background-color: #E7F1FD;
border: 2px solid #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 165px;
}
/*Footer */
#left_footer {
background-image:url(images/bar_header2.jpg);
width:100%;
height:36px;
position:absolute;
bottom: 0px;
}
My DIVS (partial): Code: <!-- START BODY --> <div id="pwdb_body"> <table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1> <tr> <td>...table data...</td> </tr> </table> </div> <div id="left_footer"><img src="images/index_02.gif"/></div> I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow. Hi, I am using nested tables in order to create a recursive tree-like effect. I got it to look how I want on IE 8, and it looks almost identical in Firefox. However, Chrome is not distributing table rows evenly. It seems to make the first row in a table a minimum size, and then the second row a maximum size. I'm looking for some css property that will help this to work across all three browsers, and I'm also open to another way of doing this - (instead of nested tables) - but I did spend weeks getting it to look this way before I decided I wanted to try tackling Chrome, and have been unable to figure it out. Here is a simple example that clearly demonstrates what I'm trying to get working on Chrome. (as a new user I can't post a url to the working page I have up on the internet) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Firefox Vs Chrome - table rows - found @ http://jacob.jrobertsons.com/FirefoxVsChromeRows.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
table {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: solid 0px blue;
}
td {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: solid 0px black;
}
.l {
border-left: 1px solid #c82;
}
.b {
border-bottom: 1px solid #c82;
width: 15px;
}
.t {
border-top: 1px solid #c82;
}
.n {
padding-bottom: 4px;
border: 1px solid #c82;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="4">
<table>
<tr>
<td class="n" rowspan="2">AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="4">
<table>
<tr>
<td class="n" rowspan="2">BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">CCC</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="l"> </td>
</tr>
<tr>
<td class="b l"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">DDD<br />
DDD<br />
DDD<br />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="l"> </td>
</tr>
<tr>
<td class="b l"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="2">
<table>
<tr>
<td class="n" rowspan="2">EEE</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Thanks for any help you can provide! Hey guys, I'm having some trouble getting a table to stretch to 100% of the browser height. It seems to work in IE but not in netscape. Any suggestions? Here is what I'm doing in headder tag: Code: <style type="text/css">
html,body { height:100%; }
.outer{ height:100%; }
</style>
Then in my code for the table I have this: Code: <table width="808" border="0" cellspacing="0" cellpadding="0" class="outer"> Should I try using a DIV tag instead? Please let me know if you have any suggestions. Thanks! Hello, I have a page with the left margin set to 100. How can I use CSS to make a table have a left margin of 0. I need everything else to be @ left margin 100. So I want to totally ignore the left margin setting only for this table. I've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
|
|||||||