I’m trying to create a footer for a page with 3 bits of text.

It should look like this (this is a ‘mock-up’ done in a table in MS Word):

 

(as well as the links I've also attached screenshots)

 

 

I’ve tried it with 3 sub-divs inside the footer & using ids & it comes out like this.
Here's the code for this:

<div id="footer">
  <div id="name">
    <p>Jeff Xxxxxxx, 2015</p>
  </div>
  <div id="top">
    <p>Top</p>
  </div>
  <div id="contact">
    <p>Contact</p>
  </div>
</div>

and

#footer
{
width: 954px;
float: left;
margin: 0px;
background-color: #07076E;
height: 46px;
padding: 3px;
}

#name {
float: left;
font-family: Comic Sans MS, cursive, sans-serif;
font-size: 12pt;
text-align: left;
color: #FFC931;
}

#top {
float: center;
font-family: Comic Sans MS, cursive, sans-serif;
font-size: 12pt;
text-align: center;
color: #FFC931;
}

#contact {
float: right;
font-family: Comic Sans MS, cursive, sans-serif;
font-size: 12pt;
text-align: right;
color: #FFC931;
}

I’ve tried it with classes & a table within the footer div (reluctantly, as i think tables are only meant to be used for numerical data). It comes out like this

 

Here's the code for this one:

<div id="footer">
   <table>
	<tr>
	   <td width="33%">
	      <p class="name">Jeff Kessler, 2015</p>
	   </td>
	   <td width="33%">
	      <p class="top">Top</p>
	   </td>
	   <td width="33%">
	      <p class="contact">Contact</p>
	   </td>
	</tr>
  </table>
</div>

and

#footer
{
width: 954px;
float: left;
margin: 0px;
background-color: #07076E;
height: 46px;
padding: 3px;
}

.name {
float: left;
font-family: Comic Sans MS, cursive, sans-serif;
font-size: 12pt;
color: #FFC931;
text-align: left;
}

.top {
float: center;
font-family: Comic Sans MS, cursive, sans-serif;
font-size: 12pt;
color: #FFC931;
text-align: center;
}

.contact {
float: right;
font-family: Comic Sans MS, cursive, sans-serif;
font-size: 12pt;
color: #FFC931;
text-align: right
}

I’m confused & going round in circles & getting dizzy!!!

.....can anyone see where I’m going wrong?

 

TIA

Try this: http://jsfiddle.net/LyndseyB/4mfz3xkq/

 

One of the other guys may have a better solution, but the above works

Forget using ID's, and try and make everything as re-usable as possible. In my example, you've got a class for the footer component and few utility classes that can be used to position the text, so you don't have to add unnecessary alignment to each element. This means you could create an additional row underneath without the text alignment if you wanted, using the same mark-up, just without those alignment classes.

 

http://jsfiddle.net/ajn075m0/

 

And an example of the re-using elements (using Beyonce lyrics this time) http://jsfiddle.net/ajn075m0/1/

Edited May 29, 201511 yr by Jack

