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;
}
 
Both your textboxes are wrapped inside <div class="right_textbox1"> which has a border assigned to it, therefore a border is being applied over everything within that div - which is both your textboxes.

You just need to move the closing div for right_textbox1 above the div for right_textbox2.

To make it float to the right (assuming I understood how you wanted it) add a new entry to your CSS:
PHP: 
.right_textboxes {
float:right;
width:260px;
}

And then wrap all your textboxes within <div class="right_textboxes">..</div>, like this:

PHP: 
<!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_textboxes">
		<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>

		<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>
</div>
</body>
</html>


You might want to create a single class for 'textbox' which has all the common properties for every textbox (the borders, green top background, height etc), and then customise individual text boxes as needed by assigning them an id (e.g. right_textbox3) and then modifying them via CSS. It'll help cut your code down.

edit: also, <! end bottom --> isn't a valid HTML comment, you want to use <!-- end bottom -->
 
Last edited:
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?
 
Oxy said:
This maybe a stupid question but how would I create one CSS entry for all the classes that make up that textbox?
Click to expand...

The space allows mulitple classes. Or you could use id's as suggested before.
PHP: 
<div class="textbox right"></div>

.textbox {
textbox properties
}

.right {
float: right;
}

The official docs may look scary for selectors.. but they aren't. http://www.w3.org/TR/CSS2/selector.html
 
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