Soldato
- Joined
- 7 Jan 2007
- Posts
- 10,607
- Location
- Sussex, UK
I'm having problems with this text box design I made. If I set a fixed height for the box the bords and shadows do not move to the new position. Any ideas? Or does someone have an esier way of doing this?
PHP:
<!-- HTML for securitybox-->
<div class="securitybox">
<div class="securityboxtop">
<h3>For Your Peace of Mind</h3>
</div> <!-- This closes the div which relates to styling the title text and the background of the title -->
<p>Your Text Goes Here</p>
<div class="securityboxbottom"></div> <!-- end bottom -->
</div>
PHP:
<!--CSS file for Security box-->
.securitybox {
height:250px;
width:300px;
margin-bottom:10px;
margin-right:10px;
margin-left: 10px;
margin-top: 10px;
-moz-box-shadow: 3px 3px 10px #E6E6E6;
-webkit-box-shadow: 3px 3px 10px #E6E6E6;
box-shadow: 3px 3px 10px #E6E6E6;
position: absolute;
right: 0px;
}
.securitybox p {
border-left:1px solid #B000EB;
border-right:1px solid #B000EB;
padding:2px 3px;
margin:0;
}
.securityboxtop {
width:298px;
height:20px;
border: 1px solid #B000EB;
background:#D966FF;
background: -moz-linear-gradient(top, #006633, #00994F);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#006633), to(#00994F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#006633', endColorstr='#00994F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#006633', endColorstr='#00994F')"; /* IE8 */
/* -webkit for Safari and Google Chrome */
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
/* -moz for Firefox, Flock and SeaMonkey */
-moz-border-radius-topright:4px;
-moz-border-radius-topleft:4px;
/*For Opera and firefox4*/
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.securityboxtop h3 {
margin:0;
line-height:20px;
padding:0px 10px;
font-size:12px;
color: #FFFFFF;
text-align:center;
text-shadow: 0 1px 1px #000000;
}
.securityboxbottom {
width:298px;
height:10px;
border-bottom: 1px solid #B000EB;
border-left:1px solid #B000EB;
border-right:1px solid #B000EB;
/* -webkit for Safari and Google Chrome */
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
/* -moz for Firefox, Flock and SeaMonkey */
-moz-border-radius-bottomright:4px;
-moz-border-radius-bottomleft:4px;
/*For Opera and firefox4*/
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-box-shadow: 3px 3px 10px #E6E6E6;
-webkit-box-shadow: 3px 3px 10px #E6E6E6;
box-shadow: 3px 3px 10px #E6E6E6;
}