www.webdeveloper.com
Results 1 to 4 of 4

Thread: Responsive DIV table?

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    25

    Responsive DIV table?

    Hi,
    I would like to create a "special offers" page...

    I would like to have 5 boxes on the left, 5 on the right and 2 on the bottom (making 12 boxes) like a U shape, with one long rectangle in the middle. The 12 boxes around the outside will display the month, an image and a little bit of text, and the big on in the middle will be the current month, allowing me to enter a bigger image, date and more text.

    I am using wordpress and I would like it to be full width an auto hide, but the boxes being square (big enough to fill up the page)

    I would also like it responsive, although initially that isnt required.

    Can anyone help?

    Thanks

  2. #2
    Join Date
    Mar 2012
    Posts
    1,815
    I do not use a CMS, so I cannot help with implementing this in wordpress, but the underlying css is quite simple. if you use %:

    Code:
    #left1 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 80%;
    width: 25%;
    background-color: #FF0;
    }
    #left2 {
    position: absolute;
    top: 20%;
    left: 0;
    bottom: 60%;
    width: 25%;
    background-color: #F0F;
    }
    #left3 {
    position: absolute;
    top: 40%;
    left: 0;
    bottom: 40%;
    width: 25%;
    background-color: #FF0;
    }
    #left4 {
    position: absolute;
    top: 60%;
    left: 0;
    bottom: 20%;
    width: 25%;
    background-color: #F0F;
    }
    #left5 {
    position: absolute;
    top: 80%;
    left: 0;
    bottom: 0;
    width: 25%;
    background-color: #FF0;
    }
    #bottom1 {
    position: absolute;
    top: 80%;
    left: 25%;
    bottom: 0;
    width: 25%;
    background-color: #0F0;
    }
    #bottom2 {
    position: absolute;
    top: 80%;
    left: 50%;
    bottom: 0;
    width: 25%;
    background-color: #00F;
    }
    #right1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 80%;
    width: 25%;
    background-color: #FF0;
    }
    #right2 {
    position: absolute;
    top: 20%;
    right: 0;
    bottom: 60%;
    width: 25%;
    background-color: #F0F;
    }
    #right3 {
    position: absolute;
    top: 40%;
    right: 0;
    bottom: 40%;
    width: 25%;
    background-color: #FF0;
    }
    #right4 {
    position: absolute;
    top: 60%;
    right: 0;
    bottom: 20%;
    width: 25%;
    background-color: #F0F;
    }
    #right5 {
    position: absolute;
    top: 80%;
    right: 0;
    bottom: 0;
    width: 25%;
    background-color: #FF0;
    }
    #centre {
    position: absolute;
    top: 0;
    left: 25%;
    bottom: 20%;
    width: 50%;
    background-color: #F00;
    }
    Last edited by jedaisoul; 01-12-2014 at 04:10 PM.

  3. #3
    Join Date
    Jan 2014
    Location
    Pakistan
    Posts
    6
    I you want to use dreamweaver than it will be easy. Create new file > fluid grid layout than select the no. of columns you want. If you want to see what happened see the css file which dreamweaver includes. Good Luck.

  4. #4
    Join Date
    Jan 2014
    Location
    India
    Posts
    3
    Good post dear, i get useful information from it thanks a lot.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles