Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to use display block?

    i like to know how you use display block to position buttons/hovers like twitter ect anywhere on the page. im trying to make a single page layout like the link below.

    http://www.soundclick.com/bands/defa...?bandID=543285



    these are the codes used for the buttons:

    #twit {
    opacity:0;
    display:block;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -78px;
    width: 76px;
    height: 56px;
    margin-top: 5px;
    z-index:5;
    background: url(http://fallondesign.co.uk/wp-content...3/03/tww.png);
    -webkit-transition: .5s all ease-in-out;-moz-transition: .5s all ease-in-out;
    }
    #twit:hover {opacity:1;}

    #email {
    opacity:0;
    display:block;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -164px;
    width: 82px;
    height: 57px;
    margin-top: 5px;
    z-index:5;
    background: url(http://fallondesign.co.uk/wp-content...3/03/em1.png);
    -webkit-transition: .5s all ease-in-out;-moz-transition: .5s all ease-in-out;
    }
    #email:hover {opacity:1;}


    #facebook {
    opacity:0;
    display:block;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: 19px;
    width: 48px;
    height: 56px;
    margin-top: 5px;
    z-index:5;
    background: url(http://fallondesign.co.uk/wp-content...3/03/fbb.png);
    -webkit-transition: .5s all ease-in-out;-moz-transition: .5s all ease-in-out;
    }
    #facebook:hover {opacity:1;}


    #yt {
    opacity:0;
    display:block;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: 96px;
    width: 67px;
    height: 60px;
    margin-top: 5px;
    z-index:5;
    background: url(http://fallondesign.co.uk/wp-content...3/03/ytt.png);
    -webkit-transition: .5s all ease-in-out;-moz-transition: .5s all ease-in-out;
    }
    #yt:hover {opacity:1;}

  • #2
    New Coder
    Join Date
    Jun 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to use display block?

    Hi,

    A block element is an element that takes up the full width available, and has a line break before and after it.
    Some elements are block-level, meaning that their default display value is set to block.
    Other elements have their display value set to inline by default.

    Block are display like this:
    <h1>
    <p>
    <div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •