Support NeoGAF

[industrian]

Wait, what? CSS is hardly a confusing styling language.

Here's my lame excuse for a website. All manually-coded HTML and CSS. I couldn't imagine using a table for a website. What the fuck.

Spoiler

One of these days I'll actually add content, hopefully.

I'm not sure about browser compatibility issues, or what have you. I've fought with CSS a bit and it seems that you can cut out the needlessly complex layouts and just go with something simple that should work near universally.

Am I the only one who hates floats? I only use them for "fuck it, it'll do" decisions for IE6/7 layouts.

Personally I would eradicate your floats by using a container:

<div id="container"><leftcolumn><rightcolumn></div>

Give #container this CSS:

width: auto;
position: relative;
margin: 10px 0 0 0;

Then change your left/right CSS to this:

#leftcol {
width: 220px;
position: absolute;
left: 0;
top: 0;}

#rightcol {
width: 770px;
right: 0;
top: 0;
position: absolute;}

Don't ask, I'm bored. Feel free to mess around with it more. That's the infinite beauty of CSS: the ease of messing around with stuff.

 

[t-ramp]

Am I the only one who hates floats? I only use them for "fuck it, it'll do" decisions for IE6/7 layouts.

I'm certainly a novice, so you know better than me. I'll take a look at your recommendations whenever I get around to working on the code again. Thanks.

 

[Mister Zimbu]

Am I the only one who hates floats? I only use them for "fuck it, it'll do" decisions for IE6/7 layouts.

Personally I would eradicate your floats by using a container:

<div id="container"><leftcolumn><rightcolumn></div>

Give #container this CSS:

width: auto;
position: relative;
margin: 10px 0 0 0;

Then change your left/right CSS to this:

#leftcol {
width: 220px;
position: absolute;
left: 0;
top: 0;}

#rightcol {
width: 770px;
right: 0;
top: 0;
position: absolute;}

Don't ask, I'm bored.

The problem with absolute positioning like that is that it's pretty much useless for doing anything with dynamic content (unless you do some unholy Javascript hacks)

 

[industrian]

The problem with absolute positioning like that is that it's pretty much useless for doing anything with dynamic content (unless you do some unholy Javascript hacks)

Absolute positioning within a relative container. It's a thing of beauty.

I'm aware of the drawbacks, but it works wonders. So far I've not seen any issues with it crop up in my responsive layouts I've used it with.

 

[Kung Foo Kid]

This is crazy that in 2013 that there is even a discussion on this. There is a reason why items become industry standards, please take the time to properly learn and understand CSS.

 

[moka]

This is crazy that in 2013 that there is even a discussion on this. There is a reason why items become industry standards, please take the time to properly learn and understand CSS.

I think deep down, OP knows this but is frustrated. CSS can be frustrating sometimes; web design in general, really.

 

[Devolution]

I now fail to see how a text-decoration language has any more right to control physical structure of pages over tables

WHAT.

Jesus.

 

[Orbiter]

double post - I am sorry!

 

[D4Danger]

Am I the only one who hates floats?

No, I've always hated them. I still find it amazing that in 2013 we don't even have a proper way to do layouts.

Almost every css layout solution is a kinda hacky mess people have managed to cobble together. I can see where a lot of the frustration comes from.

Flexbox and Grid are both better but I don't see many developers using them in the next few years because of legacy support.

 

[KevinRo]

By the part you quoted, I interpret that as.... tables were the means to control physical structure of pages - - until it wasn't the means anymore. Using CSS never, ever seemed easier to me and still doesn't. I use it, I get it, but sometimes I feel I am doing it because I'm afraid someone will view source and call me out on it.

This. SO much.

Back in my day, we didn't use CSS. WE used tables.

 

[catapult37]

Advocates for LESS/SASS, don't you find that having your CSS compiled ruins your ability to edit with Firebug/inspector? I love some of the features promosed by those technologies, but I fear losing the greatest tool in my web development toolkit.

 

[moka]

Advocates for LESS/SASS, don't you find that having your CSS compiled ruins your ability to edit with Firebug/inspector? I love some of the features promosed by those technologies, but I fear losing the greatest tool in my web development toolkit.

Not really, you can still use Firebug/inspector to find the general source of the problem and then narrow it down in your LESS/SASS files. Maybe you have a bit more work when ti comes to debugging but the time you save overall makes it worth it.

Writing with SASS/LESS actually makes writing and understand CSS a lot easier.

 

[D4Danger]

Advocates for LESS/SASS, don't you find that having your CSS compiled ruins your ability to edit with Firebug/inspector? I love some of the features promosed by those technologies, but I fear losing the greatest tool in my web development toolkit.

