How do i make something like this

Discussion in 'HTML & Website Design' started by unique1801, Feb 15, 2010.

  1. #1
    How do i make something like this

    at the bottom of the page....
    it is always sticked to the explorer even if scrolled

    [​IMG]
     
    unique1801, Feb 15, 2010 IP
  2. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It looks as though they may be loading the page in as an iFrame. Although without a link I can't be certain.
     
    LeetPCUser, Feb 15, 2010 IP
  3. kreativi

    kreativi Peon

    Messages:
    89
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    kreativi, Feb 15, 2010 IP
  4. thelethargarian

    thelethargarian Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just do a fixed position at the bottom, like this:

    CSS
    
    .bottomnavbar
    {
    position: fixed;
    bottom: 0;
    height: 32px;
    width: 100%;
    font size: 12px;
    background: #cccccc;
    }
    
    .bottomnavbar ul
    {
    margin: 6px;
    list-style-type: none;
    }
    
    .bottomnavbar ul li
    {
    display: inline;
    }
    
    .bottomnavbar ul li a
    {
    text-decoration: none;
    color: #000000;
    }
    
    .bottomnavbar ul li a:hover
    {
    text-decoration:underline;
    color:#000000;
    }
    
    Code (markup):
    HTML
    
    <html>
    <head>
    <title>
    </title>
    </head>
    <body>
    <div class="bottomnavbar">
    <ul>
    <li>
    <a href="http://www.example.com/">
    Link 1
    </a>
    </li>
    <li>
    <a href="http://www.example.com/">
    Link 2
    </a>
    </li>
    <li>
    <a href="http://www.example.com/">
    Link 3
    </a>
    </li>
    <li>
    <a href="http://www.example.com/">
    Link 4
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    
    Code (markup):
    Haven't tested this code, but it should be a good start. Mess around with the padding, margin, size, text size, hovers, etc.
     
    Last edited: Feb 15, 2010
    thelethargarian, Feb 15, 2010 IP
  5. noahqw

    noahqw Member

    Messages:
    180
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #5
    That's mostly likely a IFrame.
     
    noahqw, Feb 15, 2010 IP
  6. Pintoria

    Pintoria Guest

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    just create a div and in CSS add position: absolute; and arrange the div via the margin option
     
    Pintoria, Feb 16, 2010 IP
  7. northernweb

    northernweb Peon

    Messages:
    319
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    use position:fixed in CSS. this means it wont move when the page is scrolled.

    i'm not sure those bottom bars are very good though, you had best make sure it's appropriate to the site before you just stick one on there as they can be quite obtrusive.
     
    northernweb, Feb 16, 2010 IP