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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with a rather complicated background problem


    Hey guys.
    So everything in the picture are in <div> tags to start off.
    If you look at the image, there is nothing really wrong with the design of the site at the moment, but that is a pretty large resolution, 1920x1080.
    The problem arises with smaller resolutions like here for example:

    This was shot at 1280x1024 or 1024x768.

    As you see, the background image is not aligned anymore.
    Could you guys help me with ideas or actual fixes on how I should overcome this problem?
    Like written on the image, I'm currently using a background image that is repeated on the y-axis and is then aligned with "scroll=(x)%".

    I almost forgot to add, that the 2 side bars are also scaled by percentage, with "width=(x)%".

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Would need a link to your live test site or, at the very least, all of your code posted here using the # button.
    Teed

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Would need a link to your live test site or, at the very least, all of your code posted here using the # button.
    Hey.
    Here's my live site.
    http://naike.zapto.org/index.php

    I just started out testing joomla and I like it, this is the theme/template I've come up with, and so far that is my only problem I've noticed.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A little bump again, the site is online for view, so feel free to fiddle around with firebug or whatever.
    I really haven't got a solution to this problem, I'm not very good at CSS so I don't know all possibilities there might be.
    Currently, I'm kind of stuck here :/

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Honestly, Ive looked at this issue more than a few times. I think the problem lies with the fact that the background color or should I say the TWO background colors(the light and dark grey) are all one background-color definition. Therefore, the darker gray doesnt "move" or expand when the sidebar elements do.

    Maybe someone much more experienced than I here can figure something esle out for you, short of quite a bit of reworking your layout.

    Ideally you probably should have worked up a two column layout, defined background colors or images for the left floated sidebar AND then another color or image for the right content section.

    Again, sorry I dont have a more definitive answer for you, but in the meantime dont give up! There's always more than one way to code anything!
    Teed

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I've been thinking of that too, but how would I create those columns?
    Currently my 2 sidebar things are inside div tags, but they only expand as much as is needed, and aren't tables just bull****?

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    There are lots of tutorials on one, two, and three column layouts. Here is one I like in particular.
    Teed

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    There are lots of tutorials on one, two, and three column layouts. Here is one I like in particular.
    Yeah, but this tutorial you linked uses the same technique as I do, simply a background image with 2 colors and then just repeated, same problem in my case.


  •  

    Posting Permissions

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