the answer you're going to get to this is source maps... which is is just adding another layer of bullshit imo.

css isn't that hard to manage. I don't understand the appeal of these css preprocessors.

 

[Orbiter]

WHAT.

Jesus.

I understand what he meant. What is so hard about understanding that he's frustrated?
It appears to me that the OP knows that CSS is the right way to do it but it sounds like he got sick of dicking around and fighting it.
I do that too. Sometimes - yeah - fuck it.

By the part you quoted, I interpret that as....like.... tables were the means to control physical structure of pages - - until it wasn't the means anymore. Some people got the memo, some didn't.
Using CSS for physical layout never, ever seemed easier to me and still doesn't. I use it, I get it, but sometimes I feel I am doing it because I'm afraid someone will view source and call me out on it.

As for making it easier to update - yeah - again great in theory but "skinning" a CSS-only design is never the simple & straightforward task that managers & business folks seem to think.
Ever worked on something like that? It's as much oif a pain in the coconuts as if it were a table-based layout. In a full redesign of a site it doesn't matter how it was coded, in my experience. You junk most of it anyway.

I know that CSS is the industry-approved way to lay pages out but that was a change that truly doesn't make sense all the time. I use tables as a safety net, or in a "fuck it" situation like OP seems to need to as well.
I can only imagine you CSS cats looking at us old schoolers going "I don't understand what is so hard about this"?

It's the cross browser stuff that is so baffling. It used to be that you worried about 3-4 browsers & device combinations. Now it is a Sisyphean ordeal to fight browsers x devices x hardware. Barf. Barf city.
CSS hacks make me want to STAB MY EYEBALLS OUT. And I feel OP when he says "joyless bullshit".

Floats and positioning, like, float: left on 3 columns in order to have 3 horizontal columns makes no fucking sense to me either.

I feels OP.

 

[CrudeDiatribe]

Tables were only used for layout because everyone's artistic demands outstripped the technology in the late '90s. "Hey, let's put images in table cells!"

Horses, cars, glue factory, etc.

 

[Tathanen]

Am I the only one who hates floats? I only use them for "fuck it, it'll do" decisions for IE6/7 layouts.

Yikes. I will always use a float before I absolutely position something. With floats I still have a document full of elements that are flowing in relation to each other, which is wonderful for expandability. Absolutely positioned elements are removed from the document flow entirely.

In your example there, what do you do when you want something beneath your two positioned columns? The container is not expanding vertically with them, since they've been removed from the flow--you've got a 0-height container with a 10px margin there, and two columns exploding out of the bottom of it. You'd have to set a static height on the container, wildly limiting your options for flexible content. I'd definitely never recommend that layout for a full page.

 

[Zeppu]

This. SO much.

Back in my day, we didn't use CSS. WE used tables.

Back in my day WE also used tables. Then we discovered CSS and realized how much better it is. Then we switched to CSS.

Tables are good for displaying tables or other tabulated data.

The only way tables are in any way flexible or easier for layouts is the usage of multiple and tested tables. Coupled with colspans, rowspans and the rest of the repeated attributes you'll have to add if you choose to not use CSS at all, it make it an unreadable, unmanagable mess.

With nested divs on the other hand you can just build your wireframe from the outside in.

 

[ckohler]

I also used tables back when I first started because back then (1997) CSS support for layout was pretty non-existant and/or poorly supported.

The funny thing is, building HTML e-mails today feels like stepping 10 years in the past because e-mail clients/web apps are so poor at CSS that they too still require using tables for layout if you want any kind of conformity.

Anything I build for the web however is pure html/css (structure style separated). Heh, I even went through the XHTML phase before going HTML5.

 

[StopMakingSense]

The funny thing is, building HTML e-mails today feels like stepping 10 years in the past because e-mail clients/web apps are so poor at CSS that they too still require using tables for layout if you want any kind of conformity.

Oh god yes lol. Can't even use background images because of Outlook 2007 and 2010!

 

[Dinosur]

The funny thing is, building HTML e-mails today feels like stepping 10 years in the past because e-mail clients/web apps are so poor at CSS that they too still require using tables for layout if you want any kind of conformity.

Oh man, yes. Had to make an email table last month and the entire time my brain is screaming nooooooooooooooo. Not only did it hurt remembering how to code that way, the differences between email clients and code support was mind boggling. Luckily someone told me about that campaignmonitor site that was mentioned here earlier.

 

[Orbiter]

Oh man, yes. Had to make an email table last month and the entire time my brain is screaming nooooooooooooooo. Not only did it hurt remembering how to code that way, the differences between email clients and code support was mind boggling. Luckily someone told me about that campaignmonitor site that was mentioned here earlier.

