Results 1 to 4 of 4

Thread: Tabless design problems

  1. #1
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tabless design problems

    I am creating a design, that would be simple with tables, but I want to use div's instead.

    http://pcsyck.net/design/index.html

    the huge gap between the divs

    how can that be removed ?

  2. #2
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    Set the position of the divs using css!

    e.g.

    .vista #container {
    float: center;
    width: 780px;
    margin: 0 auto;
    text-align: left;
    }
    .vista #header {
    position: absolute;
    top: 0px;
    left: 0px;
    background-image:url(images/Untitled-1_03.png);
    background-repeat:no-repeat;
    padding: 35px 0px 0px 35px;
    height:65px;
    color:#FFFFFF;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    }
    .vista #footer {
    position: absolute;
    top: 100px;
    left: 0px;
    padding: 0px 0px 0px 35px;
    background-image:url(images/Untitled-1_06.png);
    background-repeat:no-repeat;
    height:40px;
    }

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    There is no -

    float:center;

    Absolute positioning is not for layout of major page elements.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    oops, my bad...
    never tried to use float:center before; so don't know why I put it in the answer.

    try this...

    .vista #container {
    position: relative
    width: 780px;
    margin: auto;
    text-align: left;
    }
    .vista #header {
    position: absolute;
    top: 0px;
    left: 0px;
    background-image:url(images/Untitled-1_03.png);
    background-repeat:no-repeat;
    padding: 35px 0px 0px 35px;
    height:65px;
    color:#FFFFFF;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    }
    .vista #footer {
    position: absolute;
    top: 100px;
    left: 0px;
    padding: 0px 0px 0px 35px;
    background-image:url(images/Untitled-1_06.png);
    background-repeat:no-repeat;
    height:40px;
    }

Bookmarks

Posting Permissions

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