https://jsfiddle.net/Lkcm4jas/
I’m trying to do this:
400 x 400 box around the image.
css:
body {
margin: 80px;
}
.left,
.right {
display: inline-block;
}
.left {
width: 170px;
height: 239px;
margin-right: -4px;
}
div > div {
display: block;
height: 34px;
}
div > div > div {
width: 30px;
height: 30px;
background-color: red;
display: inline-block;
float: right;
margin: 2px;
}
div.right > div > div {
float: left;
}
html:
<div class="left">
<div style="padding-right: 68px">
<div></div>
<div></div>
</div>
<div style="padding-right: 34px">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<div class="right">
<div style="padding-left: 34px">
<div></div>
<div></div>
</div>
<div style="">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
What if I don’t want to use svg?
Is there a way to do it the other way?
This worked: https://jsfiddle.net/ubtczkv2/
Can this be improved?
<main class="Box">
<div class="left">
<div style="padding-right: 68px">
<div></div>
<div></div>
</div>
<div style="padding-right: 34px">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<div class="right">
<div style="padding-left: 34px">
<div></div>
<div></div>
</div>
<div style="">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</main>
.Box {
box-sizing: border-box;
width: 400px;
height: 400px;
background-color: black;
text-align: center;
padding-top: 64px;
}
body {
margin: 80px;
}
.left,
.right {
display: inline-block;
}
.left {
width: 170px;
height: 239px;
margin-right: -4px;
}
div > div {
display: block;
height: 34px;
}
div > div > div {
width: 30px;
height: 30px;
background-color: red;
display: inline-block;
float: right;
margin: 2px;
}
div.right > div > div {
float: left;
}
How would I be able to give colors to each of the boxes?
Like this?
Here done using CSS, but could be done within the HTML
Edit: Note the fill attribute has had to be deleted from line 3 of the HTML
2 Likes
PaulOB
December 3, 2024, 4:08pm
10
Archibald has offered the correct solution but just for fun here is a css version before you changed the requirements for coloured boxes.
I only post it as an example and not as a solution. Archibald’s svg is a much better method.
2 Likes
Agreed that Archibald’s solution is better (my comment for the colored version states as much), but here is a cssed, flex-y way to do both the all red version and the colored version…
2 Likes
SamA74
December 3, 2024, 5:38pm
12
asasass:
Can this be improved?
Yes: Use SVG instead of magic numbers.
1 Like
asasass
December 3, 2024, 7:48pm
13
If I want to place letters inside the boxes.
How would I do that?
sigh…critical criteria keeps changing. Things like that really should be included in your first post since that’s not a simple tweak in SVG (I don’t think).
In my html/css version is just a matter of adding the appropriate text to the appropriate div…
asasass
December 3, 2024, 8:16pm
15
How would you center the letters?
So that they are in the middle.
With standard css (which I’m 99.999% sure Paul has given to you hundreds of times before…)
.fc > * {
background-color: var(--base-color);
height: 28px; width: 28px;
text-align: center; /* center it horizontally */
line-height: 28px; /* center it vertically */
}
3 Likes
I was thinking something like this
0000000000000000000000
0000101000000010100000
0010010110001001011000
0010011101100111011000
0010011111011111011000
0000100111111101100000
0000001001110110000000
0000000010011000000000
0000000000100000000000
0000000000000000000000
Just need to figure out how to convert that sprite’s binary to colours.
00 blank
10 colour 1
01 colour 2
11 colour 3
I jest BTW, not sure this is the best approach in 2024
edit: I think I might have opened a can of worms with this
2 Likes
asasass
December 3, 2024, 9:05pm
18
If I turn it into circle, how do I hide the stuff under it?
or did I do it wrong?
PaulOB
December 4, 2024, 5:13pm
21
…and just because Christmas is around the corner
3 Likes
asasass
December 4, 2024, 8:25pm
22
That one uses p this ones uses divs.
https://jsbin.com/vifoyugusu/edit?html,css,output
With the grid code,
How do I change the colors of the boxes?
https://liveweave.com/PGNNak
looks like this now.
Like this?
p:nth-child(1) {grid-area: a2;background:green;}
p:nth-child(2) {grid-area: a3;background:green;}
p:nth-child(3) {grid-area: a7;background:green;}
p:nth-child(4) {grid-area: a8;background:green;}
p:nth-child(5) {grid-area: b1;background:green;}
p:nth-child(6) {grid-area: b2;}
p:nth-child(7) {grid-area: b3;}
p:nth-child(8) {grid-area: b4;background:green;}
p:nth-child(9) {grid-area: b6;background:green;}
p:nth-child(10) {grid-area: b7;}
p:nth-child(11) {grid-area: b8;}
p:nth-child(12) {grid-area: b9;background:green;}
p:nth-child(13) {grid-area: c1;background:green;}
p:nth-child(14) {grid-area: c2;}
p:nth-child(15) {grid-area: c3;}
p:nth-child(16) {grid-area: c4;}
p:nth-child(17) {grid-area: c5;background:green;}
p:nth-child(18) {grid-area: c6;}
p:nth-child(19) {grid-area: c7;}
p:nth-child(20) {grid-area: c8;}
p:nth-child(21) {grid-area: c9;background:green;}
p:nth-child(22) {grid-area: d1;background:green;}
p:nth-child(23) {grid-area: d2;}
p:nth-child(24) {grid-area: d3;}
p:nth-child(25) {grid-area: d4;}
p:nth-child(26) {grid-area: d5;}
p:nth-child(27) {grid-area: d6;}
p:nth-child(28) {grid-area: d7;}
p:nth-child(29) {grid-area: d8;}
p:nth-child(30) {grid-area: d9;background:green;}
p:nth-child(31) {grid-area: e2;background:green;}
p:nth-child(32) {grid-area: e3;}
p:nth-child(34) {grid-area: e4;}
p:nth-child(35) {grid-area: e4;}
p:nth-child(36) {grid-area: e4;}
p:nth-child(32) {grid-area: e3;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(34) {grid-area: e5;}
p:nth-child(35) {grid-area: e6;}
p:nth-child(36) {grid-area: e7;}
p:nth-child(37) {grid-area: e8;background:green;}
p:nth-child(38) {grid-area: f3;background:green;}
p:nth-child(39) {grid-area: f4;}
p:nth-child(39) {grid-area: f4;}
p:nth-child(40) {grid-area: f5;}
p:nth-child(41) {grid-area: f6;}
p:nth-child(42) {grid-area: f7;background:green;}
p:nth-child(43) {grid-area: g4;background:green;}
p:nth-child(44) {grid-area: g5;}
p:nth-child(45) {grid-area: g6;background:green;}
p:nth-child(46) {grid-area: h5;background:green;}
AI told me to do this:
https://liveweave.com/xeVfLl
To reduce duplication.
.heart-beat p:nth-child(1),
.heart-beat p:nth-child(2),
.heart-beat p:nth-child(3),
.heart-beat p:nth-child(4),
.heart-beat p:nth-child(5),
.heart-beat p:nth-child(8),
.heart-beat p:nth-child(9),
.heart-beat p:nth-child(12),
.heart-beat p:nth-child(13),
.heart-beat p:nth-child(17),
.heart-beat p:nth-child(21),
.heart-beat p:nth-child(22),
.heart-beat p:nth-child(30),
.heart-beat p:nth-child(31),
.heart-beat p:nth-child(37),
.heart-beat p:nth-child(38),
.heart-beat p:nth-child(42),
.heart-beat p:nth-child(43),
.heart-beat p:nth-child(45),
.heart-beat p:nth-child(46) {
background: green;
}
.heart-beat p:nth-child(1) {
grid-area: a2;
}
.heart-beat p:nth-child(2) {
grid-area: a3;
}
.heart-beat p:nth-child(3) {
grid-area: a7;
}
.heart-beat p:nth-child(4) {
grid-area: a8;
}
.heart-beat p:nth-child(5) {
grid-area: b1;
}
.heart-beat p:nth-child(6) {
grid-area: b2;
}
.heart-beat p:nth-child(7) {
grid-area: b3;
}
.heart-beat p:nth-child(8) {
grid-area: b4;
}
.heart-beat p:nth-child(9) {
grid-area: b6;
}
.heart-beat p:nth-child(10) {
grid-area: b7;
}
.heart-beat p:nth-child(11) {
grid-area: b8;
}
.heart-beat p:nth-child(12) {
grid-area: b9;
}
.heart-beat p:nth-child(13) {
grid-area: c1;
}
.heart-beat p:nth-child(14) {
grid-area: c2;
}
.heart-beat p:nth-child(15) {
grid-area: c3;
}
.heart-beat p:nth-child(16) {
grid-area: c4;
}
.heart-beat p:nth-child(17) {
grid-area: c5;
}
.heart-beat p:nth-child(18) {
grid-area: c6;
}
.heart-beat p:nth-child(19) {
grid-area: c7;
}
.heart-beat p:nth-child(20) {
grid-area: c8;
}
.heart-beat p:nth-child(21) {
grid-area: c9;
}
.heart-beat p:nth-child(22) {
grid-area: d1;
}
.heart-beat p:nth-child(23) {
grid-area: d2;
}
.heart-beat p:nth-child(24) {
grid-area: d3;
}
.heart-beat p:nth-child(25) {
grid-area: d4;
}
.heart-beat p:nth-child(26) {
grid-area: d5;
}
.heart-beat p:nth-child(27) {
grid-area: d6;
}
.heart-beat p:nth-child(28) {
grid-area: d7;
}
.heart-beat p:nth-child(29) {
grid-area: d8;
}
.heart-beat p:nth-child(30) {
grid-area: d9;
}
.heart-beat p:nth-child(31) {
grid-area: e2;
}
.heart-beat p:nth-child(32) {
grid-area: e3;
}
.heart-beat p:nth-child(33) {
grid-area: e4;
}
.heart-beat p:nth-child(34) {
grid-area: e5;
}
.heart-beat p:nth-child(35) {
grid-area: e6;
}
.heart-beat p:nth-child(36) {
grid-area: e7;
}
.heart-beat p:nth-child(37) {
grid-area: e8;
}
.heart-beat p:nth-child(38) {
grid-area: f3;
}
.heart-beat p:nth-child(39) {
grid-area: f4;
}
.heart-beat p:nth-child(40) {
grid-area: f5;
}
.heart-beat p:nth-child(41) {
grid-area: f6;
}
.heart-beat p:nth-child(42) {
grid-area: f7;
}
.heart-beat p:nth-child(43) {
grid-area: g4;
}
.heart-beat p:nth-child(44) {
grid-area: g5;
}
.heart-beat p:nth-child(45) {
grid-area: g6;
}
.heart-beat p:nth-child(46) {
grid-area: h5;
}
PaulOB
December 4, 2024, 10:16pm
23
Yes yours uses a lot of HTML compared to mine. I would also suggest that a p element is more semantic for text content but semantics seem to be low on your priorities. At the very least the p elements save a load of characters.
asasass:
Like this?
Yes.
1 Like