Yup. Thrift store tables and in-line CSS for HTML email that people can't even be bothered to read, and delete the second they see 'em.

HTML email: Fucking waste of time.

 

[Kreed]

Oh god yes lol. Can't even use background images because of Outlook 2007 and 2010!

I was just talking about this earlier in the thread. runningjoke has you covered:

(professional email template builder here)

http://emailbg.net/ a neat code generator for background images that work in most clients (including outlook!)

http://www.campaignmonitor.com/css what css you can use

So yeah use tables for all your layouts, and you can use media queries to change a 2 column layout to a single column

 

[Escape Goat]

Anyone have some suggestions on implementing a guestbook on a website? I've googled some freebie ones but none are really that sharp looking.

 

[reilo]

Am I the only one who hates floats? I only use them for "fuck it, it'll do" decisions for IE6/7 layouts.

Personally I would eradicate your floats by using a container:

<div id="container"><leftcolumn><rightcolumn></div>

Give #container this CSS:

width: auto;
position: relative;
margin: 10px 0 0 0;

Then change your left/right CSS to this:

#leftcol {
width: 220px;
position: absolute;
left: 0;
top: 0;}

#rightcol {
width: 770px;
right: 0;
top: 0;
position: absolute;}

Don't ask, I'm bored. Feel free to mess around with it more. That's the infinite beauty of CSS: the ease of messing around with stuff.

Nooooo

 

[Orbiter]

Anyone have some suggestions on implementing a guestbook on a website? I've googled some freebie ones but none are really that sharp looking.

Are you being serious? Just asking. A guestbook?
Like a Perl-based 1997 guestbook?

 

[Escape Goat]

Are you being serious? Just asking. A guestbook?
Like a Perl-based 1997 guestbook?

Yes. Its by our client's request. (Its a school project)

 

[reilo]

Yes. Its by our client's request. (Its a school project)

Oh my.

 

[Orbiter]

I am very old school:
http://www.scriptarchive.com/guestbook.html

 

[moka]

Yes. Its by our client's request. (Its a school project)

Just get the non-sharp looking guesbooks and make them look sharp with a bit of styling. The logic and behind them is the most important thing.

Also, Guestbooks are so GeoCities.

 

[Dinosur]

Had the entire back room at work busting up laughing this afternoon

http://everyfuckingwebsite.com

 

[Escape Goat]

He wanted people who visited the site to be able to share their experiences, opinions, and whatnot. I didn't know how else to implement that outside of a guestbook. But he thought it was important to the user's experience with the site.

But I'll try to do a little sorcery to make them look better. I'm not looking to become a web developer but we do have to develop a front end site. Thanks for the info.

 

[cdyhybrid]

I feel like if I just pretend that IE doesn't exist, my whole development experience goes much smoother.

PREACH

Fuck you IE.

 

[scurker]

the answer you're going to get to this is source maps... which is is just adding another layer of bullshit imo.

css isn't that hard to manage. I don't understand the appeal of these css preprocessors.

There's a lot of appeal because it makes it easier to version files in addition to having the ability to use variables. It also helps you cut down on a lot of the vendor prefix crap, so you only have to reference that in one place. There's no reason that in 2013 that CSS should be statically typed, and pre-processors help to alleviate some of that pain.

 

[-COOLIO-]

ya im surprised we dont have good css GUIs yet. what up with that?

 

[moka]

PREACH

Fuck you IE.

Hey! IE10 isn't all that bad to be completely honest.

 

[railGUN]

ya im surprised we dont have good css GUIs yet. what up with that?

Squarespace has a pretty awesome CSS GUI (at least their V5 platform does). It has a ton of selectors, and you can add your own custom ones if you want. I don't bother with it though, since writing it is faster.

 

[t-ramp]

No, I've always hated them. I still find it amazing that in 2013 we don't even have a proper way to do layouts.

Almost every css layout solution is a kinda hacky mess people have managed to cobble together. I can see where a lot of the frustration comes from.

Flexbox and Grid are both better but I don't see many developers using them in the next few years because of legacy support.

Yikes. I will always use a float before I absolutely position something. With floats I still have a document full of elements that are flowing in relation to each other, which is wonderful for expandability. Absolutely positioned elements are removed from the document flow entirely.

In your example there, what do you do when you want something beneath your two positioned columns? The container is not expanding vertically with them, since they've been removed from the flow--you've got a 0-height container with a 10px margin there, and two columns exploding out of the bottom of it. You'd have to set a static height on the container, wildly limiting your options for flexible content. I'd definitely never recommend that layout for a full page.

The problem with absolute positioning like that is that it's pretty much useless for doing anything with dynamic content (unless you do some unholy Javascript hacks)

Nooooo

So, for my two-column website (if you looked at it), is my current method of using float acceptable?

 

