Whats wrong with my html or CSS?

craptakular

craptakular

craptakular

Soldato
Joined
7 Jan 2007
Posts
10,607
Location
Sussex, UK
I have successfully made a cool textbox I would like to use on a website, yet when I add a second textbox underneath the first textbox. The shadow jumps textboxes and covers the margin.

What have I done wrong? I'm a bit of a newb at this. I'm also trying to move them to the right of the page but that goes wrong as well :mad:

Here is the code:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
<div class="right_textbox1"> 

  <div class="top"> 

   <h3>Your Title Goes Here</h3> 

 </div> <! end top --> 

   <p>Your Text Goes Here</p> 

 <div class="bottom"></div> <! end bottom --> 
<div class="right_textbox2"> 

  <div class="top"> 

   <h3>Your Title Goes Here</h3> 

 </div> <! end top --> 

   <p>Your Text Goes Here</p> 

 <div class="bottom"></div> <! end bottom --> 

</div> <!-- end holder div -->
</div>
</body>
</html>

StyleSheet:

Code: 
@charset "utf-8";
.right_textbox1 {

  height:auto;
  width:250px;
  margin-bottom:25px;
  -moz-box-shadow: 3px 3px 10px #E6E6E6; 
  -webkit-box-shadow: 3px 3px 10px #E6E6E6;
  box-shadow: 3px 3px 10px #E6E6E6;

 } 
 .right_textbox1 p {

  border-left:1px solid #333;
  border-right:1px solid #333;
  padding:10px 15px;
  margin:0;

 } 
 .right_textbox2 {

  height:auto;
  width:250px;
  margin-top: 25px;
  margin-bottom:25px;
  -moz-box-shadow: 3px 3px 10px #E6E6E6; 
  -webkit-box-shadow: 3px 3px 10px #E6E6E6;
  box-shadow: 3px 3px 10px #E6E6E6;
  
 } 
 .right_textbox2 p {

  border-left:1px solid #333;
  border-right:1px solid #333;
  padding:10px 15px;
  margin:0;

 } 
 .top {

  width:248px;
  height:20px;
  border: 1px solid #333;
  background:#006633;
  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;

 } 
 .top h3 {
	margin:0;
	line-height:20px;
	padding:0px 10px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color: #FFFFFF;
	text-align:center;
	text-shadow: 0 1px 1px #000000;
 }
 .bottom {

  width:248px;
  height:10px;
  border-bottom: 1px solid #333;
  border-left:1px solid #333;
  border-right:1px solid #333;
   /* -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;
   
 }
.container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
hhhmm ok, as you have properly noticed this is only my second attempted at complicated HTML and css :p

This maybe a stupid question but how would I create one CSS entry for all the classes that make up that textbox?

I assume instead of calling texbox 1 and textbox 2 I should just call a div called say "textboxes" but how would I position then with css if they are in the same class?
 
ah i see, ta guys.

I'll have a play.

How would I create one class for the entire properties of the textbox?

As at the moment I have used 3 classes to do that... Could someone post an example?
 
This seem complete obvious to you lot but I'm still confused hehe...

So what your all saying is I can merge my top, bottom and textbox1 class together?

But how would it know to add a background only to the top? and h3 tags to the title of the box?
 
You must log in or register to reply here.
Back
Top Bottom