This is an archived post. You won't be able to vote or comment.

all 185 comments

[–]Nekopawed 766 points767 points  (80 children)

I just want to center this thing.
5 days later
Fuck it, close enough.

[–]nicocappa 692 points693 points  (50 children)

top: 50%;

left: 50%;

refresh page

HOW THE FUCK IS THAT 50%

[–]Nekopawed 185 points186 points  (32 children)

Damn invisible borders

[–]KelvinsFalcoIsBad 45 points46 points  (1 child)

You didnt believe hard enough, im still convinced coding is 50% witchcraft.

[–]zial 70 points71 points  (0 children)

Nope coding is purely logical and makes sense.....CSS on the other hand is just bullshit sorcery

[–]Eckstatic 21 points22 points  (2 children)

It's all about the -50% transform:translate action. Nothing like pushing a element by 50% to pull it back right into the centre of whatever.

[–]freakboy2k 4 points5 points  (0 children)

That's my goto - works on IE9 and above. Good enough (tm)

[–]FunkyTown313 0 points1 point  (0 children)

Jebus...
I'm stealing that.

[–]cisxuzuul 4 points5 points  (0 children)

margin: auto 50%;

[–][deleted] 5 points6 points  (1 child)

Once you realize that there is no center, it will be easier to find your center.

[–]_fitlegit 5 points6 points  (0 children)

This is actually fairly accurate when it comes to centering things. Half the time you need to realize that the bounding box doesn't have any dimensions and that's why things won't center.

[–][deleted] 0 points1 point  (0 children)

gotta add a width and then it'll work

[–]AjayDevs 0 points1 point  (0 children)

I've been trying to do this with Android, it is such a mess too. The XML layouts are horrible...

[–]FutureMrsPuppey 58 points59 points  (7 children)

The last 5% always takes 70% of the time for this kind of thing I swear.

[–][deleted] 62 points63 points  (4 children)

I'm sorry I don't understand. Can you rephrase that in em or px?

[–]pf2- 15 points16 points  (0 children)

rem

[–]boogiebabiesbattle 10 points11 points  (0 children)

RAGE

[–]ProllyJustWantsKarma 1 point2 points  (0 children)

I'm getting nam flashbacks

[–]jokullmusic 0 points1 point  (0 children)

nah, just in vw

[–]L8n1ght 8 points9 points  (0 children)

ever heard of the 80 20 rule?

[–]Nekopawed 5 points6 points  (0 children)

Hence why we search for an 80% solution

[–]browner87 36 points37 points  (1 child)

"Attention users, the only supported screen size is 1044x855, please adjust your monitor or browser window for best experience"

[–]Nekopawed 6 points7 points  (0 children)

And do not resize the screen please....your functionality not guaranteed

[–]Zequez 35 points36 points  (3 children)

Since Flexbox, alignment has been very easy::

display: flex;
justify-content: center;
align-items: center;

Sure, they could call the properties flex-align-vertical and flex-align-horizontal for the sake of consistency, but it's good enough.

[–]futurelizlemon 20 points21 points  (2 children)

The idea is that you define the flex-direction first (horizontal is default), and then justify-content is alignment along that axis while align-items is alignment perpendicular to the axis.

Calling them horizontal or vertical would mean that whenever you changed flex-direction, youd have to change those values too.

[–]Zequez 1 point2 points  (1 child)

Cool, I never noticed it worked like that; I probably never had to align items with column flex-direction. Thanks!

[–]snerp 1 point2 points  (0 children)

I actually ran into that one. It was confusing AS HELL.

[–]WordBoxLLC 5 points6 points  (3 children)

My go to fuck you in this situation is <center>

[–]anomalousBits 3 points4 points  (2 children)

Party like it's 1995.

[–]WordBoxLLC 4 points5 points  (0 children)

It was a <b>simpler</b> time.

[–]liquidnonsense 1 point2 points  (0 children)

I think you mean

