Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The complete guide to centering a div

tipue.com

Post reply on HN
Print view View original

151–160 of 170 posts

Re: The complete guide to centering a div

#151

Post by chrisdevereux »

coldtea wrote: post #132
crazygringo wrote: post #42

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?

CSS was created for styling. Bold, colors, borders, that stuff. It was not meant as a layout engine. Hence the name, of course. Floats were meant for other stuff (placing pictures in the flow of text and such). They are just as much as an abuse as using tables was for layout. But tables, at least, had one thing going for them: they are an almost feature full layout system for most needs, with sane defaults, and famil…

> the whole idea of "semantic html" is another cargo-cult -- people conflating the webpage (a presentational output) with some intermediate format, forgetting that REST, JSON, DBs et all are far more appropriate for that repurposing of content.

Exactly right. The semantic content is structured data, not HTML. If you want to decouple semantic content from presentation, that's what your API is for. HTML is a presentation format.

Re: The complete guide to centering a div

#152

Post by lisper »

leephillips wrote: post #150
lisper wrote: post #34

I wrote this five years ago. I'm somewhat dismayed at how relevant it still is today: http://www.flownet.com/ron/css-rant.html

That article, and especially the second followup, are brilliant. Well argued, sharply written.

Thank you!

Re: The complete guide to centering a div

#154

Post by sopooneo »

jimhart3000 wrote: post #140
sopooneo wrote: post #105

Earlier quoted context omitted.

Why do people care about screen readers? Is it because they are good people and want to make sure sight-impaired visitors are able to access their content? Or is it because they have contracts that require 508 compliance?

Why does it matter why they care? Does doing it for 508 compliance somehow make it less important? It's simply the right thing to do.

I ask purely out of curiosity, not because I think the answer should affect my, or anyone else's, actions.

Re: The complete guide to centering a div

#155

Post by pjmlp »

robmcm wrote: post #145
pjmlp wrote: post #144

Earlier quoted context omitted.

This is why, even though I have been doing on and off web development since 2000, I jump of joy when allowed to do native UI coding instead.

Most native frameworks provide tools to position elements, although at the end of the day they are just positioning things on an x,y,z axis. Using CSS and JS you can do the same thing, respond to events and re-position your elements. The problem is, people get preachy about how you shouldn't use JS for this, because websites should be progressive and degrade gracefully. Native code doesn't have this problem as much a…

My main problem is not only layout, but the whole design stack.

I do like UI programming, but like many of us I am a bit lacking in the design area.

Native toolkits allow me to ramp up pretty quickly UI thanks to components and layout managers. When something is missing I can drop down to pure graphics programming.

With web designs, it doesn't matter how much I try, without the help of a designer guy on the team, I always end up hacking around until something kind of works, repeating it ad nauseum for all required platforms.

Re: The complete guide to centering a div

#156

Post by etler »

benihana wrote: post #103
crazygringo wrote: post #42

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?

Anytime someone says CSS is well designed, ask them how to vertically center something and look at their face as they go through the five stages of grief. I'm pretty good at CSS I suppose, and it's not something you can learn logically and progressively. You have to learn all the weird nuances and quirks of it as well as the syntax. EDIT: speaking of CSS, if you want to know true pain and nothingness, try making resp…

Not too long ago I saw the best simple solution to vertical centering. It was so obvious:

position: absolute;

top: 50%;

transform: translateY(-50%);

Translate is processed at the end, meaning it is based on the final element height. This means it works with any element, even dynamic heights. Of course it only works on relatively new browsers, but translate is well accepted and on the path to being ubiquitous. The style is also easy to understand and isn't hacky.

I think the parts of CSS that are designed are well designed (considering how hard the problem space is). However, lots of CSS just wasn't designed at all. It was just everyone throwing in their conflicting specs and implementation without any coordinating. But that was pretty much all of the web. All things considered, I think we're not too bad off considering how crazy things were in the early days.

Also, any time anyone complains about CSS, I just show them some pre-css code with `` tags and `bg-color` properties and insane tables. That gets them to shut up pretty quickly. :)

Re: The complete guide to centering a div

#157

Post by etler »

coldtea wrote: post #132
crazygringo wrote: post #42

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?

CSS was created for styling. Bold, colors, borders, that stuff. It was not meant as a layout engine. Hence the name, of course. Floats were meant for other stuff (placing pictures in the flow of text and such). They are just as much as an abuse as using tables was for layout. But tables, at least, had one thing going for them: they are an almost feature full layout system for most needs, with sane defaults, and famil…

Semantic HTML isn't about formatting HTML as a data format. That's not what HTML is. It's about formatting HTML as a sane to read document. It makes it more accessible, more understandable, and easier to develop when the structure makes sense and isn't full of hacks.

Re: The complete guide to centering a div

#158

Post by etler »

stdbrouw wrote: post #149
coldtea wrote: post #132

Earlier quoted context omitted.

CSS was created for styling. Bold, colors, borders, that stuff. It was not meant as a layout engine. Hence the name, of course. Floats were meant for other stuff (placing pictures in the flow of text and such). They are just as much as an abuse as using tables was for layout. But tables, at least, had one thing going for them: they are an almost feature full layout system for most needs, with sane defaults, and famil…

You seem to be very upset about all of this... The nice thing about semantic HTML is that any metadata and structured data is a part of the document itself instead of hidden away somewhere else through an API. This has its disadvantages (I'd rather interact with an API than scrape a website, even if it's all tidy and semantic) but it absolutely also has advantages. The usual alternative to semantic HTML is not a well…

I write my HTML semantically primarily for myself. It's far easier to read, debug, and develop when the structure makes sense and isn't littered with a dozen nested divs with incredibly complicated class names.

Re: The complete guide to centering a div

#159

Post by unclebucknasty »

robmcm wrote: post #146
unclebucknasty wrote: post #130

Earlier quoted context omitted.

Exactly. I mean, I get the part where people are against layout with tables in principle. I just hate the part where they act like CSS is a good alternative in practice.

Even better is to draw everything in a canvas!

To that point, no human should have to work directly with CSS for layout!

Re: The complete guide to centering a div

#160

Post by coldtea »

etler wrote: post #157
coldtea wrote: post #132

Earlier quoted context omitted.

CSS was created for styling. Bold, colors, borders, that stuff. It was not meant as a layout engine. Hence the name, of course. Floats were meant for other stuff (placing pictures in the flow of text and such). They are just as much as an abuse as using tables was for layout. But tables, at least, had one thing going for them: they are an almost feature full layout system for most needs, with sane defaults, and famil…

Semantic HTML isn't about formatting HTML as a data format. That's not what HTML is. It's about formatting HTML as a sane to read document. It makes it more accessible, more understandable, and easier to develop when the structure makes sense and isn't full of hacks.

That's also wrong. HTML is not the document to read.

HTML is a MARKUP format. The document you're meant to read is it's rendered output in the browswer.

In fact the original TBL's HTML vision included tools to work on the HTML, not manually editing/reading the code.

Post reply on HN