jessica.eduka
09-05-2007, 03:06 AM
If you go to this site itc03.eduka.info you will see a "latest reports box" and a "shareprice box" Iam trying to position them so that the "shareprice box" is directly underneath the "latest reports box" they must have the same width, and reach the end of the grey top image. If you have the developer toolbar you can just edit the css, if not here is the css for the content...
/**********************
LAYOUT STYLES
***********************/
html, body{
height:100%;
}
body {
margin: 0;
padding:0;
background: #fff url(../images/gfx/background.gif) repeat-x;
}
#container {
margin: 0 auto;
width:100%;
max-width:1000px;
min-width:758px;
width:expression(document.body.clientWidth > 1020? "1020px": "auto" );
min-height:100%;
margin-bottom:-25px;
background-color:#fff;
}
* html #container{
height:100%;
margin-bottom:auto;
}
#wrap{
border-left:5px solid #fff;
border-right:5px solid #fff;
}
#masthead{
position:relative;
height:140px;
z-index:1;
}
#oilrig{
position:absolute;
right:0;
top:32px;
z-index:1;
}
#topimage{
background:url('../images/image/gradient2.jpg') no-repeat;
background-position: left;
height: 221px;
width: 100%;
overflow:hidden;
position:relative;
text-align:center;
}
#topimage img{
position:relative;
margin:auto;
}
.subscribe{
background: url(../images/gfx/topbar.jpg) repeat-x;
position:absolute;
top:0;
left:0;
width:100%;
z-index:2;
}
h2#logo a:link, h1#logo a:visited, h1#logo a:hover{
height:69px;
width:467px;
margin:0;
padding:0;
display:block;
}
h2#logo{
height:69px;
width:167px;
margin:0;
padding:0;
text-indent : -9999px;
text-decoration:none;
background:url(../images/gfx/logo.gif) no-repeat;
display : block;
position:absolute;
top:30px;
left:0;
z-index:2;
}
.breadcrumbs{
font-size:85%;
text-align:right;
}
#main{
width: 100%;
float: right;
height:100%;
}
#main #content{
margin-left: 71em;
}
#sidecontent{
width: 45em;
float: left;
top:-68em;
margin:0;
}
#content .box{
height:20em;
}
#middle_column{
float:right;
width:30em;
height:60em;
}
#middle_column_content{
float:right;
top:-8em;
right:23em;
width:20em;
height:10px;
}
#right_column{
float:right;
top:-379px;
right:2px;
width:21em;
}
.box{
min-height:25em;
margin-top:12px;
position:relative;
border:1px solid #3B6F49;
z-index:1;
}
* html .box{
height:25em;
}
.box .link{
text-align:right;
position:absolute;
bottom:0;
right:12px;
z-index:1;
}
.box h2{
top:5px;
left:10px;
margin:0;
padding:3px 0 3px 11px;
}
#news, .sharepriceWrapper, .text{
margin:5px;
}
.internal{
padding-left:1em;
}
#footer{
margin: 0 auto;
width:100%;
max-width:1010px;
min-width:758px;
width:expression(document.body.clientWidth > 1020? "1020px": "auto" );
border-top:1px solid #C8C8C8;
clear:both;
}
.clear{
clear:both;
}
.column{
float:left;
}
.contact{
width:60%;
margin-left:8em;
}
table .tbldrilling{
border-collapse:collapse;
}
table.tbldrilling td, table.tbldrilling th{
border:1px solid #ccc;
padding:3px;
}
table.tbldrilling th{
background-color:#EEEFEF;
text-align:left;
}
/*************************
HOME PAGE NEWS BOX
*************************/
.newsitem a:link, .newsitem a:visited, .newsitem a:hover{
font-weight:bold;
text-decoration:none;
}
.newsitem a:hover{
text-decoration:underline;
}
/*************************
SHARE PRICE BOX
*************************/
.sharepriceWrapper span{
display:block;
}
.spnSymbol{
font-weight:bold;
color:#3B6F49;
}
/**************************
ROUNDED CORNERS
**************************/
img.corner {
width: 10px;
height: 10px;
border: none;
display: block !important;
position:absolute;
z-index:5;
}
.topleft{
left:-1px;
top:-1px;
}
.bottomright{
right:-1px;
bottom:-1px;
}
/**************************
TEXT STYLES
**************************/
body{
font-size:small;
color:#000000;
}
#container, #footer{
font-size: 85%;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
p{
margin-bottom: 1em;
margin-top: .3em;
}
#footer{
color:#000;
background-color:#fff;
text-align:right;
line-height:25px;
position:relative;
height:25px;
font-size:70%;
z-index:1;
}
#footer a:link, #footer a:visited{
color:#000;
text-decoration:none;
}
#footer a:hover{
text-decoration:underline;
}
#footer span.left{
padding-left:0.5em;
position:absolute;
left:0.5em;
z-index:1;
}
#footer span.right{
position:absolute;
right:0.5em;
z-index:1;
}
h1, h2, h3, h4, h5, h6{
font-family: Arial, Verdana, Helvetica, sans-serif;
}
h1{
color:#3B6F49;
font-size:1.8em;
font-weight:normal;
}
h2{
color:#3B6F49;
font-size:1.5em;
font-weight:normal;
}
h3{
font-size:1em;
font-weight:bold;
margin-bottom:1em;
}
h3 + p{
margin-top:-1em;
}
a:link, a:visited, a:hover{
color:#3B6F49;
}
a:hover{
text-decoration:none;
}
.box a:link, .box a:visited{
text-decoration:none;
}
.box a:hover{
text-decoration:underline;
}
.box h2{
background-color:#6EAA81;
color:#fff;
font-weight:bold;
font-size:120%;
}
.text a:link, .text a:visited, .text a:hover{
color:#000;
font-weight:bold;
}
.link a:link, .link a:visited, .link a:hover{
color:#3B6F49;
font-weight:normal;
}
/******************
EDUKA FORM LAYOUT STYLES
******************/
fieldset { margin-bottom: 10px; border:none; padding:0;}
.edukaform legend {
padding: 0 2px;
font-weight: bold;
margin: 0 -7px; /* IE Win */
}
.edukaform label
{
float:left;
vertical-align: top;
}
.edukaform fieldset ol {
margin: 0;
padding: 0;
}
.edukaform fieldset li {
list-style: none;
margin: 0 0 5px 0;
overflow:hidden;
}
.edukaform fieldset fieldset {
border: none;
margin: 3px 0 0;
}
.edukaform fieldset fieldset legend {
padding: 0 0 5px;
font-weight: normal;
}
.edukaform fieldset fieldset label {
display: block;
width: auto;
}
.edukaform em { /*required field asterix*/
font-weight: bold;
font-style: normal;
color:red;
}
.edukaform label { width: 45%;} /* Width of labels */
.edukaform fieldset fieldset label { margin-left: 45%; } /* Width plus 3 (html space) */
/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */
.edukaform .checkbox input{
float:left;
}
.edukaform .checkbox label{
width:auto;
float:left;
}
.edukaform .checkbox{
float:left;
clear:both;
}
.textbox, .select, .textarea{
width:15em;
}
.contact .button, .contact .error{
margin-left:45%;
}
/******************
ALERT STYLES
******************/
.warning{/*styles the warning messages*/
background-color:#FFF4AD;
padding:10px 5px 5px 50px;
clear:both;
margin-bottom:10px;
background-image:url(../images/gfx/warning.gif);
background-repeat:no-repeat;
background-position:5px 5px;
border:3px solid #DAB100;
min-height:30px;
color:red;
}
.failure{/*styles the failure messages*/
background-color:#E84F4F;
padding:5px 5px 5px 50px;
clear:both;
color:#fff;
margin-bottom:10px;
background-image:url(../images/gfx/failure.gif);
background-repeat:no-repeat;
background-position:5px 5px;
border:3px solid #BF1212;
min-height:30px;
}
.success{ /*styles the success messages*/
background-color:#B5FFAD;
padding:5px 5px 5px 50px;
clear:both;
color:#000;
margin-bottom:10px;
background-image:url(../images/gfx/success.gif);
background-repeat:no-repeat;
background-position:5px 5px;
border:3px solid #53AA4A;
min-height:30px;
}
* html .warning, * html .failure, * html .success{
height:30px;
}
/***************************
SUBSCRIBE BOX
****************************/
.subscribe{
height:30px;
margin:0;
padding:0;
}
.subscribe fieldset{
background:url(../images/gfx/topbar_left.gif) no-repeat bottom left;
margin:0;
padding:0;
}
.subscribe ol{
float:right;
background:url(../images/gfx/topbar_right.gif) no-repeat bottom right;
margin:0;
padding:0;
}
.subscribe li{
text-align:right;
margin:0;
padding:0 7px 0 0;
}
.subscribe label{
text-align:right;
line-height:2em;
padding-right:3px;
float:left;
width:auto;
}
.button{
color:#fff;
text-transform:uppercase;
background-color:#3B6F49;
font-weight:bold;
padding:0 2px;
font-size:1em;
line-height:1em;
font-family:arial, helvetica, sans-serif;
height:18px;
border:1px outset #fff;
}
/**********************
LAYOUT STYLES
***********************/
html, body{
height:100%;
}
body {
margin: 0;
padding:0;
background: #fff url(../images/gfx/background.gif) repeat-x;
}
#container {
margin: 0 auto;
width:100%;
max-width:1000px;
min-width:758px;
width:expression(document.body.clientWidth > 1020? "1020px": "auto" );
min-height:100%;
margin-bottom:-25px;
background-color:#fff;
}
* html #container{
height:100%;
margin-bottom:auto;
}
#wrap{
border-left:5px solid #fff;
border-right:5px solid #fff;
}
#masthead{
position:relative;
height:140px;
z-index:1;
}
#oilrig{
position:absolute;
right:0;
top:32px;
z-index:1;
}
#topimage{
background:url('../images/image/gradient2.jpg') no-repeat;
background-position: left;
height: 221px;
width: 100%;
overflow:hidden;
position:relative;
text-align:center;
}
#topimage img{
position:relative;
margin:auto;
}
.subscribe{
background: url(../images/gfx/topbar.jpg) repeat-x;
position:absolute;
top:0;
left:0;
width:100%;
z-index:2;
}
h2#logo a:link, h1#logo a:visited, h1#logo a:hover{
height:69px;
width:467px;
margin:0;
padding:0;
display:block;
}
h2#logo{
height:69px;
width:167px;
margin:0;
padding:0;
text-indent : -9999px;
text-decoration:none;
background:url(../images/gfx/logo.gif) no-repeat;
display : block;
position:absolute;
top:30px;
left:0;
z-index:2;
}
.breadcrumbs{
font-size:85%;
text-align:right;
}
#main{
width: 100%;
float: right;
height:100%;
}
#main #content{
margin-left: 71em;
}
#sidecontent{
width: 45em;
float: left;
top:-68em;
margin:0;
}
#content .box{
height:20em;
}
#middle_column{
float:right;
width:30em;
height:60em;
}
#middle_column_content{
float:right;
top:-8em;
right:23em;
width:20em;
height:10px;
}
#right_column{
float:right;
top:-379px;
right:2px;
width:21em;
}
.box{
min-height:25em;
margin-top:12px;
position:relative;
border:1px solid #3B6F49;
z-index:1;
}
* html .box{
height:25em;
}
.box .link{
text-align:right;
position:absolute;
bottom:0;
right:12px;
z-index:1;
}
.box h2{
top:5px;
left:10px;
margin:0;
padding:3px 0 3px 11px;
}
#news, .sharepriceWrapper, .text{
margin:5px;
}
.internal{
padding-left:1em;
}
#footer{
margin: 0 auto;
width:100%;
max-width:1010px;
min-width:758px;
width:expression(document.body.clientWidth > 1020? "1020px": "auto" );
border-top:1px solid #C8C8C8;
clear:both;
}
.clear{
clear:both;
}
.column{
float:left;
}
.contact{
width:60%;
margin-left:8em;
}
table .tbldrilling{
border-collapse:collapse;
}
table.tbldrilling td, table.tbldrilling th{
border:1px solid #ccc;
padding:3px;
}
table.tbldrilling th{
background-color:#EEEFEF;
text-align:left;
}
/*************************
HOME PAGE NEWS BOX
*************************/
.newsitem a:link, .newsitem a:visited, .newsitem a:hover{
font-weight:bold;
text-decoration:none;
}
.newsitem a:hover{
text-decoration:underline;
}
/*************************
SHARE PRICE BOX
*************************/
.sharepriceWrapper span{
display:block;
}
.spnSymbol{
font-weight:bold;
color:#3B6F49;
}
/**************************
ROUNDED CORNERS
**************************/
img.corner {
width: 10px;
height: 10px;
border: none;
display: block !important;
position:absolute;
z-index:5;
}
.topleft{
left:-1px;
top:-1px;
}
.bottomright{
right:-1px;
bottom:-1px;
}
/**************************
TEXT STYLES
**************************/
body{
font-size:small;
color:#000000;
}
#container, #footer{
font-size: 85%;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
p{
margin-bottom: 1em;
margin-top: .3em;
}
#footer{
color:#000;
background-color:#fff;
text-align:right;
line-height:25px;
position:relative;
height:25px;
font-size:70%;
z-index:1;
}
#footer a:link, #footer a:visited{
color:#000;
text-decoration:none;
}
#footer a:hover{
text-decoration:underline;
}
#footer span.left{
padding-left:0.5em;
position:absolute;
left:0.5em;
z-index:1;
}
#footer span.right{
position:absolute;
right:0.5em;
z-index:1;
}
h1, h2, h3, h4, h5, h6{
font-family: Arial, Verdana, Helvetica, sans-serif;
}
h1{
color:#3B6F49;
font-size:1.8em;
font-weight:normal;
}
h2{
color:#3B6F49;
font-size:1.5em;
font-weight:normal;
}
h3{
font-size:1em;
font-weight:bold;
margin-bottom:1em;
}
h3 + p{
margin-top:-1em;
}
a:link, a:visited, a:hover{
color:#3B6F49;
}
a:hover{
text-decoration:none;
}
.box a:link, .box a:visited{
text-decoration:none;
}
.box a:hover{
text-decoration:underline;
}
.box h2{
background-color:#6EAA81;
color:#fff;
font-weight:bold;
font-size:120%;
}
.text a:link, .text a:visited, .text a:hover{
color:#000;
font-weight:bold;
}
.link a:link, .link a:visited, .link a:hover{
color:#3B6F49;
font-weight:normal;
}
/******************
EDUKA FORM LAYOUT STYLES
******************/
fieldset { margin-bottom: 10px; border:none; padding:0;}
.edukaform legend {
padding: 0 2px;
font-weight: bold;
margin: 0 -7px; /* IE Win */
}
.edukaform label
{
float:left;
vertical-align: top;
}
.edukaform fieldset ol {
margin: 0;
padding: 0;
}
.edukaform fieldset li {
list-style: none;
margin: 0 0 5px 0;
overflow:hidden;
}
.edukaform fieldset fieldset {
border: none;
margin: 3px 0 0;
}
.edukaform fieldset fieldset legend {
padding: 0 0 5px;
font-weight: normal;
}
.edukaform fieldset fieldset label {
display: block;
width: auto;
}
.edukaform em { /*required field asterix*/
font-weight: bold;
font-style: normal;
color:red;
}
.edukaform label { width: 45%;} /* Width of labels */
.edukaform fieldset fieldset label { margin-left: 45%; } /* Width plus 3 (html space) */
/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */
.edukaform .checkbox input{
float:left;
}
.edukaform .checkbox label{
width:auto;
float:left;
}
.edukaform .checkbox{
float:left;
clear:both;
}
.textbox, .select, .textarea{
width:15em;
}
.contact .button, .contact .error{
margin-left:45%;
}
/******************
ALERT STYLES
******************/
.warning{/*styles the warning messages*/
background-color:#FFF4AD;
padding:10px 5px 5px 50px;
clear:both;
margin-bottom:10px;
background-image:url(../images/gfx/warning.gif);
background-repeat:no-repeat;
background-position:5px 5px;
border:3px solid #DAB100;
min-height:30px;
color:red;
}
.failure{/*styles the failure messages*/
background-color:#E84F4F;
padding:5px 5px 5px 50px;
clear:both;
color:#fff;
margin-bottom:10px;
background-image:url(../images/gfx/failure.gif);
background-repeat:no-repeat;
background-position:5px 5px;
border:3px solid #BF1212;
min-height:30px;
}
.success{ /*styles the success messages*/
background-color:#B5FFAD;
padding:5px 5px 5px 50px;
clear:both;
color:#000;
margin-bottom:10px;
background-image:url(../images/gfx/success.gif);
background-repeat:no-repeat;
background-position:5px 5px;
border:3px solid #53AA4A;
min-height:30px;
}
* html .warning, * html .failure, * html .success{
height:30px;
}
/***************************
SUBSCRIBE BOX
****************************/
.subscribe{
height:30px;
margin:0;
padding:0;
}
.subscribe fieldset{
background:url(../images/gfx/topbar_left.gif) no-repeat bottom left;
margin:0;
padding:0;
}
.subscribe ol{
float:right;
background:url(../images/gfx/topbar_right.gif) no-repeat bottom right;
margin:0;
padding:0;
}
.subscribe li{
text-align:right;
margin:0;
padding:0 7px 0 0;
}
.subscribe label{
text-align:right;
line-height:2em;
padding-right:3px;
float:left;
width:auto;
}
.button{
color:#fff;
text-transform:uppercase;
background-color:#3B6F49;
font-weight:bold;
padding:0 2px;
font-size:1em;
line-height:1em;
font-family:arial, helvetica, sans-serif;
height:18px;
border:1px outset #fff;
}