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
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically moving table in CSS

    Hi I'm trying to make a webpage that looks like this mock up I've made..

    http://www.interludeartists.co.uk/ma...es/preview.jpg

    I've managed to get the background to dynamically resize to fit in most browsers, I'm having trouble getting the central elements to all move together so that it still looks like they're sitting on the floor.

    I want all of the elements to always be centered but to move up and down in accordance with the users browser.

    I understand that it's going to be impossible to make the elements sit in the same place in EVERY browser but wish to achieve this as best as possible.

    My current HTML is here:

    http://www.interludeartists.co.uk/mandy/index.html

    and my current CSS is here:

    http://www.interludeartists.co.uk/mandy/style.css

    I'd really appreciate any help.

    Thanks!

  • #2
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    It actually is possible. Read up on flexible grid width design- specifically media queries and the css specific code for different browsers.

    The short of it is that you create a set of CSS rules that are specific to variables that you specify- for example, you want to indicate layout rules for a smaller screen:

    Code:
    @media screen and (max-width: 770px) {
    /*insert alternate rules here*/
    }
    as far as browser tweaks, here's an example of setting a border radius (gives the element rounded corners) in your css and including the code for the other browsers so it will look similar on any browser:

    Code:
     border: thin solid #000;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     -o-border-radius: 15px;
     border-radius: 15px;
    hope this helps.


  •  

    Tags for this Thread

    Posting Permissions

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