Creating a footer

similis

New Member
Hello there,

I'm new here :)

I created a footer design and I'd like to create it in HTML/CSS. I'm familiar to HTML/CSS but still having difficulty created a footer like the one I created. I've attached a picture for you to take a look at, and will be grateful if you could assist me with the work. Many thanks :)
 

Attachments

  • The-Footer-Design.png
    The-Footer-Design.png
    64.1 KB · Views: 2

chrishirst

Well-Known Member
Staff member
Assuming the 'footer' is the bit below the grey line;

one full width div element with top border set to a colour code of #C0 or #80, height 150px [at a guess]

two child divs, width 45%, overflow: auto (to break the float plane)
first one (in document flow) float right , height 50% with the subscribe form in it and using top-margin to push the form down
next one (in document flow) float left, 100% height with the image
close parent

div width 100%, height 2ex, overflow: auto (to break the float plane)
span float right for user agreement
span float: left for copyright
close parent


Not tested or coded, just visualising the code in my head.
 

similis

New Member
Hey Chris :)

Thanks for getting back.

Here is what I've done so far:

HTML:

Code:
</div>
   
    <div id="footer">

CSS:

Code:
#footer{
clear: left;
width: 100%;
height: 300px;
background: Black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

It works fine, except that I need to add content to it.... :rolleyes:
 

chrishirst

Well-Known Member
Staff member
Code:
</div>
  
    <div id="footer">

CSS:

Code:
#footer{
clear: left;
width: 100%;
height: 300px;
background: Black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

It works fine, except that I need to add content to it.... :rolleyes:
And the rest of it is??
 

similis

New Member
I know :confused: That's why I need help. I find the work rather complex. Will appreciate it if you can guide me how! :)
 

chrishirst

Well-Known Member
Staff member
Okay, I am not going to write the code for you as I don't need the practice, whereas you do.

but to elaborate, a 'parent element' is one that contains other elements, which are called child elements, the familial structure names follow the same nomenclature as in 'real life' families do.
one full width div element with top border set to a colour code of #C0 or #80, height 150px [at a guess]
... ...
close parent
This bit, you have done with your 'footer' element, the only difference is you have set the height to 300 pixels, if you do not know how to set the border colours, you need to learn MORE about CSS by reading and following tutorials

This bit you convert to CSS rules (just as you did with the above)
two child divs, width 45%, overflow: auto (to break the float plane)
first one (in document flow) float right , height 50% with the subscribe form in it and using top-margin to push the form down
next one (in document flow) float left, 100% height with the image
by changing the words into CSS rules, The (to break the float plane) is the equivalent of a "margin note" intended to explain WHY the overflow: auto is required.

---------------------------------- breakout---------------------------------------
For more:
read these
http://www.quirksmode.org/css/clearing.html
https://css-tricks.com/the-how-and-why-of-clearing-floats/
https://css-tricks.com/all-about-floats/

---------------------------------- /breakout -------------------------------------

and put the 'child' elements inside the footer element.

Then do the same conversion of words to CSS with this
div width 100%, height 2ex, overflow: auto (to break the float plane) [parent refers to this element.]
span float right for user agreement
span float: left for copyright
close parent
and put it AFTER the footer element
 
Top