CODEWITHSUNDEEP
htmlcss
An Entity
An Entity

Reputation: 25

A div in my HTML code is floating 72 pixels from the top of the screen

Right now I'm developing a website for an assignment, but whilst the primary (id 'main') div is on top, the div for my header is 72 pixels from the top of the screen. I've checked, and I can't find any padding or margin issues. Below is a copy of both the HTML and CSS I'm using.

I've tried making the top margin -72px, which works, but means that the rest of the divs require the same thing, making it a recurring issue.

Below is a copy of both the HTML and CSS I'm using.

<!DOCTYPE html>

<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="main">
  <div id="title">
    <p id="heading"> GC <br>
  Woodturning </p>
  </div>
</div>
</body>
</html> 




body {
    background-image: url('images/wood%20grain.jpg');
    margin: 0px;
}
#main {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    padding-top: 0px;
}
#title {
    width: 1024px;
    height: auto;
    background-image: url('images/heading.jpg');
    margin: 0px auto auto 0px;
    padding: 0px;
}
#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

Upvotes: 0

Views: 95

Answers (6)

DDan
DDan

Reputation: 8276

Add margin: auto to your #heading css description

See example: Fiddle here

#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
    font-weight: bold;
    color: #FFF;
    margin: auto;  /* <-- Added this */
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

Upvotes: 0

Wesley Coetzee
Wesley Coetzee

Reputation: 4838

This needs to be added to your #Heading CSS

margin: auto;

It should look like this

#heading {
margin: auto;
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;    
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;

}

JSFiddle

Upvotes: 0

Sanjay Bhardwaj
Sanjay Bhardwaj

Reputation: 412

please try this.... more info please click here

#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom: 10px;
    font-weight: bold;
    color: #FFF;
    margin: 0px;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

Upvotes: 0

Kapil
Kapil

Reputation: 1141

Please replace your #heading css rule try this

#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
margin-top:0;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;

}

	

Right now I'm developing a website for an assignment, but whilst the primary (id 'main') div is on top, the div for my header is 72 pixels from the top of the screen. I've checked, and I can't find any padding or margin issues. Below is a copy of both the HTML and CSS I'm using.

<!DOCTYPE html>

<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="main">
  <div id="title">
    <p id="heading"> GC <br>
  Woodturning </p>
  </div>
</div>
</body>
</html> 




body {
    background-image: url('images/wood%20grain.jpg');
    margin: 0px;
}
#main {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    padding-top: 0px;
}
#title {
    width: 1024px;
    height: auto;
    background-image: url('images/heading.jpg');
    margin: 0px auto auto 0px;
    padding: 0px;
}
#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
  margin-top:0;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="main">
  <div id="title">
    <p id="heading"> GC <br>
  Woodturning </p>
  </div>
</div>

Upvotes: 0

Nathan
Nathan

Reputation: 920

You need to add margin: 0; to your heading. This because the most browsers will automatically add this to a p element:

p {
    display: block;
    margin-before: 1em;
    margin-after: 1em;
    margin-start: 0px;
    margin-end: 0px;
}

So edit your CSS to:

#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
    margin: 0; /* This is new */
}

Upvotes: 1

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

Add margin: auto; in you #heading{} id.It should solve your problem.

body {
  background-image: url('images/wood%20grain.jpg');
  margin: 0px;
}
#main {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  padding-top: 0px;
}
#title {
  width: 1024px;
  height: auto;
  background-image: url('images/heading.jpg');
  margin: 0px auto auto 0px;
  padding: 0px;
}
#heading {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 72px;
  padding-left: 100px;
  padding-bottom: 10px;
  font-weight: bold;
  color: #FFF;
  margin: auto;
  /* <-- Please Add */
  text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
<div id="main">
  <div id="title">
    <p id="heading">GC
      <br>Woodturning</p>
  </div>
</div>

Upvotes: 0

Related Questions