Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Hi, I am having problems with the current scenario:

    I have three divs I have floated left...

    I want the middle one to be a fixed size ie: 1000px

    I want the ones on the left and right to expand to fit the screen either side of it... all divs remaing in a row whatever screen size...


    Why do I want to do this? Well I want a background image that is centered about the center 1000px width div and disappears on the left and right in accordance with how much space there is...

    There may well be a better approach... I am guessing this is a common problem?

    Any ideas? :-) Thanks -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Give us a URL so we can see what's there so far.


  4. #3
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Hi mlseim,

    not sure it is helpful but here you go:

    http://www.allyouneedtotri.com/test/test-bgdiv.php

    The html is as follows (I guess I dont want width 200px on the left and right):


    <div style="float:left; width: 200px; height:1400px; background-image:url(jxwd-images/bg-pictures/swimmer-lhs.jpg); background-repeat:no-repeat; background-position:right; ">
    </div>


    <div style="float:left;width:1000px; height:1400px; background-image:url(jxwd-images/bg-pictures/swimmer.jpg); background-repeat:no-repeat; background-position: right">
    </div>


    <div style="float:left; width: 200px; height:1400px; background-image:url(jxwd-images/bg-pictures/swimmer-rhs.jpg); background-repeat:no-repeat;">
    </div>


    I am just putting together a diagram to clarify... Thanks -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  5. #4
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Here is a graphic to show what I am trying to do:

    http://www.allyouneedtotri.com/test/forum-example.jpg


    -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I think having one large background image would be the best.
    So I attempted to make it one image using MS Paint.

    Here's my shot at it:
    http://www.catpin.com/center/

    Try that on a few large monitors and see what happens.


  7. #6
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Hi Thanks for the efforts, but I am afraid that is no good because it would cut the navigation off the left hand side of the centeral site... I also dont think the designer and customer would be happy about me chaning functionality... It needs to work as specified...

    NB I submitted this post as you would expect this to be a fairly normal situation...

    IE there are a large portion of fixed width center justified sites... You would expect some of them to want a common background across the whole width...

    :-)

    -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  8. #7
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Sorry being dim...

    Think the solution does lie in what you were describing...

    The key point is:

    background-position: center top;

    All I need to do now is to restrict the change in width somehow in the central region...

    Thank you! :-)
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  9. #8
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Thanks works lovely finished as follows:

    <div style="margin: auto auto; background-image:url(/jxwd-images/bg-pictures/swimmer.jpg); background-repeat:no-repeat; background-position:center top">


    <div style="width:1000px; margin:auto auto">

    </div>
    </div>


    -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Shoot us a real URL so we can see it.
    It might be helpful if we can test it with different browsers and screen sizes.


  11. #10
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    Hmmmmmm, there is a floor...

    See: http://www.allyouneedtotri.com/test/races.html

    As the width becomes smaller then 1000px the bg picture carries on moving...

    Any more ideas?

    Thanks -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

background-image justification

,

image of center justification

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:12 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com