Background not showing in class & footer question

HTML & CSS
1

Okay, I am brand new to CSS and this forum, so please be patient with me :grinning:
I am learning CSS though lynda.com and am watching the tutorial, “CSS Page Layouts,” http://www.lynda.com/CSS-tutorials/Positioning-elements-Lab/86003/97829-4.html

I am working on an assignment coding my first page and I am stuck! I had to take a screenshot of a webpage, place it in Illustrator and overlay it with a grid layout. Then I am coding it in Aptana and viewing it in Firefox. This is the layout:

I started with some similar code we used for another project. I am using section & aside classes of .col1, .col2, .col3 to make the columns & margin/padding of the layout. In .col1 I wanted a column of 112 px w/ background color: rgb(126,208,224) w/ 48px padding/margin to left to place photo and 2 lines of text. In .col2 I wanted a text column of 464px w/ 48px padding/margin to left & right. In .col3 I wanted a text column of 240px w/ 48px padding/margin to right.

  1. Why is .col1 to the far right w/ no background color, .col2 to far left, & .col3 in middle?

  2. I wanted to get rid of the footer, if I do the body of background: #fff; goes away. How can I remedy this?

    fixed layout aside, article, section, header, footer, nav { display: block; } div, section, article, h1, h2, h3, p { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; } html { background: rgb(206, 193, 167); } body { background: #fff; font: 100% 'Open Sans', Arial, Helvetica, sans-serif; width: 960px; height: 100%; margin: 0 auto 2em; } /*layout*/ header { background:rgb(0,114,143); margin-bottom: 16px; height: 48px; padding: 36px 0 0 36px; }

    .col1 {
    float: left;
    padding-left: 48px;
    width: 112px;
    background:rgb(126,208,224);

    }
    .col2 {
    float: left;
    padding-right: 48px;
    padding-left: 48px;
    width: 464px;
    }
    .col3 {
    float: left;
    padding-right: 48px;
    width: 112px;
    font-size: 140%;
    line-height: 1.6;
    }
    footer {
    height: 80px;
    clear: both;
    background-color: rgb(100,98,102);
    }
    /typography/

    p {
    font-weight: 300;
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 1em;
    }

    My father was a St. Bernard, my mother was a collie, but I am a Presbyterian. This is what my mother told me, I do not know these nice distinctions myself. To me they are only fine large words meaning nothing.

    My mother had a fondness for such; she liked to say them, and see other dogs look surprised and envious, as wondering how she got so much education. But, indeed, it was not real education; it was only show: she got the words by listening in the dining-room and drawing-room when there was company, and by going with the children to Sunday-school and listening there; and whenever she heard a large word she said it over to herself many times, and so was able to keep it until there was a dogmatic gathering in the neighborhood, then she would get it off, and surprise and distress them all, from pocket-pup to mastiff, which rewarded her for all her trouble.

    If there was a stranger he was nearly sure to be suspicious, and when he got his breath again he would ask her what it meant. And she always told him. He was never expecting this but thought he would catch her; so when boshe told him, he was the one that looked ashamed, whereas he had thought it was going to be she.

    The others were always waiting for this, and glad of it and proud of her, for they knew what was going to happen, because they had had experience.

    With a view to action experience seems in no respect inferior to art, and men of experience succeed even better than those who have theory without experience. (The reason is that experience is knowledge of individuals, art of universals, and actions and productions are all concerned with the individual; for the physician does not cure man, except in an incidental way, but Callias or Socrates or some other called by some such individual name, who happens to be a man.

702×614 86.6 KB

Thank You!!!

2

.col1 is not to the right. It is not even showing because it is an empty div and has no height, it doesn’t take up any space in the document flow.

Put an image in the div and see what happens.

1 Like
3

Thank you for your help.
• I placed an image in section class .col1 I also tried to give .col1 a height of 100%
• I checked the path and it is correct
• I searched several resources on the web and tried various things, but was not successful

.col1 {
	float: left;
	padding-left: 48px;
	width: 112px;
	height: 100%;
	background:rgb(126,208,224);
<section class="col1">
	<img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">
</section>

4

Well col1 is now showing on the left where it should be. What you see is the alt text with the given background colour. You are missing the image. Double check the path to the image - /_images/ny_08.2.jpg

5

Hi. I have checked it and tried to use other photos. Here is what the path looks like:

6

juleshoward,

Comparing the screenshot of your folders to the paths written in your code…

The path in your code begins with a forward slash. That would indicate the root level of a hard drive or the root directory of a web site. The screenshot shows that a folder named “grid3” is the parent of the folder named “images” and there is no underscore in the beginning of the actual folder name. So, it looks to me like your written path does not match the actual path to the image. Delete the forward slash from the beginning of the written path and delete the underscore from the beginning of “_images” and see if that helps.

7

That won’t work because you don’t have an unbroken chain of height:100% going back to the parent. The height will collapse to zero if there is no real content and even if you do add an unbroken chain of heights back to html then the column will be 100% of the viewport height and thus too big because there is a header above it taking up some room.

You have centred the body and given it a height of 100% which again is flawed because the body can no longer grow and the white background will stop at the viewports bottom edge while the content will overflow below it.

If you want full height matching columns then you should use the display:table and display table-cell approach (instead of floats) which will automatically give columns the same height as each other.

Something like this for starters.

The display:table approach works back to and including ie8.

8

Wow! Your display:table and display table-cell approach has really fixed my page! Thank you. I can’t get the header (navigation bar) to be on top. I tried overflow property & clear: both.

<style>
			aside, article, section, header, footer, nav {
				display: block;
			}
			div, section, article, h1, h2, h3, p {
				margin: 0;
				padding: 0;
			}
			html, body {
				margin: 0;
				padding: 0;
			}
			html {
				background: rgb(206, 193, 167);
			}
			body {
				background: #fff;
				font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
				width: 960px;
				margin: 0 auto 2em;
			}
			header {
				background: rgb(0,114,143);
				margin-bottom: 24px;
				height: 30px;
				padding: 36px 0 0 36px;
			}
			.columns {
  				display: table;
  				width: 100%;
  				height: 100%;
  				   }
			.col {
  				display: table-cell;
  				text-align: left;
  				vertical-align: top;
  				padding-top: 90px;
      			  }
			.col1 {
				padding-left: 48px;
				width: 112px;
				background: rgb(126,208,224);
			}
			.col2 {
				padding-right: 48px;
				padding-left: 48px;
				width: 464px;
			}
			.col3 {
				padding-right: 48px;
				width: 112px;
				font-size: 140%;
				}
			footer {
				height: 80px;
				clear: both;
				background-color: rgb(100,98,102);
			}
			img {
				float: left;
				margin: 0 1em 0 0;
			}
			p {
				font-weight: 300;
				font-size: 1em;
				line-height: 1.5;
				margin-bottom: 1em;
			}
	</style>
	</head>
	<body>
		<div class="columns">
			<header> </header>
			<div class="col col1">
				<img src="images/ny_08.2.jpg" width="112" height="112" alt="NY City">
			</div>
			<div class="col col2">
				<p>
					My father was a St. Bernard, my mother was a collie, but I am a Presbyterian. This is what my mother told me, I do not know these nice distinctions myself. To me they are only fine large words meaning nothing.
				<p>
				<p>
					My mother had a fondness for such; she liked to say them, and see other dogs look surprised and envious, as wondering how she got so much education. But, indeed, it was not real education; it was only show: she got the words by listening in the dining-room and drawing-room when there was company, and by going with the children to Sunday-school and listening there; and whenever she heard a large word she said it over to herself many times, and so was able to keep it until there was a dogmatic gathering in the neighborhood, then she would get it off, and surprise and distress them all, from pocket-pup to mastiff, which rewarded her for all her trouble.
				</p>
				<p>
					If there was a stranger he was nearly sure to be suspicious, and when he got his breath again he would ask her what it meant. And she always told him. He was never expecting this but thought he would catch her; so when boshe told him, he was the one that looked ashamed, whereas he had thought it was going to be she.
				</p>
				<p>
					The others were always waiting for this, and glad of it and proud of her, for they knew what was going to happen, because they had had experience.
				</p>
				<p>
					With a view to action experience seems in no respect inferior to art, and men of experience succeed even better than those who have theory without experience. (The reason is that experience is knowledge of individuals, art of universals, and actions and productions are all concerned with the individual; for the physician does not cure man, except in an incidental way, but Callias or Socrates or some other called by some such individual name, who happens to be a man.
				</p>
			</div>
			<div class="col col3">
				<p>
					But no harm was done; the others rolled and barked too, privately ashamed of themselves for not seeing the point, and never suspecting that the fault was not with them and there wasn't any to see.
				</p>
			</div>
			<footer> </footer>
		</div>
	</body>

9

Your suggestion worked! I have been working on this for a while, Thank you!!

1 Like
10

Hi,

If I understand what you are trying to do then you just need to move the header and footer outside of the columns div (as in my example).

Do you have a different requirement to the one I showed in the codepen?

I’m guessing that you may want a full viewport page to start with (e.g. a sticky footer page) but these days where monitors are so tall (and so small) the use of s sticky footer is not always practical. (e.g. on my 27" mac a sticky footer is miles away at the bottom of the screen which looks silly on pages with little content). It can be remedied by using media queries with a height to avoid this on large screens but often the simpler approach is the better approach :slight_smile:

I can knock up a demo if needed but it will add a little more complexity.

11

Great, I am almost finished with my assignment! Your suggestion worked and the nav and footer are on top. I wanted the nav to have the titles spaced evenly, without white lines in the middles. I tried many different types of code. This is what happened:


The previous is my latest version and here is the code:

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(0,114,143);
        display: table;
        height: 35px;
        width: 100%;
    }
    li {
        display: table-cell;
        height: 35px;
        width: 16.666666667%; 
        line-height: 87px;
        text-align: center;
        background: rgb(0,114,143);
        border-right: 1px solid #fff;
        white-space: nowrap;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover {
        background-color: #111;
    <ul>
      <li><a href = “http://www.google.com/”>Endeavour Capital</a></li>
      <li><a href = “/people">Our People</a></li>
      <li><a href = “/what we do">What We Do</a></li>
      <li><a href = “/News">News and Blog</a></li>
      <li><a href = “/contact">Contact</a></li>
    </ul>
12

If you didn’t want white lines then why did you add them as borders?

I think it looks neater with borders anyway and I would do it like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
aside, article, section, header, footer, nav {
	display: block;
}
div, section, article, h1, h2, h3, p {
	margin: 0;
	padding: 0;
}
html, body {
	margin: 0;
	padding: 0;
}
html {
	background: rgb(206, 193, 167);
}
body {
	background: #fff;
	font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
	max-width: 960px;
	margin: 0 auto 2em;
}
header {
	background: rgb(0,114,143);
	margin-bottom: 24px;
}
.menu {
	margin: 0;
	padding: 0;
	background-color: rgb(0,114,143);
	display: table;
	height: 35px;
	width: 100%;
}
.menu a {
	display: table-cell;
	vertical-align:middle;
	height: 35px;
	height:35px;
	line-height: 35px;
	text-align: center;
	background: rgb(0,114,143);
	border-right: 1px solid #fff;
	text-decoration: none;
	color:#fff;
}
.menu a:last-child {
	border-right:none
}
.menu a:hover {
	background-color: #111;
}
@media screen and (max-width:700px){
	.menu{display:block;height:auto;line-height:1.2;text-align:center;}
	.menu a{display:inline-block;padding:10px 15px;line-height:normal;height:auto;}
}

</style>
</head>
<body>
<header>
  <nav class="menu"> <a href="http://www.google.com/">Endeavour Capital</a> <a href="/people">Our People</a> <a href="/what we do">What We Do</a> <a href="/News">News and Blog</a> <a href="/contact">Contact</a> </nav>
</header>
</body>
</html>

If you don’t want the borders then just remove the border-right.

Or with flexbox.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
aside, article, section, header, footer, nav {
	display: block;
}
div, section, article, h1, h2, h3, p {
	margin: 0;
	padding: 0;
}
html, body {
	margin: 0;
	padding: 0;
}
html {
	background: rgb(206, 193, 167);
}
body {
	background: #fff;
	font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
	max-width: 960px;
	margin: 0 auto 2em;
}
header {
	background: rgb(0,114,143);
	margin-bottom: 24px;
}
.menu {
	margin: 0;
	padding: 0;
	background-color: rgb(0,114,143);
	display: table;
	display:flex;
	justify-content:space-around;
	height: 35px;
	width: 100%;
}
.menu a {
	display: table-cell;
	vertical-align:middle;
	height: 35px;
	height:35px;
	line-height: 35px;
	text-align: center;
	background: rgb(0,114,143);
	text-decoration: none;
	color:#fff;
}
.menu a:last-child {
	border-right:none
}
.menu a:hover {
	background-color: #111;
}
@media screen and (max-width:700px){
	.menu{display:block;height:auto;line-height:1.2;text-align:center;}
	.menu a{display:inline-block;padding:10px 15px;line-height:normal;height:auto;}
}

</style>
</head>
<body>
<header>
  <nav class="menu"> <a href="http://www.google.com/">Endeavour Capital</a> <a href="/people">Our People</a> <a href="/what we do">What We Do</a> <a href="/News">News and Blog</a> <a href="/contact">Contact</a> </nav>
</header>
</body>
</html>
13

Thank you for all of your help. It worked! I had the white lines (borders) on there because I had copied the code from an example on nav instructions. Since I am just learning, I had never heard of flexbox, I am reading about that. I am studying through lynda.com. Do you have any other suggestions of sites that give good instruction on HTML, CSS, Javascript, Wordpress, and Dreamweaver?

14

I would look at the articles in Sitepoint as there is always something of interest and on sites like CSS tricks. In the end its a matter of keep practising and keep asking the right questions.:slight_smile:

There is no one book or one site as CSS is so broad but just keep googling and seeing what you find. there are plenty of videos around on flexbox and its a hot topic at the moment so worth learning.

1 Like
15

Thanks for your suggestions and all of your help!

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.