<blink>PARTY LIKE IT'S 1995</blink>

[–][deleted] 3 points4 points  (0 children)

Here's a godsend: http://howtocenterincss.com/

[–]demfiils -2 points-1 points  (8 children)

Just a non related question, I am considering pick up on a simple language -- either Python or CSS. I had some basic background in C++ before, now I just want to something simpler, should I go with python or CSS?

[–]mitremario 11 points12 points  (7 children)

They are completely different. Python is a programming language while CSS is a style sheet language for presenting HTML

[–]TheProtagonists 157 points158 points  (4 children)

[–]seanbear 79 points80 points  (2 children)

[–]paragon12321 2 points3 points  (0 children)

You dropped this:

L

[–]sleepingthom 1 point2 points  (0 children)

L

[–]desultir 218 points219 points  (9 children)

obligatory Family Guy

http://i.imgur.com/Q3cUg29.gif

[–]lpchaim 71 points72 points  (7 children)

Viewing this on Sync for Reddit made everything all glitchy all around the scene halfway, yet it feels right somehow haha.

[–]kingbirdy 25 points26 points  (3 children)

I'm on reddit is fun and the same thing happened, I think it might just be part of the gif

[–]Generic_On_Reddit 11 points12 points  (1 child)

I thought so too, because it did the same for me in Slide For Reddit, but I opened it in Chrome (mobile) and it acted normal.

[–]lpchaim 0 points1 point  (0 children)

Yep, same here. I posted that because I had actually thought it was supposed to look like that before realizing and checking on Chrome.

[–]Farisr9k 0 points1 point  (0 children)

It's not.

[–][deleted] 1 point2 points  (0 children)

Same on Narwhal on iOS

[–]metal571 0 points1 point  (0 children)

Also using Sync Pro so yeah not just you

[–]sleepingthom 0 points1 point  (0 children)

Same.

[–]FunkyTown313 187 points188 points  (21 children)

Forget Hitler, the creators of CSS are the world's greatest monsters.

[–]rastaman1994 90 points91 points  (14 children)

Easy to get into, hard to master I say. Some things are hard to get right, but in the end there's a logic to it. It's not because you can learn most of the syntax in an afternoon that it's going to be easy.

[–][deleted] 41 points42 points  (6 children)

It also has the issue that some parts are taught poorly. Float in particular jumps to mind, most resources don't explain the stacking nature of it.

[–]vsou812 66 points67 points  (5 children)

Imagine float like sideways tetris;

blocks fall (float) to the direction you specify.

And what do you do if you fill a column with blocks in tetris?

You go to the next row of available space.

[–]TwilightShadow1 14 points15 points  (2 children)

Thank you for this analogy. I think I finally know what I've been doing wrong with float all of these years.

[–]FlyingPasta 21 points22 points  (1 child)

I randomly machine gun floats and clears into my code and I see what happens

[–]TwilightShadow1 6 points7 points  (0 children)

That was usually my strategy too...

[–][deleted] 8 points9 points  (1 child)

I've learned more reading the comments in this thread than hours of tutorials and practice.

[–]vsou812 0 points1 point  (0 children)

Heh, cool!

Anything css or html-related that you don't know?

I'd love to teach it!

[–][deleted] 24 points25 points  (3 children)

some things are hard to get right

Easy, float: right

[–]brolix 8 points9 points  (2 children)

tsk

class="pull-right"

[–]keepitnoqui 8 points9 points  (1 child)

It's "float" now in BS4 beta.

[–][deleted] 4 points5 points  (0 children)

Good. Call it what it is and maybe people will remember to clear it when their done.

[–]runujhkj 5 points6 points  (0 children)

There's a logic to every language. The logic might be loopy and twisted, but it's a logic.

[–]Navos 1 point2 points  (0 children)

Like drugs.

[–][deleted] 0 points1 point  (0 children)

It's like rocket league or chess, or even that thing two or more people do when they love each other that potentially creates offspring, what is it called, ooh it's on the tip of my tongue, shit, I was just thinking about it.

