...

View Full Version : % sized div boxes and graphics



RKic
02-17-2012, 02:55 AM
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
02-17-2012, 03:34 AM
For my next stupid question....So, uh, what was the question?

JustS
02-17-2012, 07:00 AM
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
02-17-2012, 11:36 PM
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
02-17-2012, 11:42 PM
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
02-18-2012, 02:16 AM
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
02-22-2012, 12:21 AM
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
03-20-2012, 02:24 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum