% sized div boxes and graphics

[RKic]

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.

[Arbitrator]

Originally Posted by RKic

For my next stupid question....

So, uh, what was the question?

[JustS]

Originally Posted by RKic

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?

[RKic]

Originally Posted by Arbitrator

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?

[Kevin_M_Schafer]

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

.

[waxdoc]

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

#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

[RKic]

Originally Posted by waxdoc

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

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

[waxdoc]

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.