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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    % sized div boxes and graphics

    Ladies and gentlemen. For my next stupid question....


    I set up my site with a somewhat liquid layout and my nav and content divs have a percentage width. I have some images inside these boxes (nav buttons and such) but they don't shrink along with their container when I resize the page. Instead the right border of the container box "eats" the images as it approaches them.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by RKic View Post
    For my next stupid question....
    So, uh, what was the question?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by RKic View Post
    Ladies and gentlemen. For my next stupid question....


    I set up my site with a somewhat liquid layout and my nav and content divs have a percentage width. I have some images inside these boxes (nav buttons and such) but they don't shrink along with their container when I resize the page. Instead the right border of the container box "eats" the images as it approaches them.
    Found out the hard way that, in a Blogger post, %ages were eliminated. I started using em instead.
    http://www.w3schools.com/cssref/css_units.asp

    I don't know if this'll help or not, but it's the thought that counts, right?

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    So, uh, what was the question?
    So uh, why is it doing that? the coding for the images and buttons is all nested within the NAV div. Shouldn't everything within it automatically be affected by its own size?

  • #5
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    RKic,

    Images cannot simply resize along with the fluid layout of css and html. They need help with either javascript or perhaps media queries for a responsive web design approach. I may be wrong, and if another coder steps in and says, please listen to them.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    my experiments

    I've been experimenting with liquid layouts and percentage widths at http://www.gerigeans.com http://auntnini.webs.com and http://oksenhendler.webs.com/

    If I understand the question correctly, you need to also set up width: 90%; min-width: 100px; max-width: 500px; for the images and containers.

    such as
    Code:
    #wrap { color: #090909; margin: 20px auto; padding: 20px; width: 85%; max-width:1000px; min-width: 50px;  position: relative;   background-color: rgba(255, 255,255, 0.25);  z-index:300; }
    #wrap img {  height: auto; width: 85%; max-width: 800px; min-width: 20px; }
    Not sure if percentage % is right approach
    Last edited by waxdoc; 02-18-2012 at 01:19 AM. Reason: corrected URLs

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    I've been experimenting with liquid layouts and percentage widths at http://www.gerigeans.com http://auntnini.webs.com and http://oksenhendler.webs.com/

    If I understand the question correctly, you need to also set up width: 90%; min-width: 100px; max-width: 500px; for the images and containers.

    such as
    Code:
    #wrap { color: #090909; margin: 20px auto; padding: 20px; width: 85%; max-width:1000px; min-width: 50px;  position: relative;   background-color: rgba(255, 255,255, 0.25);  z-index:300; }
    #wrap img {  height: auto; width: 85%; max-width: 800px; min-width: 20px; }
    Not sure if percentage % is right approach
    Ok, I think I see what you did there. I got that to work for a graphic which I have inserted into the nav bar, but when I apply the same style rules to the nav buttons, they simply vanish!

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    liquid layout

    As JustS stated above, use em measurement (which is based on M letter of base font size) for text and nav-buttons.

    My examples are in a fluid layout so the nav-buttons (which are float: left) just plop down one below the other. Might not be elegant, but did not want to reduce the navigation text.


  •  

    Posting Permissions

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