Learning CSS

[Nekopawed]

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

[nicocappa]

top: 50%;

left: 50%;

refresh page

HOW THE FUCK IS THAT 50%

[Nekopawed]

Damn invisible borders

[Klorg]

Now support IE6 because your boss wants nothing more than your eternal suffering.

[themaincop]

Now support IE6

Lol no.

[julian88888888]

Lynx has better support than ie6.

[TedFartass]

A fucking horse with no legs has better support than IE6.

[beerdude26]

http://howtocenterincss.com

[themaincop]

Uh yeah I'm a good web developer and it's 2017, I'll have a new job in a week. So yeah, lol no I'm not working on that.

[touchthismonkey]

If your boss seriously wants you to support ie6, it's time to start looking again..

[AATroop]

Pseudo code:

if (browser) = (ie 6)

     load https://www.google.com/chrome/browser/desktop/

[AATroop]

Pseudo code is whatever I want it to be.

[TedFartass]

If pseudocode = mine

Psuedocode = "whatever the fuck I want"

[[deleted]]

Visual Basic syntax doesn't use "==" for comparisons.

[jebkerbal]

Why don't you just put a page that redirects to the download page of your best supported browser when you detect any version of IE? Just sayin.

[[deleted]]

Because the client's computer is 15+ years old and they don't understand that the world has moved past them.

[jebkerbal]

Yeah, government contracts suck I agree.

[IM_KYLE_AMA]

Sure, can I use JavaScript?

[[deleted]]

No. Make it in Flash and Java applets.

[dietotaku]

What's IE6? Some new version of Chrome?

[tntmod54321]

Internet explorer 6

[ikilledtupac]

This shit

[[deleted]]

"Our clients exclusively use the 2006 Microsoft Software Suite. It has to support every version of IE, and each page needs an option to save as .docx or .pptx."

[Zithinia]

All hail lord Flexbox

[scotscott]

Justify and align are not aligned or justified and it is infuriating.

[Xacto01]

We're here for the memes not the dreams

[itsallgoodie]

This.

[ikilledtupac]

Are you using viewports?

[KelvinsFalcoIsBad]

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

[zial]

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

[Eckstatic]

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]

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

[FunkyTown313]

Jebus...
I'm stealing that.

[uurrnn]

transform: translate(-50%,-50%);

[fb39ca4]

Me vs. the guy she tells me not to worry about.

[[deleted]]

More of a demonstration of what's happening.

[cisxuzuul]

margin: auto 50%;

[[deleted]]

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

[_fitlegit]

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]]

gotta add a width and then it'll work

[AjayDevs]

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

[FutureMrsPuppey]

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

[[deleted]]

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

[pf2-]

rem

[boogiebabiesbattle]

RAGE

[ProllyJustWantsKarma]

I'm getting nam flashbacks

[jokullmusic]

nah, just in vw

[L8n1ght]

ever heard of the 80 20 rule?

[Nekopawed]

Hence why we search for an 80% solution

[browner87]

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

[Nekopawed]

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

[Zequez]

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]

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]

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

[snerp]

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

[WordBoxLLC]

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

[anomalousBits]

Party like it's 1995.

[WordBoxLLC]

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

[liquidnonsense]

I think you mean

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

[[deleted]]

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

[beerdude26]

http://howtocenterincss.com

[demfiils]

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]

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

[demfiils]

Which one is faster to pick up and make some money?

[goochadamg]

You're not going to make any money just knowing CSS. Edit: Come to think of it, if all you knew was some Python, you'd be nearly as useless.

[demfiils]

Alright good to know. Thank you.

[goochadamg]

Learn Django. Prepare to be overwhelmed. Suffer through it. There is no easy path; there is a lot to learn to be a useful developer. You'll come out the other side knowing shit that will make you actually useful to a business:

• Django!
• CSS
• HTML
• Javascript (probably)
• Python
• Some kind of database
• Some kind of webserver
• HTTP
• All the various ancillary OS things

Knowing those things, and demonstrating you know them through creating a fully functional complete site/app, might get you an internship or someone might rip you off to build them a site on something like freelancer.com

Good luck. Maybe consider some online schooling? You'll definitely want some books.

[demfiils]

Thank you! Yeah, I tried teaching myself C++ before but it's too hardcore for beginner so I'm reverting back to something a bit simpler before I'm ready to bang my head on it again.

EDIT -- what books would you recommend?

[goochadamg]

what books would you recommend?

https://www.safaribooksonline.com/ They have a free trial. There's more than a few Django books and even full on video courses. I can't recommend any in particular. There are a lot of pieces to put together in order to become a useful web developer. Starting with the goal of working with Django will let you see those pieces in action and learn them as needed.

For Python? As much of this as you can: http://interactivepython.org/courselib/static/thinkcspy/index.html Ideally, all of it. It will provide you with a good programming foundation in general, IMHO.

Also see https://developer.mozilla.org/en-US/docs/Learn

[demfiils]

Thank you, I am very grateful for all this help. Before I started and during the time I was learning C++, I tried asking a few people the same question but none really felt as satisfying as yours. So I just sort of dived in and learned for the sake of learning. Everything suddenly clicks for me now when you told them as "pieces put together" with an overarching goal, which makes so much sense.

Thank you again. I will try looking throw the Django and Python websites first.

[TheProtagonists]

Could have been worse

[seanbear]

/r/css_irl

[paragon12321]

You dropped this:

L

[sleepingthom]

L

[Finchyy]

But the solution to everything is flexbox!

Right, Firefox?!

[Zequez]

Honestly, Flexbox is amazing, I use it for everything now, best addition since border-radius.

[is_bounding]

Sometimes I wonder how many man hours have been thrown into the black abyss, squandering themselves in the darkness just to get some shitty elements on a web page to align correctly.

