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

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…

.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

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…

#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.

.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