Creating a footer

Discussion in 'Web Design' started by similis, Jul 9, 2016.

to remove all ads.
  1. similis

    similis New Member

    Messages:
    3
    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 :)
     

    Attached Files:

  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    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.
     
  3. similis

    similis New Member

    Messages:
    3
    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:
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    And the rest of it is??
     
  5. similis

    similis New Member

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

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    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.
    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)
    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
    and put it AFTER the footer element
     

Share This Page