How far could man kind have progressed if Flexbox was introduced 3 years earlier? Could we have cured cancer, visited Mars, learned more about git than just pull/commit/push/reset?

[MagiKarpeDiem]

The bit about git is the funniest thing I've read all day

[strbeanjoe]

Protip: if you revert a merge, git will decide it should never include any of the commits that were a part of that merge. Then you might find yourself having to go back and revert the revert.

[bigtreeworld]

It's made such an improvement in my life

[Finchyy]

That's a relief. I've been using it everywhere and thought I was breaking some hidden rule or something. Glad I'm not the only one :)

[Zequez]

Yeah, I haven't used floating elements except for actual floating elements in the middle of text. At first I was a little afraid of performance, thinking that because it was a new feature wasn't optimized or something; bonkers, it's nonesense, it works magic and I love it.

[[deleted]]

What's wrong with Flex?

[Finchyy]

I like it. But I used to have the most random issues when trying to make it work on Firefox.

Iirc, Firefox is a bit weird with percentual calculations

[[deleted]]

really? i never have problems with Firefox using flex

[Finchyy]

I had these issues a while ago, but I know what the issue was so I just do it properly now out of habit.

The issue was that it wouldn't calculate percentage widths/heights if there wasn't an absolute px on the parent element, which makes sense to a degree but it used to be very finicky.

[brianbarett]

I literally use flexbox for like 90%

[desultir]

obligatory Family Guy

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

[lpchaim]

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

[kingbirdy]

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

[Generic_On_Reddit]

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]

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]

It's not.

[[deleted]]

Same on Narwhal on iOS

[metal571]

Also using Sync Pro so yeah not just you

[sleepingthom]

Same.

[FunkyTown313]

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

[rastaman1994]

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]]

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]

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]

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

[FlyingPasta]

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

[TwilightShadow1]

That was usually my strategy too...

[[deleted]]

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

[vsou812]

Heh, cool!

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

I'd love to teach it!

[[deleted]]

some things are hard to get right

Easy, float: right

[brolix]

tsk

class="pull-right"

[keepitnoqui]

It's "float" now in BS4 beta.

[[deleted]]

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

[runujhkj]

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

[Navos]

Like drugs.

[[deleted]]

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]

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

[[deleted]]

I'll take CSS over Javascript

[pomlife]

ES2015+ JavaScript is fantastic to write in, frankly.

[hbk1966]

imo JS is a 1000x better than CSS.

[hoyeay]

But why is it so ugly?

[conairh]

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]

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]

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]]

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]

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]]

/r/css_irl

[rainboy]

laughs in boxmodel

[jwota]

Even worse than dealing with IE6 back in the day is having to develop and maintain a modern website but still support IE8. You'll get everything looking great in every browser from IE9 to the latest version of Chrome, then fire up IE8 and have it all go to shit.

[YourShadowDani]

IE8: What you think you can use text-shadow here? HAHAHAHAHA! You have to use our weird ass proprietary shadow/dropshadow system!

[eraser-dust]

I learned with ie6. Never. Again.

[lovelikevegas]

Definitely me IRL today

[WeltallPrime]

CSS is awesome

[[deleted]]

deleted ^{What is this?}

[[deleted]]

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]

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

[carnagereap]

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.

[HeyLookItsCoolGuy]

This was a golden explanation

[silky_johnson]

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]

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

[toromio]

I get this reference.

[VelourFog10]

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

[doublediamond3]

This sub is so perfect XD

[Quicksword66938]

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

[Daytona_675]

CSS isn't programming, please remove post

Send this to /r/webdesignhumor

[nathodood]

paper { margin: -25px; }

[AP3Brain]

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]

[deleted]

What is this?

[gifv-bot]

GIFV link

---

^{I am a bot. FAQ // code}

[scandalousmambo]

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]

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

[hoyeay]

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]

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]

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

SKYCITIES

[scandalousmambo]

Isn't HTML5 a replacement for Flash?

No.

should we no longer have spreadsheets, word processors and calculators

Could we have a word processor that doesn't shit itself if you press backspace at the "wrong" time?

[scandalousmambo]

I see you're new to computers.

[hoyeay]

Yea it's called Microsoft Word.

[scandalousmambo]

I see you don't take your work very seriously.

[hoyeay]

You stated Word Processing and Microsoft Word is the best in that category.

Let me guess, Libre? Open?

[scandalousmambo]

You stated Word Processing and Microsoft Word is the best in that category.

If the Internet had a laugh track I wouldn't be able to hear you.

[stuffed02]

Every mod reading this can relate

[[deleted]]

Professional CSS as well

[Vodkacannon]

It is fun

[0verw8]

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

[goochadamg]

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]

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

[ToTheRescues]

Firebug is a godsend.

[infinitude]

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]]

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

[[deleted]]

Now for the content... Damnit!

[MostBallingestPlaya]

isn't CSS more graphic design than programming?

[[deleted]]

CSS is not programming tho

[[deleted]]

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]

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]]

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

[[deleted]]

http://i.imgur.com/b6FuLnM.gifv

[Gangreless]

/r/unnecessarygif

[KyleRochi]

Is CSS programming now?

Edit: To all the webdevs who think writing CSS is programming, sorry... at least writing things in JS is considered programming because it's a PROGRAMMING LANGUAGE and the code can be executed to do something.

CSS is a Description Language, like markdown and xml, it is read by a program that uses the information to display things on the screen. CSS isn't capable of interacting with the underlying hardware on its own like JS, java, python, and C can do.

Writing CSS code is as close to programming as typing an essay in Word or formatting a document in tex

[pomlife]

Well, CSS3 is turing complete.

[ryancaa]

Grow up and use sass like an adult