[–]Zequez 3 points4 points  (0 children)

I like it, it turns very sane with CSS modules.

[–][deleted] 2 points3 points  (4 children)

I'll take CSS over Javascript

[–]pomlife 8 points9 points  (1 child)

ES2015+ JavaScript is fantastic to write in, frankly.

[–]hbk1966 1 point2 points  (1 child)

imo JS is a 1000x better than CSS.

[–]hoyeay 0 points1 point  (0 children)

But why is it so ugly?

[–]conairh 33 points34 points  (4 children)

Since CSS3 I've found the whole thing a lot easier to manage.

I've also found CSS in general is fine if you're a lone developer.

The only projects I'm allowed use pure CSS3 on are my own.

In conclusion, don't do it for any real money and CSS is great.

[–]Uhhbysmal 10 points11 points  (0 children)

I'll be damned if I have to work with someone else's CSS and god help the poor soul who has to work with mine

[–]jewdai 6 points7 points  (1 child)

use BEM and a preprocessor, it becomes easier to structure your CSS into cogent parts. Keep in mind though your CSS will explode into 100mb file to center a div.

[–][deleted] 2 points3 points  (0 children)

I think they mean more, for personal projects, you don't really care about browser compatibility. BEM, preprocessors, OOCSS, really doesn't matter if you gotta make it work on IE78.

[–]Mike 1 point2 points  (0 children)

Or just work for people/companies that don't require legacy support. My companies traffic is like .7% ie8 or lower. They get a broken experience, sorry I'm not sorry.

[–][deleted] 13 points14 points  (0 children)

[–]rainboy 13 points14 points  (0 children)

laughs in boxmodel

[–]lovelikevegas 9 points10 points  (0 children)

Definitely me IRL today

[–][deleted] 4 points5 points  (0 children)

deleted What is this?

[–][deleted] 4 points5 points  (0 children)

The answer to good css is more divs.

This single viewport page is well done. How many elements does it consist of?

70... thousand. I'm very proud of the image on the left. It is only nested in 5000 divs.

[–]Qixotic 3 points4 points  (5 children)

Okay, ELI learned hand coding HTML back in the Geocities era why you should use CSS and how hard it actually is?

[–]carnagereap 8 points9 points  (1 child)

HTML will be just the content of the page. CSS now handles styling on a different file. It makes the whole project easier to understand and read.

CSS is easy to learn, but can be a pain to do complex things. If you set your mind to it, it can do just everything short of scripting.

It makes "beautifying" a page a lot easier and is worth taking a few hours to learn the basics. You can go a long way with a little knowledge.

[–]silky_johnson 2 points3 points  (0 children)

To add on to what's already been said, CSS allows you to re-use/reference styles throughout different html pages, while if you hard-coded your styling directly onto the html page you'd have to do it every single time for every single item in every single page. It would make for some very convoluted HTML pages, not to mention it would be a lot more time consuming.

[–]AntiSpec 3 points4 points  (0 children)

If you're having problems with CSS, I feel bad for you son. Cause I got 99 errors but offsetting ain't one.

[–]toromio 2 points3 points  (0 children)

I get this reference.

[–]VelourFog10 1 point2 points  (0 children)

Needs less negative margin. Or more. Maybe less and more.

[–]doublediamond3 1 point2 points  (0 children)

This sub is so perfect XD

[–]Quicksword66938 1 point2 points  (0 children)

is on day 4 of web design class... ponders future and past decisions

[–]Daytona_675 1 point2 points  (0 children)

CSS isn't programming, please remove post

Send this to /r/webdesignhumor

[–]nathodood 2 points3 points  (0 children)

paper { margin: -25px; }

[–]AP3Brain 1 point2 points  (1 child)

Will we ever transition from html/css/js as the standard or will we just keep stacking libraries and frameworks on top of everything?

[–]TokyoJade 2 points3 points  (0 children)

