-
Hey Guest. Check out your NeoGAF Wrapped 2025 results here!
CSS: Fuck it I am doing it in tables.
- Thread starter TOP SHOTTA
- Start date
- Status
moka
Member
I'm honestly the only person who touches my code so I write it and format it how I want. I'd consider it to be pretty neat, organised and readable though.
An old boss of mine got pissed at me when I said he was wrong to use inline styles. I'm glad I don't work there anymore...
I need some help if possible. This seemed like the new happening web dev/design thread.
So, 2 questions.
1)What is the below image, and the design seen called, where the homepage image occupies 100% of the width of the page? I know there are a lot of variations to sites like this, but I happen to really like this one.
2) I want to find a template that gets me close to this. I can handle the rest of the coding, CSS, implementation and all of that. Can anyone point me in the right direction for it?
Thank you!
So, 2 questions.
1)What is the below image, and the design seen called, where the homepage image occupies 100% of the width of the page? I know there are a lot of variations to sites like this, but I happen to really like this one.
2) I want to find a template that gets me close to this. I can handle the rest of the coding, CSS, implementation and all of that. Can anyone point me in the right direction for it?
Thank you!
catapult37
Member
I know this will probably not be the answer you want, but I would recommend that any time you find a site like this and want to know "how'd they do that?" you just open up firebug and start inspecting.
I did something similar with the big splash screen on spotify.com. But when I went to look for it now, I found this amazing page: https://www.spotify.com/us/video-splash/?utm_source=spotify&utm_medium=web&utm_campaign=start Wait a sec for it to load (no 56k!)
It has a full video as the background and it's awesome
I need some help if possible. This seemed like the new happening web dev/design thread.
So, 2 questions.
1)What is the below image, and the design seen called, where the homepage image occupies 100% of the width of the page? I know there are a lot of variations to sites like this, but I happen to really like this one.
2) I want to find a template that gets me close to this. I can handle the rest of the coding, CSS, implementation and all of that. Can anyone point me in the right direction for it?
Thank you!
This is very simple to code, you'll need jquery or if you fancy, css3 to make the transitions, etc. Why not inspect how they built it and try to recreate it? Templates are shit at helping you learn, in my opinion.
Phoenix
Member
Definitely swear by Bootstrap.
Tathanen
Get Inside Her!
I don't feel like Bootstrap would really make anything faster for me. Building the skeleton for a site is second nature for me after all these years, and injecting third-party code for that would serve only to provide a messy mishmash of coding styles. I'd much rather take the hour or two to do it from scratch, and know exactly why everything is doing what it is. The vast bulk of the work for any site is past that skeleton phase anyway.
Op: You are in the wrong industry, get out.
If you been trying for 12 years and still struggle with CSS, you are in the wrong industry.
Also I get the impression that you fail to understand basic concepts behind CSS layout. I have to admit, even I do not get them but then again, I do not have any problem doing the CSS commercially.
I think the problem you are making is thinking about CSS as tables.
Do not. Make a wrapper and float boxes. Just google it.
If you been trying for 12 years and still struggle with CSS, you are in the wrong industry.
Also I get the impression that you fail to understand basic concepts behind CSS layout. I have to admit, even I do not get them but then again, I do not have any problem doing the CSS commercially.
I think the problem you are making is thinking about CSS as tables.
Do not. Make a wrapper and float boxes. Just google it.
Blegh, I don't even have in line styling when it's applied via jQuery, my script just applies/removes classes.
industrian
will gently cradle you as time slowly ticks away.
Yup. Use display:inline-block; everybody (just remember the white-space.)
Early IEs don't support it, but IE in general can go float itself.
Inline-block (IE8+) is a hack so we don't have to use float (IE6+) so we don't have to use tables so that we can display 2 elements side-by-side.
Inline-block has the problem of adding font-space. It works but not always.
onadesertedisland
Member
Those frameworks are great if you're mocking other sites. I think they're dandy for quick work. However, customizing them becomes a tiresome nightmare as they are riddled with quirky interdependencies that make changing small things take longer than coding it from scratch. At least in my experience.
Yup, I'd only care about early IE support if you were developing an intranet site for a company still stuck on Windows 98. And I prefer inline-block over float, but as long as it works either is fine I guess (as both require minor hacks to properly work anyways).
Eh, floats are fine. I never had too many issues with them except during times when I needed elements to be vertically aligned to each other -- but that's usable with inline-block, but IE8 and older doesn't support that.
The trick to floating stuff is this:
Code:
<div class="floated-column-left">Left Column</div>
<div class="floated-column-right">Right Column</div>
<div class="clear"></div>
.clear {
clear: both;
}Tathanen
Get Inside Her!
The white space is enough to make me not use it. Having to throw 0 font sizes on containers, rendering global font sizing useless, or make tags butt up against each other in the HTML feels FAR more hackey than using floats.
Nine times out of ten I'll just throw overflow:hidden on a container, since it forces the container to fully contain any floats. I'll only explicitly use a clearing div if my columns need to support visually breaking outside the boundaries of their container (popups etc.)
industrian
will gently cradle you as time slowly ticks away.
To remove the white space, simply delete the whitespace between inline-space'd elements or (I think this works) adding comments inbetween then. It's not the prettiest solution, but it works for me.
The websites I've been developing recently need to be used by people in China.
Yeah.
That and I take some sort of masochistic pride in making my sites work as-close-to-perfect in IE6. All the social/Facebook/etc icons are all fucked up, but as long as all my content displays perfectly (alongside a big-ass red banner saying "Upgrade to fucking Chrome!" of course) then it's all good.
Tathanen
Get Inside Her!
Eugh the comments option makes me want to gag. Whitespace should absolutely not affect layout elements, it's fundamentally reason enough to not use inline-block to me (for layout at least).
I'm so sorry
Glad I can make sites and not give a fuck about older IEs.And yup, whitespace causing inline-block to act up sucks. Would be nice to get a new method to deal with this stuff that combines the best of inline-block with float with none of the negatives...
You should be able to learn floated layouts after 12 years of professional web development, they have simple consistent rules that are pretty well-supported cross-browser with few inconsistencies (unlike eg inline-block, flex-box, etc). The main problem with floated layouts is they need a clearing context (lots of people add an overflow property to the container, I prefer just using a clearfix class/@extend in scss because it's more consistent and less error-prone). The second problem is related in that b/c they're outside of the flow it's hard to do equal-height dynamic containers without some awful hacks, eg "one true layout". This is where it's just easier to use display:table-etc (although that has it's own cross-browser issues) or plain old tables themselves for older browsers.
Early IE supports inline-block for elements that are already inline. There's a trick to make it work always, too.
No, that's not a trick. That's a hack, and using floats in ways it was never intended. It ruins so many things, and makes CSS unbearable if you base your designs on floating. It's fucking everywhere, and people have no idea how much they're abusing something that was never meant to be used that way.
Clear is meant for two floating items to not float to each other, as in two images that is supposed to have text floating around them don't float to each other, only the text. Sadly it's just hacked and abused, and it pisses me off.
Sometimes we might have to hack to get CSS to behave correctly (biggest flaw of CSS), so I support floats in certain situations, but the overuse of float is anathema.
Tathanen
Get Inside Her!
Naw, it's not a hack. It's sloppy to be sure, in that example, but it's perfectly valid. CSS may have started as something more about text prettiness and whatnot, but it has evolved so much since then. If you're doing layout, you've gotta use floats and clears. They are the fundamental tools of the trade.
I think a much cleaner and perfectly okay way of doin it would be if you had a two-column layout, both columns floated left, and a footer with clear:left or clear:both. Put that clear on an element that semantically should be there, not a meaningless empty "clear" div.
catapult37
Member
The Verge has some truly awesome css/jquery stuff on this feature today. Scroll down about halfway; there are two custom sections that are really cool.
http://www.theverge.com/2013/3/4/3966140/how-emoji-conquered-the-world
http://www.theverge.com/2013/3/4/3966140/how-emoji-conquered-the-world
Starphoenix
Member
The one thing I've struggled figuring out about CSS is the purpose of the position tags. I know they have a purpose, but even going through a college class of mine has still not shown me a practical instance where I'd want to use them.
catapult37
Member
Personally, I let everything default to relative unless I'm trying to create something like a modal dialog that floats over everything and doesn't scroll -- then it's fixed or absolute.
Tathanen
Get Inside Her!
Ever see a bar that stays stuck to the top or bottom of a website while you scroll? Or a sidebar doing a similar thing? Fixed positioning.
Ever seen a modal dialog? Something layered on top of the page? Any kind of same-window popup whatsoever? Absolute positioning.
If you absolutely position something within something that's relatively positioned, you can force items to be placed relative to the boundaries of that container. Stick them on the right, on the bottom, make them break outside of the box, etc. Great for all manner of situations where you're formatting a tightly designed box of text, icons, or pretty much anything.
Buddha Beam
Banned
This is kind of my opinion on frameworks, too. I see how they're convenient, but I don't like the... lack of control I feel like I have over them. I suppose I come from a stronger design background than a lot of folks do. I usually wind up altering so much of the CSS that I probably would've saved time and been better off starting from scratch.
I do like JQuery Mobile, though. Maybe because I'm so used to it that altering it isn't usually a big deal now.
industrian
will gently cradle you as time slowly ticks away.
I love this method so much. It blew my mind when I first discovered it.
-COOLIO-
The Everyman
i dont think thats so bad, it allows for even deeper customization.
edit: although i cant think of an example.
Float was intended as a method to allow boxes to be aligned to the left or right of their parent with any non-floated adjacent content flowing along the side. While it's unnecessary to have eg <div class="clear"> elements when you can use CSS to achieve the same effect, choosing to only have floated elements in a parent, and / or adding a block-formatting-context to that parent is not a hack, it's a choice. On the other hand, using eg inline-block for content that is not intended to be within a line of text requires you to do more obviously hacky things: manipulating font-size, comments, negative margins, removing closing tags, etc. Hacks that are far less reliable: https://twitter.com/thierrykoblentz/status/305152267374428160
- Status