Fixing critical issue with Mondrian composition with red, blue and yellow using HTML table

Question

Can somebody help me with reproduction this painting https://i.stack.imgur.com/84y4I.jpg in browser, with HTML tag and CSS

Yesterday I was seeking help with this task, and one kind gentleman [ user:215552 ] helped me (thank you very much sir!)

But there is still an issue with HTML validator

I tried to fix it in different ways, but finished not knowing how to add cells to this without breaking the whole painting :c

The HTML code (previously edited by the User Heretic Monkey):

    
    
    
    
        
        
        
        Document
        
    
    
    
        
            
                
                
                
                
                
                
                
                
            
            
                 
                 
                 
                 
            
            
                 
                
                 
                
            
            
                 
                 
                 
                
            
            
                
                 
                 
                 
                 
                
            
            
                
                 
                 
                
                
            
            
                
                 
                 
            
        
    
    
    

The CSS code (previously edited by the User Heretic Monkey):

* {
  box-sizing: border-box;
  background-color: floralwhite;
}

img {
  border: 0px solid transparent;
  width: 404px;
  height: 404px;
}

body {
  width: 100%;
  background-color: floralwhite;
  display: flex;
  justify-content: space-evenly;
}

table {
  empty-cells: show;
  background-color: #fefefe;
  border: 0px solid transparent;
  width: 389px;
  height: 389px;
  margin: 6px;
  border-collapse: collapse;
}
thead { display: none }
tr {
  border: 0px none transparent;
}

td {
  border: 0px none transparent;
}

.bl {
  border-left: var(--border-width, 4px) solid black;
}

.bt {
  border-top: var(--border-width, 4px) solid black;
}

.br {
  border-right: var(--border-width, 4px) solid black;
}

.bb {
  border-bottom: var(--border-width, 4px) solid black;
}

.red {
  background-color: #da422a;
}

.yellow {
  background-color: #f8ce2e;
}

.black {
  background-color: black;
}

.blue {
  background-color: #3c5f99;
}

.sm {
  height: 40px;
}
.md {
  height: 58px;
}
.lg {
  height: 75px;
}

.w69{
  width: 69px;
}
.w65{
  width: 65px;
}

.w71{
  width: 71px;
}

.w76{
  width: 76px;
}

.w52{
  width: 52px;
}

user_10867454 · Answer

The basic problem s that you have defined 8 columns but there are only 6.

So you end up with some columns having no starting cells as the validator has found (it seems to highlight only the first one it comes across).

In this snippet 6 columns are defined, the redundant CSS and HTML is commented out so it's easier to see what has changed in the basic layout.

Of course this messes up everything else so it was necessary to go through each row redefining the boundaries (col spans) of each rectangle.





  
  
  
  Document

The code now passes W3C validation.

Fixing critical issue with Mondrian composition with red, blue and yellow using HTML table

1 Answers