Skip to main content
E
eoinb17347847
Participant
December 2, 2016
Answered

h1 and h2

  • December 2, 2016
  • 2 replies
  • 521 views

Hi folks, Im doing a final project for a beginner's course in HTML5 and CSS3, it involves creating a 5 page website. I've done this but part of the assessment is the "proper use of tags", i.e. h1 and h2, my layout works fine without them but I would like to include them. I have a header element with a h1 element floating left and a small image (logo) floating right within the header. Under that I have a h2 (subheading) all of the layout works but the h2 element refuses to close a gap between the 2. I have cleared both floats in the h2. I've opened a page with just these in it to try to understand what I'm doing wrong, but I can't see it, any advice on this would be appreciated ,

thanks

Eoin Byrne

here's the relevant HTML

<body>

<header class="header">

  <h1 class="h1">AETHERSOUP</h1>

  <img src="images/aethersoup-can.png" alt="Aethersoup Logo." width="60" height="123" id="logo" title="Aethersoup Logo."/>

</header>

  <h2 class="h2">Web Design</h2>

</body>

and here's the CSS

.header {

  width: 956px;

  margin-left: auto;

  margin-right: auto;

  border-width: 2px;

  border-style: solid;

  border-color: #FFFFFF #FFFFFF #000000 #000000;

  height: 150px;

  background-color: #EAE6EB;

}

#logo {

  float: right;

  margin-right: 25px;

  margin-top: 5px;

}

.h1 {

  float: left;

  color: #000000;

  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

  font-size: 88pt;

  margin-left: 20px;

  margin-top: 5px;

  font-weight: 200;

  text-shadow: 0px 3px 4px #433A3A;

  letter-spacing: 15px;

  height: auto;

}

.h2 {

  color: #000000;

  width: 956px;

  background-color: #EAE6EB;

  border-width: 2px;

  border-style: solid;

  border-color: #FFFFFF #FFFFFF #000000 #000000;

  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

  font-size: 35pt;

  font-weight: 100;

  text-align: center;

  letter-spacing: 15px;

  text-shadow: 0px 3px 4px #433A3A;

  margin-right: auto;

  margin-left: auto;

  padding-bottom: 20px;

  height: 40px;

  margin-top: 5px;

  clear: both

}

This topic has been closed for replies.
Correct answer osgood_

This could be the result of default margin and padding on your <h> tags or you may need to set to header image to display: block;

I would first initially zero out all the margin and padding on you <h> tags.

Instead of spliting everything like you have below:

margin-right: auto;

margin-left: auto;

margin-top: 5px;

Intially set all the margins and padding on your <h> tags to zero and see if the space goes away:

margin: 0 0 0 0; /*top, right, bottom, left/ *

padding: 0 0 0 0; *top, right, bottom, left/ *

if it doesnt the next thing to try is setting the image to display: block;

header img {

display: block;

}

Having said all of the above and relooking at your css I see you have the height of the header set to height: 150px; and yet the image is only 123px high. It's best practice not to set heights on your html, left the container adjust to the height of its content, then if you want some space you can add some margin or padding to the container.

Try the below code: (you don't use pt for sizing text on the web you use px or em or %)

<!DOCTYPE html>

<html>

<head>

<meta ="charset=UTF-8" />

<title>Untitled Document</title>

<style>

body {

margin: 0;

}

.header {

width: 956px;

margin: 0 auto;

border-width: 2px;

border-style: solid;

border-color: #FFFFFF #FFFFFF #000000 #000000;

background-color: #EAE6EB;

overflow: hidden;

}

.h1 {

float: left;

color: #000000;

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

font-size: 40px;

margin: 5px 0 0 25px;

font-weight: 200;

text-shadow: 0px 3px 4px #433A3A;

letter-spacing: 15px;

}

#logo {

float: right;

margin: 5px 25px 0 0;

}

.h2 {

color: #000000;

width: 956px;

background-color: #EAE6EB;

border-width: 2px;

border-style: solid;

border-color: #FFFFFF #FFFFFF #000000 #000000;

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

font-size: 35px;

font-weight: 100;

text-align: center;

letter-spacing: 15px;

text-shadow: 0px 3px 4px #433A3A;

margin: 0 auto;

padding-bottom: 20px;

clear: both;

}

</style>

</head>

<body>

<header class="header">

<h1 class="h1">AETHERSOUP</h1>

<img src="images/aethersoup-can.png" alt="Aethersoup Logo." width="60" height="123" id="logo" title="Aethersoup Logo."/>

</header>

<h2 class="h2">Web Design</h2>

</body>

</html>

2 replies

E
eoinb17347847Author
Participant
December 2, 2016

Thanks Osgood, that appears to have worked, although I don't fully understand why. I copied your css and although it got rid of the space, it also got rid of some of the styling, but I can do that again, and now I can control it,

all the best,

Eoin Byrne

O
osgood_Correct answer
Legend
December 2, 2016

This could be the result of default margin and padding on your <h> tags or you may need to set to header image to display: block;

I would first initially zero out all the margin and padding on you <h> tags.

Instead of spliting everything like you have below:

margin-right: auto;

margin-left: auto;

margin-top: 5px;

Intially set all the margins and padding on your <h> tags to zero and see if the space goes away:

margin: 0 0 0 0; /*top, right, bottom, left/ *

padding: 0 0 0 0; *top, right, bottom, left/ *

if it doesnt the next thing to try is setting the image to display: block;

header img {

display: block;

}

Having said all of the above and relooking at your css I see you have the height of the header set to height: 150px; and yet the image is only 123px high. It's best practice not to set heights on your html, left the container adjust to the height of its content, then if you want some space you can add some margin or padding to the container.

Try the below code: (you don't use pt for sizing text on the web you use px or em or %)

<!DOCTYPE html>

<html>

<head>

<meta ="charset=UTF-8" />

<title>Untitled Document</title>

<style>

body {

margin: 0;

}

.header {

width: 956px;

margin: 0 auto;

border-width: 2px;

border-style: solid;

border-color: #FFFFFF #FFFFFF #000000 #000000;

background-color: #EAE6EB;

overflow: hidden;

}

.h1 {

float: left;

color: #000000;

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

font-size: 40px;

margin: 5px 0 0 25px;

font-weight: 200;

text-shadow: 0px 3px 4px #433A3A;

letter-spacing: 15px;

}

#logo {

float: right;

margin: 5px 25px 0 0;

}

.h2 {

color: #000000;

width: 956px;

background-color: #EAE6EB;

border-width: 2px;

border-style: solid;

border-color: #FFFFFF #FFFFFF #000000 #000000;

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

font-size: 35px;

font-weight: 100;

text-align: center;

letter-spacing: 15px;

text-shadow: 0px 3px 4px #433A3A;

margin: 0 auto;

padding-bottom: 20px;

clear: both;

}

</style>

</head>

<body>

<header class="header">

<h1 class="h1">AETHERSOUP</h1>

<img src="images/aethersoup-can.png" alt="Aethersoup Logo." width="60" height="123" id="logo" title="Aethersoup Logo."/>

</header>

<h2 class="h2">Web Design</h2>

</body>

</html>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices