h1 and h2

Report · Dec 02, 2016

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>

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

</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

}

Report · Dec 02, 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>

<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>

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

</header>

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

</body>

</html>

Report · Dec 02, 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

h1 and h2

1 Correct answer