Hey /g/ How long/how many lines of CSS should it take to create

>>56965747
oh ok ty anon

>>56965740
christ anon I thought it's some Mondrian painting

>>56965740
do your homework yourself and stop cheating so you might actually learn something, don't blame your fucking teacher pussy

>>56965771
yeah it's supposed to look like that, professor is Dutch haha

>>56965787
I'm trying but I'm asking if anyone has tips or anything for writing shit like this because as I said, he's Dutch so it's hard to follow what he says. I'm not blaming him, accents are difficult for me to hear though. Don't be so upset anon, it's not good for your heart.

>>56965740
I think it just takes a shitton of lines.

For each box, you need to specify:

1. position
2. size
3. color

so it'll take about #boxes * (#linesForPosition + #linesForSize + #linesForColor)

You might find a way to creatively use css to reduce the amount of lines needed for one of those three things, but I don't know.

>>56965890
yeah, that's more or less what I've been doing and have ended up with a shit ton of code, thanks though.

after the first row it's essentially just a shitload of copy/pasting with minor tweaks I suppose.

>no HTML grids or anything
HTML tables were still HTML last time I checked

>>56965740
I don't get it, just make:

- 3 classes for colors:
> one for red, one for yellow, one for blue
> white is default anyway
- 2 classes for widths:
> one for 1:1 width, other for 1:3
- 3 classes for heights:
> one for 1:1, one for 1:2 and one for 1:3

And you're done. just a few more for positioning.

I think 100 lines of CSS would be more than enough. And that is with brackets on separate lines.

>>56966043
yeah this is a bit better.

Why not flexbox.

>>56966043
thanks for your help dude.

Do you have any tips on positioning stuff? I've been doing it in a really fucked up way, dicking about with the width of boxes and borders in order to make the smaller boxes fit under one another

>>56965817
what school do you go to? i had to do the same thing

>>56966295
Algonquin College in Ottawa

when did you do it? Like this year?

>>56966408
yes

>>56966421
neat, same school?

how many lines of CSS did you do it in?

>>56965740
1 div for each square in the image,1 extra as the container

The container should be relatively positioned and the squares should all be absolutely positioned

Then just set the, border, size, and background color properties on the squares

Should be fairly simple

>>56966503
different school
i used tables to do it

>>56966175
Not widely supported

Is CSS the most inefficient and illogical formatting method ever devised?

>>56966582
That would be js

>>56965817
>haha

Stop this normie shit, you're not on facebook.

>float and clearfix
Y

>>56966628
this, not a good habit to get into OP

File: 1475709090728.gif (897KB, 250x376px) Image search: [Google]

897KB, 250x376px

>>56965740
Very little CSS. Just need a class for each of the width and height units as well as the color. Oh and one global style for the outlines. The rest is HTML.

Also you're the reason people make fun of college graduates. No skills.

Hey OP, in Highschool (8 years ago), I taught myself CSS. Its been years since I have even looked at CSS, but im wondering if I can still read it. When you finish can you upload the code to pastebin? I also see that someone mentioned a slightly better way, so if you can upload your first attempt as well that would be nice. I have no idea what clearfix is.

>>56966571
Only not supported in older browsers (<IE9), anon...

>>56966833
Pretty sure Firefox is the only one that supports it

>>56968019
... Firefox? Firefox only supports it with the -moz- prefix. Edge and Chrome support it without any prefixes. Can't speak for Opera, but that's like what, 1% of the userbase?

>>56968177
Never mind I'm retarded. I'm no web dev I just remember seeing something about that a while ago. Guess it was something else and not flexbox

>>56966628
>>56966650
because that's what my professor wants. I agree that its stupid, I'm likely never going to use it again after this assignment

File: 1345932522572.png (595KB, 1920x1200px) Image search: [Google]

595KB, 1920x1200px

>>56966650
do people not use float anymore? I use it in my navbars all the time

>>56966271
Are you allowed to use flex-boxes? It is a recent (like a year recent) CSS feature.

If so, check this out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Check the flex-direction property, and also the whole thing in general. May take a while, but it is not that so hard to comprehend. In fact, rather intuitive.

Didn't think that the thread would live any further so I had left.

>>56966611
What, should he put "lol"?

Autists gonna aut

>>56965740
Only one line is necessary if you really want to

>>56966271
#container{
position: relative;
}

.box{
position: absolute;
}

#box2{
left: (width of box1);
}

etc

>>56965740
You don't need that much css

Here's my try. You could probably do it with less html, but this seemed like the simpliest way
https://jsbin.com/gaheriqugi/1/edit?html,output

File: yes.gif (2MB, 158x158px) Image search: [Google]

2MB, 158x158px

>>56969768
minor change to borders to make it fit the picture a little better
https://jsbin.com/jiqilurupu/1/edit?html,output