CODEWITHSUNDEEP
htmlcss
Steven Stuu
Steven Stuu

Reputation: 63

How do i remove the white spacing?

I am creating a feedback form and I want to have shadows effect on it. I am trying to remove the white space so that my "top" image can look more like a shadow instead of hovering above the form. I have tried display block 0 and it still doesnt work??

.container {
  background: #fff;
  border: 1px solid #ccc;
  margin: auto;
  text-align: left;
  width: 700px;
}
.alignCenter {
  margin: 1em;
}
h1 {
  background-color: #dedede;
  margin: 0;
  min-height: 0;
  padding: 0;
  text-decoration: none;
  text-indent: -8000px;
}
.form_margin {
  margin-bottom: 1.5em;
  margin-top: 3px;
}
body {
  background: #ffffff;
  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size: small;
  margin: 8px 0 16px;
  text-align: center;
}
.heading {
  font-family: Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
  font-size: small;
}
.message-up {
  vertical-align: top !important;
}
.form_description {
  border-bottom: 1px dotted #ccc;
  clear: both;
  margin-bottom: 1em;
}
.headerImage {
  display: block;
  margin: 10px auto 0;
}
<!DOCTYPE html>
<html>

<head lang="en">
  <link rel="stylesheet" type="text/css" href="css.css">
  <meta charset="UTF-8">
  <title>Welcome to The Mystery Man Website</title>
</head>

<body>
  <div class="headerImage">
    <img src="Images/top.png" alt="top" width="710 ">
  </div>
  <div class="container">
    <h1>grey bar</h1>
    <div class="alignCenter">
      <form action="" method="post">
        <div class="form_description">
          <h2>User Feedback Form</h2>
          <p>Your suggestions are very appreciated</p>
        </div>
        <!-- Name -->
        <strong><label for="username">Name</label></strong>
        <div class="form_margin">
          <input type="text" name="username" size="30" id="username" placeholder="Your Full Name" />
        </div>
        <!--Email-->
        <strong> <label for="email">Email</label> </strong>
        <div class="form_margin">
          <input type="email" name="email" size="30" id="email" placeholder=" Your Email" />
        </div>
        <!--Feedback-->
        <strong> <label for="feedback">Feedback</label> </strong>
        <div class="form_margin">
          <textarea rows="10" cols="93" name="feedback" id="feedback" placeholder="Your Comments.."></textarea>
        </div>
      </form>

    </div>
  </div>



</body>

</html>

Upvotes: 3

Views: 87

Answers (3)

Lakhan
Lakhan

Reputation: 13286

Just try this : Need to change in this class : Before change :

.headerImage {
  display: block;
  margin: 10px auto 0;
}

After change :

.headerImage {
  display: block;
  margin: 10px auto 0;
  position:absolute;
  width: 100%;
}

or check it here : JSFIDDLE NEW

Upvotes: 0

symlink
symlink

Reputation: 12208

Your image isn't coming through so it's hard to say exactly what you are looking for, but there are two elements with margins in them that are creating extra white space above where the image should be:

body {
   margin: 0 0 16px;
}
.headerImage{
   0 auto;
}

Taking the top margin off of these as shown above will remove the space.

jsFiddle

Edit: I've added a position of absolute and top of 21px to the headerImage class. Is that the effect you are going for?

new jsFiddle

Upvotes: 0

Capagris
Capagris

Reputation: 3841

It's kind of hard to guess what exact style you want since there is no actual image on your code sample. However, you currently have no spacing set with the current css. The bottom margin value is 0 and there is no bottom padding defined. Unless your image itself has some sort of spacing or whitespace within itself, there is no whitespace between the image and the header of your form.

  1. Do you want to have the image cast a shadow directly over the header of your form?
  2. Do you want the image to cast a shadow just right above the form?
  3. Can you please link us to the image or provide a sample to further clarify your issue and help request?

EDIT: Yuor issue is that your image has a natural height of 10px and a natural width of 770px. You have an attribute of width=710 inside your <img> element which is also affecting the height. Currently, none of your rules are giving it a height value. That's why changing your margin isn't doing anything. When you have a display:block element, you want to set both width and height.

Having said that, all you need to do is give your <div class="headerImage" element a height of 7 to 10px (depending on the effect you're aiming for) and a margin-bottom value (you currently have it to 0) of anything between 5px to -5px (again, depending on the effect you're going for). I tried a wide range of values but, since I don't know what look you're after, I can't give you the exact value.

In summary, the css for imageHeader should look something like this:

.headerImage {
  display: block;
  margin: 10px auto 0;
  height:10px;

}

Note: for extra control, since the image (770px) is wider than your content, you could limit it by giving .headerImage the following extra rules:

overflow:hidden;
width:710px;

(as a mere example)

Regards Sotkra

Upvotes: 1

Related Questions