that should be (with quotes because it's longer than one word). well really unless you making a comic it just shouldn't be comic sans, full-stop!

"Comic Sans MS"

 

and Lyndesy don't let Robert catch you using ids! not even on a friday
i would suggest a class of float-left and float-right and apply those to the divs like - (then you can reuse those classes elsewhere without having to write rules again)

 

<div class="float-right>

 

otherwise it looks pretty solid.

 

but i'm not an authority

 

edit: don't you hate it when someone sneaks their post in before yours (yes jack, it's you i'm looking for. er, at )

Edited May 29, 201511 yr by dap

that should be (with quotes because it's longer than one word). well really unless you making a comic it just shouldn't be comic sans, full-stop!

"Comic Sans MS"

 

and Lyndesy don't let Robert catch you using ids! not even on a friday

i would suggest a class of float-left and float-right and apply those to the divs like - (then you can reuse those classes elsewhere without having to write rules again)

 

<div class="float-right>

 

otherwise it looks pretty solid.

 

but i'm not an authority

 

edit: don't you hate it when someone sneaks their post in before yours (yes jack, it's you i'm looking for. er, at )

 

I was just copying his original CSS, didn't bother changing it, but I agree with you all that classes are more applicable!

I highly recommend looking into responsive grids. It would solve the above and, well, is responsive! Take a look at Skeleton.

windows7
firefox
notepad++

thanks for your help everyone.

@ Jack: I tried your code &, with some tweaking, I got the layout I want!

I'm not sure I understand it well though - I’m guessing that .mainfooter is a container for .mainfooter-col & that .mainfooter-col is creating 3 columns .u-alignLeft etc...?

 

 

My profile blurb mentioned that I'm pretty new to web design, especially CSS, & learning partly through an evening class. The issue I posted on is the beginnings of my portfolio page - I've got another couple of issues in this, so I'm asking them in this thread in the hope that someone can help (seems easier than starting new threads!):

• In my css I’ve got background-color: #F2F2F2; in .mainContent - if i remove that the whole div is the same dark blue background colour as the footer (#07076E). This is a problem because I want to have a very faint background image that's filling the whole browser window

edit: I'VE FIGURED THIS ONE OUT

 

• following @@Jack's code approach I've changed everything to classes in my CSS but if I change <div class="whatever"> to <whatever class="whatever"> (to be like his <footer class="MainFooter">) some of it seems ok but some not.

1. notepad++ doesn't seem to like <mainContent class="mainContent">, though it doesn't seem to affect how the page displays
2. when I change <div class="outerbox">, then the layout goes haywire

 

• I can't seem to set the vertical alignment of the text in the footer - it just doesn't respond to vertical-align:central; wherever i put it

........any ideas, anyone? Thanks in advance!
(All my code is below)

 

p.s. @dap: why is comic sans ms only for comics? are there sound reasons or is that a personal opinion?

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/portfolio.css" type="text/css">
<title>Level 3 Portfolio, Jeff Kessler</title>
</head>
<body>
<div class="outerbox">

	<header class="header">
		<img src="images/banner.jpg" alt="Digital Creativity for Web Designers banner" title="Digital Creativity for Web Designers banner">
	</header>
		
	<mainContent class="mainContent">
		<p>This is the main div, for varying content</p>
    </mainContent>
    			
	<footer class="MainFooter">
		<div class="MainFooter-col u-alignLeft">Jeff Kessler, 2015</div>
		<div class="MainFooter-col u-alignCenter">Top</div>
		<div class="MainFooter-col u-alignRight">Contact Us</div>
	</footer>
</div>

</body>
</html>

and

body
{
	text-align: center;
	color: #FBC028;
	font-style: italic;
	font-family: "Comic Sans MS", cursive, sans-serif;
	background-image: url("../images/code.jpg");
}

.outerbox
{
width: 960px;
margin: 0 auto;
min-height: 750px;
text-align: left;
}

.header
{
width: 960px;
float: left;
margin: 0px;
height: 200px;
text-align: center;
}
/*
.navigation
{
width: 960px;
margin: 0px;
(background-color: #F2F2F2;)
height: 50px;
text-align: center;
}*/

.mainContent
{
width: 954px;
float: right;
margin: 0px;
background-color: #F2F2F2;
min-height: 594px;
padding: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15pt;
color: #08076D;
}


.MainFooter {
    width: 100%;
    background: #07076E;
	font-size: 16pt;
}

.MainFooter-col {
	display: inline-block;
    width: 33.3%;
    margin-right: -0.5em;
    color: #E5B81B;
    height: 40px;
}

.u-alignLeft {
    text-align: left;
}

.u-alignCenter {
    text-align: center;
}

.u-alignRight {
    text-align: right;
}

Edited May 30, 201511 yr by Jeffsk

re: comic sans - not so much a personal opinion just from basic design pricinciples of matching a font to your brand. of course i don't know what your brand is, so it could be spot on

 

see http://comicsanscriminal.com/

 

p.s. there are a lot of good alternatives on e.g. http://www.fontsquirrel.com/

or https://www.google.com/fonts/

Edited May 31, 201511 yr by dap

<mainContent> isn't a recognised element, which is why notepadd++ doesn't like it

replace it with div

 

see this codepen http://codepen.io/dp/pen/bdgMmM?editors=110

 

 

and Lyndesy don't let Robert catch you using ids! not even on a friday

i would suggest a class of float-left and float-right and apply those to the divs like - (then you can reuse those classes elsewhere without having to write rules again)

 

 

 

Lucky for Lyndsey I was on holiday last week! Helper utility classes like float-,left float-right are great I use them quite often to save having to create a new class for something that only requires 1 or two properties

see http://comicsanscriminal.com/

 

I see your point...really not appropriate for ambulances etc. As it's only for the bits of text on the banner, overlaying a graphic, & in the footer & everything else is Arial, Helvetica, sans-serif (I always try to stay away from serif fonts) i'll probably keep it. but i'll bear it in mind in future projects

 

 

<mainContent> isn't a recognised element, which is why notepadd++ doesn't like it

 

replace it with div

 

Thanks for clarifying that. It looks like "outerbox" isn't a recognised element either...? So why not use div for all the classes i.e. header & footer, so that everything's consistent? I'm a bit confused by the mixing of ways of coding this

 

 

don't let Robert catch you using ids!

 

I thought ids were a standard part of CSS, so what's the big deal with them?

 

 

Once again, thanks for the help guys

I thought ids were a standard part of CSS, so what's the big deal with them?

 

A number of things:

• Specificity in CSS selector specificity dictates which properties win out when there is a conflict. ID's have super high specificity that cannot be overridden by classes, the only way is to use other IDs or !important.
• Reuseability Modern CSS architecture dictates that things should be made up of small reusable components and design patterns, because an ID can only be used once that means it cannot be reused. A class can be reused many times.

There are absolutely no reasons to use ID's in your CSS, you have nothing to gain from it. ID's are useful as JavaScript hooks, but only if you know there won't be multiple targets, then a class prefixed with '.js-' should instead be used.

Edited May 31, 201511 yr by rbrtsmith

I see your point...really not appropriate for ambulances etc. As it's only for the bits of text on the banner, overlaying a graphic, & in the footer & everything else is Arial, Helvetica, sans-serif (I always try to stay away from serif fonts) i'll probably keep it. but i'll bear it in mind in future projects

 

 

Thanks for clarifying that. It looks like "outerbox" isn't a recognised element either...? So why not use div for all the classes i.e. header & footer, so that everything's consistent? I'm a bit confused by the mixing of ways of coding this

 

 

I thought ids were a standard part of CSS, so what's the big deal with them?

 

 

Once again, thanks for the help guys

 

I'm not sure where the <MainContent class=""> example came from, it wasn't in the code I posted.

 

You can't create custom elements like that, the <footer> example is part of the HTML5 spec. I just used it because that's what I'm used to, but you can easier use a <div> in place of that. If it's more comfortable at this stage, just stick to using divs.

 

In terms of swapping out ID's for classes, the only changes you need to make is converting # to . in your stylesheet, and updating id="" to class="" in the HTML. It won't break anything if done correctly.

You can create custom elements with web-components (At least in the very newest browsers) but that's a whole different topic. Generally speaking though no you can't. Just thought I'd point it out as it's something that I think is going to transform the way we markup our HTML in the future.