| SitePoint Sponsor |
Just a quick question.
If I have the following code:
Will #div1 inherit the width of its parent, #container? That is, will it be 30% (50% of 60%) of the entire page rather than 50%?Code:<head> <style type="text/css"> #container { width:60%; } #div1 { width:50%; } </style> </head> <body> <div id="container"> <div id="div1"> </div> </div> </body>
Thanks.
~TehYoyo
Yes, it will indeed be 50% of 60% = 30% of the <body> width
Rémon - Hosting Advisor
Minimal Bookmarks Tree
My Google Chrome extension: browsing bookmarks made easy
Thanks a lot.
Also, what would you recommend:
Fluid or Elastic layouts?
To be honest, elastic layouts confuzzle the heck out of me.
~TehYoyo
I just do fluid. Here is a good article you should read
http://coding.smashingmagazine.com/2...t-one-for-you/
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
That's what I'm leaning towards.
Any other thoughts?
~TehYoyo
Elastic layouts are my preference. They aren't hard at all ... I mean using ems with %. See if this helps at all:
http://pageaffairs.com/web/css/fluid-elastic-fantastic/
Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.
I guess so...it's probably because the em seems so abstract to me. Percentages make sense, pixels make more sense than percentages, but ems...
Hard for me to get a grip on how big an em is. Please don't post a link to what an em is. I know what it isIt's a unit relative to the default font-size (or the height of the caps-line to the descender plus 1px if you're @deathshadow60 ; ).
Like I said, it's hard for me in terms of perspective.
~TehYoyo
Well, ems are like percentages. font-size: 100%; means the font at its normal size. font-size: 1em; also means the font at its normal size. If you know what font-size: 150% means, then you know what font-size: 1.5em means.Originally Posted by TehYoyo
Assuming that end users haven't altered their default font size, it's fairly safe to assume (at least as a guide) that 1em = 16px. I know there are lots of ifs and buts about that, but it's a useful guide. So if you want a wrapper that's 960px wide, you can pretty safely translate that into width: 60em and work from there. If people have their fonts set large, the wrapper will be wider than that, but everything else will scale with it, so there's no problem.
Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.
Ah. I've never thought of it like that. Maybe I just didn't think about it long enough.
So is it a good idea to set everything as 1em = 16px and then work from there? Can I make a fixed-width layout and then convert it to elastic?
~TehYoyo
Don't purely base it off that assumption but sure.
You can, just change the values to ems. Or %'s as I prefer
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
It is funny how it's SUPPOSED to mean the width of a capitol M, but if you test all the different fonts out there, it seems to have nothing to do with that and typically comes out at roughly what you just mentioned... average top of a capital letter to the average bottom of any descenders, plus 1 px for christmas only knows what... and even that can't be relied upon.Hard for me to get a grip on how big an em is. Please don't post a link to what an em is. I know what it is
Just make two boxes 15em wide, one set to arial and the other to verdana -- the boxes end up the same size when they SHOULDN'T... since the capital M on both fonts are different widths.
It's actually much simpler than people think -- in HTML 1em == 100% font-size. That's it... and if you use EM or % based off browser default, that works out to:
12px at 72 to 75 dpi (some handhelds and *nix desktops)
16px at 96dpi (default on the majority of systems)
20px at 120 dpi (old windows large / new windows medium / old old old windows 3.x "8514")
24px at 144 dpi (new windows large and many media center displays at 1080p)
Though of course the dpi setting could be anything depending on the device; try what Apple's new "Retina" displays does to all font sizes be it px, em, ex, pt, whatever.
As to the question, I tend to mix fluid and elastic -- since elastic is just a overglorified fixed-width; and therin uselessly broken to many users... case in point the examples on the page Ralph linked to are again too big for my netbook and a crappy little stripe on my desktop.
It's why 90%+ of what I code for 'desktop resolutions' these days uses:
Smallest width so layout doesn't break -- smaller layouts getting targeted by media query... the max width in EM so I get the elastic maximum, width in percentage to trip haslayout and make some of the body background show through so it's "pretty".Code:#pageWrapper { min-width:752px; max-width:68em; width:95%; margin:0 auto; }
As to percentages on width for columns inside my outer wrapper, I've NEVER had them be anything but headaches from hell, but that's BECAUSE I design fluid; meaning at least one of the columns will end up shrinking smaller than it should probably be allowed to - which is why I'd make side columns either fixed or elastic, letting the main content area remain fluid...
Also why I don't consider multiple equal-width boxes of fixed height across a page to be viable for web deployment and to fall into the category of "but I can do it in photoshop" idiocy.
Oh, and in some older browsers (guess which ones) your 50% inner will NOT be a fraction of the 60% even though it should, without setting position:relative on the outer one. Don't know why, but that's how it works.
But isn't it a bad idea to mix fluid and fixed width boxes?
~TehYoyo
Edit: Geez. I'd like to know your tech setup. Are you using three monitors? (Through one graphics card = mindblown! )
No, most three columns layout do it or make them at the very least elastic because it's actually simpler -- and sidebar crap usually isn't as important as the main content column.
This is particularly true of content first columns, which are much MUCH harder to do as a percentage width without going 'back in time' to tables.
Off Topic:
No, two cards. 560TI primary, my old GTX 260 as a secondary... and it's four monitors total.
Primary workstation:
i7 870 with 8 gigs RAM, 4x 2tb 7200 RPM Hitachi's
GTX 560ti primary card driving center 24" Samsung 2443BW and left el-cheapo envision 24" (both 1920x1200)
Envision salvaged from electronics waste area at dump. Easy fix, busted backlight.
GTX 260 acting as dedicated physx/cuda/opencompute card and driving both of my left 17" portrait oriented Viewsonic VP171B's. (1024x1280)
Both displays salvaged from "take what you want" bank closing. (along with 16 gigs of PC-100 server memory, a dozen or so video cards, etc, etc)
Audigy 2ZS Platinum so I actually have WORKING ASIO drivers and two working EMU 10k synths
Emu Morpheus for four more EMU 10K synths in one box
Roland MT-32
Yamaha FB-01
(thankfully I've got five MIDI ports)
Klipsch 5.1 Audio setup (Logitech Z775's circa 2001, which are actually big K under the hood!)
IBM Model M keyboard
Logitech M570 mouse (recent change, was using wired Logitech Trackman Marble for the past decade and a half)... To blazes with mice.
Looking pretty nice in a Thermaltake Element G case.
Secondary garage workstation:
i7 920 with 9 gigs RAM, 250 gig HDD
GTX 260 driving a 19" Dell 2001FP and a 21" Viewsonic CRT. (both 1600x1200)
Which has a checkered history involving 3+ hours with a jewellers loupe and a homemade pair of tweezers made from sewing needles -- PM inbound on that.
Hey, you asked.
So then, say, if I'm on a triple 23" monitor (friend has it #jealousy) which ends up at 5760 across, full screen browsing (unrealistic, I know), how do I get the columns to not look like tiny dots?
Off Topic:
Huh. Interesting set up. It's my turn to rip you apart
Props for that. I wasn't aware that you could SLI non-identical cards...but I suppose you can?No, two cards. 560TI primary, my old GTX 260 as a secondary... and it's four monitors total.
Same. DDR3 1600 Corsair Vengeance (Blue).8 gigs RAM
That's disgusting. What the heck do you need 8 terabytes of HDD space for? I run my entire computer off of a $25 Seagate Barracuda (7200RPM) 160 GB SATAII drive. But at least you don't have SSD. And don't get me started on Intel...oh wait. Too late. Oops. As a student, building my own computer (without a job, mind you) off of giftcards for my birthday and Christmas, a $300 processor is just a totally extravagant waste. Sure, I wish my $110 AMD quad-core (3.2 GHz) Phenom would render 3d faster, but unless you're using a 3d renderer daily, or use high-resource programs constantly, you don't need that. A processor worth 2/3 of my entire computer is terrible (to me). But that doesn't mean I'm not insanely jealous...i7 870 with 4x 2tb 7200 RPM Hitachi's
Dang. Lucky place you live in. I gotta find more of those. Are they pretty common?Envision salvaged from electronics waste area at dump. Easy fix, busted backlight.[...]Both displays salvaged from "take what you want" bank closing. (along with 16 gigs of PC-100 server memory, a dozen or so video cards, etc, etc)
I like the synths...been thinking of getting into electronic (not dubstep/techno, mind you, more Owl City centered) music lately.
Nice. Stuck to hand-me-down stereo speakers that can't play loud enough to reach the other room and don't even have a volume control :/Klipsch 5.1 Audio setup
My keyboard: http://www.yugster.com/uploads/image...ll_gx620_1.jpg The raised back is a must.
Not a bad mouse, but...haha! I've beat you in olden-timeness! I'm still rocking an old dell, out-of-box-with-xp-computer trackball mouse.Logitech M570 mouse (recent change, was using wired Logitech Trackman Marble for the past decade and a half)... To blazes with mice.
Can't believe you have a second computer after that. :/
~TehYoyo
1) NOT that anyone with more than one display tends to run applications maximized across all of them - MOST people with 1920 pixel wide displays only use half that for browser width anyway.
2) max-width, at 5760 wide the paragraphs would be too long to follow anyways; 68em max-width off the 85% font-size I set on body works out to 924px wide on 96dpi systems, and 1156px wide for large font/120 dpi systems, which is usually quite workable in both cases for two column layouts. Three column layouts I'll usually give an extra 4 to 8 em, though again with the 752px min-width, you have to make sure it'll all fit -- or use mcswitchy and/or media queries (or both) to change it from three columns to two below a certain width.
Off Topic:
They're not in SLI -- they're just plugged in. In fact, SLI is counterproductive since on older cards SLI/Crossfire disables all but ONE video output; nVidia recently changed (GTX 2xx and higher) it so you can run TWO of the four ports when in SLI (primary card) -- but really you connect up that SLI bridge and turn on SLI, you completely disable the outputs on the second card, and potentially lose one port on the primary; which is why my old rig only ran three displays. I had 2x GTX 260 in SLI, but only had two working ports. To get the extra displays I had to put a 9500GT in next to them.
Under XP you can even mix-and-match video card makers with different drivers -- back eight years ago my A64 4000+ had a Ge7600GT as the primary card and a radeon 9250 driving the extra displays. (All crt's -- power bill SUCKED) -- Vista/newer they have to all be the same manufacturer and driver generation set; so on Vista and Win7 the best bet is all nVidia Ge6xxx and newer (since the core drivers still support Ge6's) while on AMD/ATI, it's a craps shoot on anything older than a x1600. ATI are real whiney little **** about supporting old hardware on new OS compared to other manufacturers... and it's only gotten WORSE since AMD took over.
More a gSkill ripjaws kind of guy.
Nauseatingly large music and movie collection (since I've converted all my dvd's to h.264 and archived them to cardboard boxes in the garage), massive library of 3d source files since I still do some freelance game model design in 3ds max and milkshape, midi, samples and soundfont library for Sonar and Reaper that puts most production studios to shame (used to do MIDI arrangement for professional musicians through three different companies -- the really good MID's of RHCP's "Aeroplane" and Tom Jones "Sex Bomb" -- that's my work), source code for software I've written and still maintain dating back thirty years, backups of certain customers databases that I do remotely (that way they have on and off-site -- mostly for accounting software I wrote in the early 90's that's still in use -- ranging from ASA 400 to Borland Paradox for DOS)...
... and two of those are in RAID config since that's where those backups are... and one of those drives is open to the LAN for mass storage for lesser devices like my roommate/ex fiance (it's complicated) laptop, my laptop, my netbook, my recently acquired Ice Cream Sandwich Droid tablet ($90 deal extreme special), the garage machine, my MSI Wind u123 media center PC, etc, etc.. (canceled cable, just watch Hulu and Netflix now -- cheaper since I'm already paying for 22mbps Internet)
That's the same as what's in my laptop, my netbook and the media center.
Nah, but I have a nice stack of dead ones from "repairing" people's systems -- blasted things make the old 2 to 8 gig maxtors or the 40 to 80 gig IBM deathstars look reliable.
I'd agree with that if AMD was at all competitive since Core 1 dropped... though I've never batted an eye at $300, since that's what a P90 or a 486/50 sold for. Hell, I can remember paying $200 for a RCA 1802.
If you know when and where to look. Keeping an ear to the ground and paying attention to the papers can help. Few years ago they tore down the old KFC to build a new one (moving Taco hell in with it) -- contacted the contractor and offered to help remove any surplus electronics for free; that's where my 21" viewsonic came from; the boss' office. They were going to pay money to have it and office computer hauled away as scrap. The bank closing was just dumb luck, was out fighting diabetes and depakote induced weight gain when I happened by stack upon stack of old computer stuff behind a bank with a "Free" sign on one of the stacks. All the hard drives were AWOL (bank, DUH!) but it was a treasure trove of RAM and old cards. I was tempted to snag more displays, but the rest were all 14" CRT's... Got one of the white Playstation 1's out of it though...
Local dump has a electronics dropoff that's good pickings -- they charge for people to drop off stuff, but they don't charge if you want to haul it away. Had a small six node cluster in the garage I used to power on when doing heavy multi-frame pov-ray stuff built from a bunch of 600mhz Compaqs I grabbed on one trip. (though that was four years ago, still have machines, really don't use them since I got the i7 870)
Dumpster diving for tech -- great fun for all.
As a musician who still goes out busking on nice days, and has been in a number of different bands it's kind-of a must have. I'm often 'welcome' in any band, more so now that I have the EWI as I can 'pretend' to be whatever instrument is missing... or bring a midi accompaniment to fill in what I can't do on the EWI.
... and when I say Midi I don't mean the cheap FM/adlib synth garbage most people (especially web designers) associate the term with.
Rubber dome is NOT a keyboard.
SECOND? Let's see...
Primary Laptop: Compaq 8710p -- received "broken", just needed power jack replaced. Upgraded it from a 1.8ghz T7100 to a 2.5ghz T9300.
Hackintosh: Atom 1.6 stuffed into an Apple IIE platinum case -- so it's still an apple branded computer just 'upgraded'; so it's a legal hackintosh.
Netbook: MSI Wind U123
Media Center PC -- Acer Revo
Primary Retrocomputer -- Tandy 1000 SX
Secondary Retrocomputer -- TRS-80 coco 1 upgraded to 64k RAM with Coco 2 keyboard.
"toys" -- two Tandy 1000 EX, two tandy 1000 HX, TRS-80 Model 4P (currently down for repair/upgrade to 128k RAM and amber picture tube), TRS-80 Model 100, Commodore Plus/4 (aka Commodore minus 60 -- recent addition to collection), Apple IIE Platinum, Sega master system... and I've got a VIC=20 on the way.
... and somehow I still have time to run bicycle repairs out of the garage, perform the occasional bris since I'm a trained mohel (even funnier since I've gone agnostic and spent time training with Jesuits -- the latter got me off the streets after doing the homeless alcoholic vet on medical discharge routine), PC repairs on recommendations, continue to write new DOS games (second public release should be soon), go out busking on warm weekends, be even MORE of a pain on aviation and rocketry forums than I am here, and still service some clients web development and maintenance needs; all while on doctors orders not to work the past six years.
Just in case we've not dragged this far enough OT... wait, it's YOUR thread, so no harm no foul? Probably still have some mamzer get their panties in a twist. Giving that there off topic bbcode a real workout here.
I tend to browse full screen (1920x1080, 23") but usually I'll make my browser window ~1200x800 (just feels/looks good)
[ot]But how do you get the gfx cards to work together? Do you just plug them in and Windows figures it out?
Meh. I like Corsair as a company and I bought it a long time ago.More a gSkill ripjaws kind of guy.
What RAID? In keeping with everything else, I'd imagine that everything is RAIDed...but that might be excessive. (God forbid)and two of those are in RAID config since that's where those backups are
Am jealous22mbps InternetStandard. And AT&T.
Not sure what you mean by rubber-dome, but I'm pretty sure it's got a spring. And I actually love my windows key, especially in Win7. Aeropeek (pointless? Yes. Highly amusing? Oh yes.) Also, when I'm waiting for this stupid Acer logo to go down, I can be shooting up Chrome, music, library, etc. w/ my hotkeys.and don't give me those stupid/pointless windows/menu keys :P
Stupid mamzers...probably all use Photoshop, too.Probably still have some mamzer get their panties in a twist.
~TehYoyo
It is bad to be so rigid.. pun... in your quest for a layout strategy.. what is your content going to be like, who is your audience... these should taken into consideration.
As far as aversion to ems, I have to say this is is where having a print bg helps, generally speaking.
But, the first thing to keep in mind about the EM measure, when used with the font: declarations it works similarly to % expressed in decimal value.
In other words:
.test{ font-size:.5em} and .test{ font-size:50%} do the same thing.
On the other hand:
.test{ width:.5em} = an INCREDIBLY SMALL, ROUGHLY half the size of a letter M at the current font size for the element and doesnt care about the parent element width.
.test{ width:50%} = HALF the parent width, and doesn't care about the font size.
Having columns that are too many CHARACTERS wide decreases the ease in which text can be read (this is one of the reasons why magazines and newspapers employ columns in their layout).
Put aside bg and content images. Imagine you are sizing your containers( columns) based on the size of the width of the "M" character of the font used. When you use ems as element size you can 'essentially' copyfit your content.
Even in PRINT an EM is not calculated in physical measurements. 1em 72pt Helvetica Neue Condensed bold might be 0.625" while 1em at the same pt size Arnold Boecklin might be 0.85". The point is, an EM is an internal mesurement of a font proportional to ITSELF. Experienced typesetters "rough" their values ( even tho a column might be 3.75"). It is wise to remember this (and the fact that good web design doesn't aim for 'pixel perfection' the best PSD jockeys know this!) and not try to assume that here is a direct mathematical conversion to be applied between EMs and PXs
BONUS:
if you really wanted to experiment and have fun, you could set your base font size in PTs ( this is a measurement NOT based on on PXs, the EMs would remain the same but the PIXEL would would be different) ... just a fun foray.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
Yeah. I kind of got it now.
I think I'll generally tend to go w/ a fluid/elastic combo.
~TehYoyo
Which is where EM is actually broken on PC's, as 1em always equals font-size and is completely unrelated to it's alleged meaning.
For a LONG time pt was the preferred measurement, and I used to advocate it over %/em entirely because it's the only measurement nyetscape heritage browsers (like firefox) actually obeys the system metric on.
http://battletech.hopto.org/html_tut.../template.html
Check the 'side by side' comparison 3/4ths the way down the page.
Posting Permissions
Reply With Quote
Bookmarks