Textbox HTML/CSS woes

craptakular · 16 Oct 2010 at 20:57

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;
 }

Dj_Jestar · 16 Oct 2010 at 21:21

That's far, far to much CSS. Drop all of the -moz* stuff for a start, and start with the basics.

Also don't forget you can add a class or id attribute to any tag, you don't need to create superfluous containers just to apply style to an inner element.

craptakular · 16 Oct 2010 at 21:43

so what your saying is I can create an id for radius and box-shadow and add them to any thing I want?

Dj_Jestar · 16 Oct 2010 at 21:45

No, not at all.

I'm saying you should use class/id attribute on the elements you actually want to style.

craptakular · 16 Oct 2010 at 21:57

I'm not following I'm afraid. I'm really new to this. Can you elaborate?

Sorry to be a pain.

FabienO · 17 Oct 2010 at 01:34

that's a LOT of css...

rule of thumb, only use divs when you have to. Always try to avoid using them when you can.

Here's a basic start for you...

Code:

div.box {
  width: 300px;
  border: 1px solid purple;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

div.box h1 {
  font-size: 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(#006633), to(#00994F));  
  margin: 0px; 
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
}

div.box p { margin: 0; }

Code:

<div class="box">
  <h1>Box Title</h1>
  <p>Your text here</p>
</div>

It's good to use CSS3 stuff, but remember that compatibility wise it can be iffy across browsers. Don't go overboard trying to compensate for them all. The gradient on the h1 as long as it has a background default of green, that's good enough IMO. Anyone who wants to see the full beauty of CSS/HTML should update their browser.

craptakular · 17 Oct 2010 at 12:20

FabienO said:
snip

Thats excellent dude! I'm new to all this, I don't think I've used to many, other than this textbox, which I got from a google tutorial. With the CSS3 stuff I am going to take the view to get it to work with webkit, mozilla and the standard CSS3 sytax stuff. IE9 beta is better but doesnt support background gradients without activeX. As you say though stuff it, they can just see the default single colour.

I'm not going to worry to much about IE6/7, as long as the content is still readable people should upgrade.

FabienO · 17 Oct 2010 at 15:02

no problem. If you feel something is getting frustrating.. do it all again, a fresh start can be the best thing. I used to near complete a site sometimes then just hate the ugliness of the code and re do it. Remember to validate as you go.

Practice makes perfect. When you're more confident check out nettuts. Pretty awesome resource with varied levels of tutorials.