SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help appreciated with design dilema

    Hi there everyone,

    I could really use some inspiration /advice on what I can do to achieve the following with this website: http://heartseed.sf.net/test.php

    I just need footer to be aligned at very base of background image, the two DIVS simply need to go on either side of same image, and I just need to make sure not to use absolute positions because they are lost in resizing.

    I continue to try to resolve this, but so far, as a basic CSS total newbie,Im slightly frustrated at the moment and hoping for at least guidelines, or even a comment like,,sorry not possible with css.

    Cheers
    Leebojammin

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    There are a couple of other things that need to be fixed before we can jump into the CSS, when i looked through your code i noticed 2 things.

    1. Your footer <div> isn't closed which is causing your #container element to become part of the footer
    2. Your #container element has an invalid attribute, it currently says id"container". Simply make it id="container".

    Once you have fixed those issues you can simply change your footer CSS to the following...

    Code CSS:
    .footer {
        bottom: 0;
        font-size: medium;
        left: 0;
        margin-bottom: 10px;
        position: fixed;
        text-align: center;
        width: 100%;
    }

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    There are a couple of other things that need to be fixed before we can jump into the CSS, when i looked through your code i noticed 2 things.

    1. Your footer <div> isn't closed which is causing your #container element to become part of the footer
    2. Your #container element has an invalid attribute, it currently says id"container". Simply make it id="container".

    Once you have fixed those issues you can simply change your footer CSS to the following...

    Code CSS:
    .footer {
        bottom: 0;
        font-size: medium;
        left: 0;
        margin-bottom: 10px;
        position: fixed;
        text-align: center;
        width: 100%;
    }
    Thanks so much for seeing that, and I apologize I did not run it through validator, I would have found such a thing. I just ran it, and its validating fine.

    I neglected to also state ,I was hoping to get each tablet, to come say within a inch or two of each side of the background image, so as to bring reader in to see them instead of on far edges. It is aesthetics and design both.

    I tried myself, but Im not adept enough quite yet to know the needed css.

    Cheers and many thanks for your help
    Leebo

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Simply do the following and it will align your side boxes along side your background image. Remove the .container class you have set and add the following ID selector..

    Code CSS:
    #container {
        margin: 0 auto;
        width: 990px;
    }

    Also i want to point out that you can reduce the amount of CSS you use by simply changing your selectors and merging them, for instance both your side boxes have the same properties beside the float so instead of separate selectors with the same properties we can use the following instead.

    Code CSS:
    .tablet1, .tablet2 {
        border: 1px solid red;
        text-align: center;
        float: left;
        font-size: small;
        width: 220px;
    }
     
    .tablet2 { float: right; }

    On a side note i would suggest rather then using a class you use an ID selector as classes typically take longer for the browser to parse even though we don't see the difference the .NET loading time of the page tells the difference to the millisecond.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Simply do the following and it will align your side boxes along side your background image. Remove the .container class you have set and add the following ID selector..

    Code CSS:
    #container {
        margin: 0 auto;
        width: 990px;
    }

    Also i want to point out that you can reduce the amount of CSS you use by simply changing your selectors and merging them, for instance both your side boxes have the same properties beside the float so instead of separate selectors with the same properties we can use the following instead.

    Code CSS:
    .tablet1, .tablet2 {
        border: 1px solid red;
        text-align: center;
        float: left;
        font-size: small;
        width: 220px;
    }
     
    .tablet2 { float: right; }

    On a side note i would suggest rather then using a class you use an ID selector as classes typically take longer for the browser to parse even though we don't see the difference the .NET loading time of the page tells the difference to the millisecond.
    I just wanted to say thanks again for your help, and to show you what is prob final result. I added a few subtle effects and I hope its still readable but offers a few interesting visuals.

    I shall continue learning and helping where I can , as you have here.

    Btw, the test.php is replacing game information link.

    cheers
    leebo


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
  •