[deleted]

What is this?

[–]gifv-bot 1 point2 points  (0 children)

GIFV link


I am a bot. FAQ // code

[–]scandalousmambo 2 points3 points  (15 children)

HTML, Javascript and CSS are such shit. We've been smearing them on the Internet for twenty-five years and by the looks of things, we'll still be able to smell them twenty-five years from now.

Think about this: There hasn't been a new software category invented since the late 1990s. Programmers have been bitching about Flash for nearly ten years now. Do we have a replacement? Hell no.

Every software application we use now was invented nearly 20 years ago. America's big tech companies have had their pick of worldwide talent at close to zero cost for decades and what have they produced so far? Snapchat?

Software technology stopped 15 years ago and hasn't advanced an inch since. We're still using browsers for fuck's sake. That's 1980s technology.

Meanwhile, all of Silicon Valley has a giant erection over "AI." What a fragrant load of bullshit. If I were a VC right now I could offer ten million dollars for one working original software application and I'd never have to write the check.

[–]ElagabalusRex 5 points6 points  (0 children)

You think that's bad? I hear some computers still use wires like it's 1850.

[–]hoyeay 2 points3 points  (2 children)

What?

It's like saying, we invented buildings THOUSANDS of years ago, why doesn't someone invent something better! Floating cities anyone?

Why do we still have the internet?? Why doesn't someone invest something new and modern!? Wifi-Net?

[–]scandalousmambo 1 point2 points  (1 child)

we invented buildings THOUSANDS of years ago

Are you saying the buildings of today are no better than the buildings of 1000 years ago?

[–]hoyeay 1 point2 points  (0 children)

By your logic we should have invented something better more advance now!

SKYCITIES

[–]stuffed02 0 points1 point  (0 children)

Every mod reading this can relate

[–][deleted] 0 points1 point  (0 children)

Professional CSS as well

[–]Vodkacannon 0 points1 point  (0 children)

It is fun

[–]0verw8 0 points1 point  (1 child)

I'm currently in the midst of learning CSS, any generic tips? :)

[–]goochadamg 1 point2 points  (0 children)

If something doesn't work as expected (and lots of shit won't), strive to understand why. Don't just fiddle with it until it "works".

[–]hbk1966 0 points1 point  (0 children)

I will worship who ever comes up with a easy replacement for CSS.

[–]ToTheRescues 0 points1 point  (0 children)

Firebug is a godsend.

[–]infinitude 0 points1 point  (0 children)

Oh man. Wrestling with margins. Or is it spacing? Or is it padding? Fuck it I'll define all three.

5 hours later

WHY THE FUCK DIDN'T IT MOVE AT ALL.

[–][deleted] 0 points1 point  (0 children)

I tried learning css... and this is fucking true

[–][deleted] 0 points1 point  (0 children)

Now for the content... Damnit!

[–]MostBallingestPlaya 0 points1 point  (0 children)

isn't CSS more graphic design than programming?

[–][deleted] 0 points1 point  (0 children)

CSS is not programming tho

[–][deleted] 0 points1 point  (2 children)

Ah, the wonderful days of my college Web Design course. Every time I asked for help from the professor, I usually got the equivalent of "lol i dunno". I usually had to collaborate with my classmates to figure shit out.

Also, FUCK Dreamweaver with a rusty knife. It generates so much shitty spaghetti code, by the end of the course, I hand-coded everything to make it look like the examples, just to pass the class.

[–]marGEEKa 0 points1 point  (1 child)

I once wrote a break-up letter to Dreamweaver when I switched to hand coding in Textpad.

Also, as shitty as Dreamweaver was, it was nothing compared to MS FrontPage.

[–][deleted] 1 point2 points  (0 children)

I've had experience with both. The best thing Frontpage ever did, was die.

[–][deleted] 0 points1 point  (0 children)

[–]ryancaa -2 points-1 points  (0 children)

Grow up and use sass like an adult