SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Ontario, ca
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Adding backgrounds to 3 eq col w head and foot

    I have a design that is starting with the 3 column fluid layout and adding nested divs with background images to make an onion skinned type background that expands with the 4 corners of the browser window edges. If the divs are simply nested on the outside of the 3 col markup, the design changes and voids the nice behaviors.
    How does one make the outside nested image divs act just like with the 3 column outer div? Is there a better way to get this effect? Please help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite sure what you are asking exactly but I assume that you have a fluid layout and you are trying to place images in relation to the layout (like rounded corners etc).

    You can place elements in relation to another element by using a stacking context by giving the parent a position:relative. You could then position them in relatioon to the parents corners but you can then place them absolutely outside the parent into the desired position. That way their position will be dependent on the parents.

    However in a fluid layout Ie does have a rounding bug and will quite often be a 1 pixel out on every odd pixel when the screen is resized. This can make it difficult to place things perfectly (like rounded corners on a div). This does vary with the type of layout and with the dimensions also so you need to play around a bit.

    If you had a link or some code of what you were doing then you might get more pertinent suggestions to your layout.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Ontario, ca
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I set a link to view
    http://pinched.com/bsp/

    Ultimately all images will go to the edge of the browser with minimum height and width (800x600) contraints so the images do not collapse on themselves. I hope this explains better.

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Ontario, ca
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A deadline is passing so I will have to change my question to: Is this design possible and if it is, how much would I expect to pay for this layout to be done outsourced? I have an idea where but not the value. Maybe a design comprise in the end. Any ideas?

    I have spent many long hours researching CSS Layout and have not found a way to adapt the best examples the web has to offer. Help?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Your page is ok but the design will ulimately fail becuase IE has no min-width. You can set a min-width for mozilla which will stop the page from getting smaller but you would need to use some js for ie to do that or use ie only expressions.

    Something like this
    Code:
    <!--[if gte IE 5]>
    <style type="text/css">
    #outer {width:expression( documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760" : "auto") : "760px") : "auto" );}
    </style>
    <![endif]-->
    Assuming your main page wrapper is called outer and holds everything.

    Then you could just set a min-width in the body for moziila .
    Code:
    body {min-width:760px}
    I think thats the only solution or using a table to hold everything.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Ontario, ca
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help, really...
    I did manage to get something to work but I dropped the footer because it goes beyond bottom margins and breaks the design in Netscape
    http://www.pinched.com/bsp/home.html
    I am dropping the footer for now... oh well.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It looks pretty good to me

    I did play with it and get a version that workes perfectly in ie but moz won't inherit the 100% height for the footer. The problem is that moz will only inhereit 100% from the body and onto the first wrapper and no further. All further nestings collapse to zero even if 100% is specified.

    paul

  8. #8
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Ontario, ca
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found out the same here, perfect in IE but lacking elsewhere. The divs create all this extra space at the bottom for Netscape. Perplexing.

    I am probably going to work on it to see if it possible (later). If in the meantime there are any suggestions I would appreciate it.

    http://www.bluesonicpro.com/home.html will get you to a better version. Feel free to pick it apart and suggest if need be. Thanks for your time.


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
  •