[D4Danger]

So, for my two-column website (if you looked at it), is my current method of using float acceptable?

of course. it's your only option really*

*unless you're making something for a specific browser (like an extension or whatever)

 

[industrian]

Yikes. I will always use a float before I absolutely position something. With floats I still have a document full of elements that are flowing in relation to each other, which is wonderful for expandability. Absolutely positioned elements are removed from the document flow entirely.

In your example there, what do you do when you want something beneath your two positioned columns? The container is not expanding vertically with them, since they've been removed from the flow--you've got a 0-height container with a 10px margin there, and two columns exploding out of the bottom of it. You'd have to set a static height on the container, wildly limiting your options for flexible content. I'd definitely never recommend that layout for a full page.

I've used it for a small right column in a responsive layout. The problem as already documented is that the left area must always be the same height or larger otherwise the below divs just run into it. But that's a content issue that's solved easily.

Personally I'd use display:inline-block; for positioning, but there was an issue I was having that was fixed with nesting absolutes within a relative.

Oh god yes lol. Can't even use background images because of Outlook 2007 and 2010!

To this day I will never understand why Microsoft chose to use the same HTML renderer in Outlook as they did in fucking Word.

So, for my two-column website (if you looked at it), is my current method of using float acceptable?

The key phrase in web development: if it works, it works.

 

[J-Rod]

Are tables acceptable for data entry screens where you have a lot of pairs of label + controls? I'm not a web dev, but I'm having to build a web app for work and the most web I've done are some simple websites meant to host a handful of custom reports. I'm having trouble getting it to behave the way I want it to with just divs.

 

[Sanic]

How much of a crutch are things like bootstrap for ground-up designs?

It makes everything so much easier, and when customized it can look different enough to not make everyone say that you're using bootstrap.

I just feel like I'm losing my macho card for using it or something. Then I have to make a responsive, muti-column design and I say to myself "nope back to bootstrap".

 

[reilo]

The key phrase in web development: if it works, it works.

Spoken like a project manager.

 

[Lennington]

The worst thing about CSS is the new 'easiest-bestest-framework-ever' that gets whored around every week or so. Most of them just jam together the most convoluted and unsemantic code imaginable.

It's no wonder people get frustrated when techniques that nest divs with ridiculous names like '2-col' and '4-col push' gets passed around as examples of how it should be done.

 

[Maiar_m]

How much of a crutch are things like bootstrap for ground-up designs?

It makes everything so much easier, and when customized it can look different enough to not make everyone say that you're using bootstrap.

I just feel like I'm losing my macho card for using it or something. Then I have to make a responsive, muti-column design and I say to myself "nope back to bootstrap".

I use foundation from time to time and it's not a macho-killer. You're just being efficient, what's wrong with that? Do you code all your javascript tools such as sliders and so on because jQuery makes it "too easy" ? I doubt it !

 

[pxleyes]

Yes. Its by our client's request. (Its a school project)

I request your team grows a pair and tells them 'no'. This is a lesson in how to save clients from themselves and how to remind them YOU are the expert.

 

[Dinosur]

I request your team grows a pair and tells them 'no'. This is a lesson in how to save clients from themselves and how to remind them YOU are the expert.

The world would be a better place if clients ever believed we were the expert.

 

[Septimius]

Oh, god. I'm so happy I don't work with you.

Yes, CSS is bad. If you bother researching, though, you get away from most of the hassle. So long as you stay away from floating elements, and get a good understanding of stacking, flow and the different types of elements, it's quite simple.

You sound like a guy that just refuses doing things the smart way "because it's too much hassle". So long as you know inline-block only works with already inlined elements in IE7, then browser consistency is really easy, so long as you don't mess up your own page.

It's when you start jumbling up things you don't really know about, using them in ways they weren't meant, that you get page inconsistency. Believe me, I hate IE with a passion, but aside from border-radius, I know why things break in IE7 and how to deal with it.

 

[Septimius]

Yes. Its by our client's request. (Its a school project)

Yes, use Facebook comments.

 

[reilo]

Yes, use Facebook comments.

That's a great idea, actually.

https://developers.facebook.com/docs/reference/plugins/comments/

 

[Somnid]

Are tables acceptable for data entry screens where you have a lot of pairs of label + controls? I'm not a web dev, but I'm having to build a web app for work and the most web I've done are some simple websites meant to host a handful of custom reports. I'm having trouble getting it to behave the way I want it to with just divs.

Probably not unless it's supposed to display like a spreadsheet. Typically for forms you'd use an <input> with a corresponding <label>, you can further group them with the <fieldset> which is basically just a semantic div. It might also make sense to use <ul>/<ol> if it's in a list format.