Referencing elements with CSS to reposition them

Asked

Viewed 159 times

1

I have to change a code base responsible for generating PDF reports using the tool Jinja2. To do so, I need to change HTML and CSS documents. For the former, my concern is with the naming convention for div’s. According to WELL, I should use hyphen to name the div’s. So how do I proceed to name nested div’s? The following code logic uses spaces ("content" -> "content info").

For the second, I need to structure the report in order to centralize the table ("content info") and, just below, have the charts ("pie_week_chart" and "pie_project_chart") with the same size and side by side.

This code base is legacy and was generated automatically. Therefore, my intention is to rewrite it as simply as possible.

Current code:

HTML:

<div class='description'>
        <div class="municipality">{{ municipality }}</div>
</div>
<div class="summary">
        <div class="content info">
            <TABLE border="0" class="table0">
                <TR>
                    <TD><P class="td3 p9 ft9">Resumo semana de {{ start_date }} até {{ end_date }}</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Participantes</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_participantes }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Avaliaram</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_q_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Avaliações Realizadas</P></TD>
                    <TD><P class="td6 p6 ft0">{{ avaliacoes_realizadas }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. que não avaliaram</P></TD>
                    <TD><P class="td4 p6 ft11">{{ professores_q_nao_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="tr8 td0 p2 ft13">&nbsp;</P></TD>
                    <TD><P class="tr8 td1 p2 ft13">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p9 ft9">Uso Semanal</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. dentro do esperado</P></TD>
                    <TD><P class="td6 p6 ft0">{{ prof_ok }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. fora do esperado</P></TD>
                    <TD><P class="td4 p6 ft11">{{ prof_n_ok }}</P></TD>
                </TR>
            </TABLE>  
        </div>
        <div class="content presentation">
            <div class="content presentation week">
                {{ pie_week_chart }}
            </div>
            <div class="content presentation project">
                {{ pie_project_chart }}
            </div>
        </div>
</div>

CSS:

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.content {
    float: left;
}

.info {
  width: 60%;
}

.chart {
  width: 40%;
}

/* Clear floats after the columns */
.summary:after {
    content: "";
    display: table; 
    clear: both;
}

.content_chart {
    display: inline-block;
    height: auto; 
    width: auto;
    vertical-align: middle;
    max-width: 100%;
}

@media screen {
    div.report_name {
         display: none; 
    }
}
@media print {

    h1 {
      page-break-before: always;
    }

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
    }       

    figure {
      page-break-inside: avoid;
    }

    div#footer {
        position: fixed;
        bottom: -0.8cm;
        right: 0px;

        text-transform:uppercase;
        font: 12px 'Calibri';
    }

}

img.resize {
  ;
}

.former_border{border-top: #a6a6a6 1px solid;padding: 2px;margin: 0px;vertical-align: top;}

.dclr {clear:both;float:none;height:1px;margin:0px;padding:0px;overflow:hidden;}

.ft0{font: 14px 'Calibri';line-height: 19px;}
.ft1{font: 14px 'Calibri';line-height: 15px;}
.ft2{font: bold 14px 'Calibri';line-height: 29px;}
.ft3{font: 14px 'Calibri';line-height: 1px;}
.ft4{font: bold 14px 'Calibri';color: #595959;line-height: 19px;}
.ft5{font: 14px 'Calibri';line-height: 6px;}
.ft6{font: 14px 'Calibri';line-height: 19px;}
.ft7{font: 14px 'Calibri';line-height: 22px;}
.ft8{font: 14px 'Calibri';line-height: 17px;}
.ft9{font: bold 14px 'Calibri';line-height: 19px;}
.ft10{font: bold 14px 'Calibri';color: #404040;line-height: 19px;}
.ft11{font: bold 14px 'Calibri';color: #ff0000;line-height: 19px;}
.ft12{font: 14px 'Calibri';line-height: 18px;}
.ft13{font: 14px 'Calibri';line-height: 8px;}
.ft14{font: bold 14px 'Calibri';line-height: 15px;}
.ft15{font: bold 14px 'Calibri';line-height: 14px;}
.ft16{font: 14px 'Calibri';line-height: 9px;}
.ft17{font: 14px 'Calibri';line-height: 14px;}
.ft18{font: bold 14px 'Calibri';color: #808080;line-height: 14px;}
.ft19{font: 14px 'Calibri';line-height: 13px;}

.p0{text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;}
.p1{text-align: left;padding-left: 4px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p2{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p3{text-align: left;padding-left: 129px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p4{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p5{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p6{text-align: right;padding-right: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p7{text-align: right;padding-right: 238px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p8{text-align: right;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p9{text-align: left;padding-left: 150px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p10{text-align: left;padding-left: 75px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p11{text-align: center;padding-right: 21px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p12{text-align: center;padding-right: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p13{text-align: center;padding-right: 10px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p14{text-align: center;padding-right: 6px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p15{text-align: center;padding-right: 15px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p16{text-align: left;padding-left: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p17{text-align: center;padding-right: 18px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p18{text-align: center;padding-right: 9px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}

.td0{padding: 0px;margin: 0px;vertical-align: bottom;}
.td1{padding: 0px;margin: 0px;vertical-align: bottom;}
.td2{padding: 0px;margin: 0px;vertical-align: bottom;}
.td3{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td4{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td5{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td6{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td7{padding: 0px;margin: 0px;vertical-align: bottom;}
.td8{padding: 0px;margin: 0px;vertical-align: bottom;}
.td9{padding: 0px;margin: 0px;vertical-align: bottom;}
.td10{padding: 0px;margin: 0px;vertical-align: bottom;}
.td11{padding: 0px;margin: 0px;vertical-align: bottom;}
.td12{padding: 0px;margin: 0px;vertical-align: bottom;}
.td13{padding: 0px;margin: 0px;vertical-align: bottom;}
.td14{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td15{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td16{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td17{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td18{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td19{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td20{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td21{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td22{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td23{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td24{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td25{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td26{padding: 0px;margin: 0px;vertical-align: bottom;}
.td27{padding: 0px;margin: 0px;vertical-align: bottom;}

.tr0{height: 30px;}
.tr1{height: 36px;}
.tr2{height: 6px;}
.tr3{height: 19px;}
.tr4{height: 25px;}
.tr5{height: 23px;}
.tr6{height: 17px;}
.tr7{height: 21px;}
.tr8{height: 39px;}
.tr9{height: 34px;}
.tr10{height: 20px;}
.tr11{height: 18px;}
.tr12{height: 8px;}
.tr13{height: 31px;}
.tr14{height: 16px;}
.tr15{height: 9px;}
.tr16{height: 14px;}

.t0{margin-top: 13px;font: 16px 'Calibri';border-spacing: 0;background-color: white;}
.t1{margin-top: 15px;font: 12px 'Calibri';}
.t2{font: 11px 'Calibri';}
html css

  • I don’t know if I got it right... after all what is your question? How to use WELL? Or something with this "grid" done with table?

  • Yes, my doubt is with both. I would like to know how to use the convention to name my div’s and how to position the elements in the described way

1 answer

1


On the table you can make it occupy 100% of the width of the container where she is inside, after that you determine that she will divide the two columns with 50% for each one.

About the GOOD, there is not much secret, just you follow what says to documentation. 

.form (elemento pai)
.form__field (elemento filho)
.form__field--first (elemento filho modificado)

For example to do the table CSS I did this way. 

.info {
  width: 60%;
}
.info .info__table {
    width: 100%;
    table-layout: fixed;
}

One thing I noticed about your code that I don’t think is good practice when it comes to WELL, is putting styles right for a kind of tag, like h1, h2, h3, h4, h5 { css } or figure { css }, to write CSS in the methodology WELL guess this would not be recommended...

Vaja as your code with the adjusted table.

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.content {
    float: left;
}

.info {
  width: 60%;
}
.info .info__table {
    width: 100%;
    table-layout: fixed;
}

.chart {
  width: 40%;
}

/* Clear floats after the columns */
.summary:after {
    content: "";
    display: table; 
    clear: both;
}

.content_chart {
    display: inline-block;
    height: auto; 
    width: auto;
    vertical-align: middle;
    max-width: 100%;
}

@media screen {
    div.report_name {
         display: none; 
    }
}
@media print {

    h1 {
      page-break-before: always;
    }

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
    }       

    figure {
      page-break-inside: avoid;
    }

    div#footer {
        position: fixed;
        bottom: -0.8cm;
        right: 0px;

        text-transform:uppercase;
        font: 12px 'Calibri';
    }

}

img.resize {
  ;
}

.former_border{border-top: #a6a6a6 1px solid;padding: 2px;margin: 0px;vertical-align: top;}

.dclr {clear:both;float:none;height:1px;margin:0px;padding:0px;overflow:hidden;}

.ft0{font: 14px 'Calibri';line-height: 19px;}
.ft1{font: 14px 'Calibri';line-height: 15px;}
.ft2{font: bold 14px 'Calibri';line-height: 29px;}
.ft3{font: 14px 'Calibri';line-height: 1px;}
.ft4{font: bold 14px 'Calibri';color: #595959;line-height: 19px;}
.ft5{font: 14px 'Calibri';line-height: 6px;}
.ft6{font: 14px 'Calibri';line-height: 19px;}
.ft7{font: 14px 'Calibri';line-height: 22px;}
.ft8{font: 14px 'Calibri';line-height: 17px;}
.ft9{font: bold 14px 'Calibri';line-height: 19px;}
.ft10{font: bold 14px 'Calibri';color: #404040;line-height: 19px;}
.ft11{font: bold 14px 'Calibri';color: #ff0000;line-height: 19px;}
.ft12{font: 14px 'Calibri';line-height: 18px;}
.ft13{font: 14px 'Calibri';line-height: 8px;}
.ft14{font: bold 14px 'Calibri';line-height: 15px;}
.ft15{font: bold 14px 'Calibri';line-height: 14px;}
.ft16{font: 14px 'Calibri';line-height: 9px;}
.ft17{font: 14px 'Calibri';line-height: 14px;}
.ft18{font: bold 14px 'Calibri';color: #808080;line-height: 14px;}
.ft19{font: 14px 'Calibri';line-height: 13px;}

.p0{text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;}
.p1{text-align: left;padding-left: 4px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p2{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p3{text-align: left;padding-left: 129px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p4{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p5{text-align: left;padding-left: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p6{text-align: right;padding-right: 3px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p7{text-align: right;padding-right: 238px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p8{text-align: right;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p9{text-align: left;padding-left: 150px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p10{text-align: left;padding-left: 75px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p11{text-align: center;padding-right: 21px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p12{text-align: center;padding-right: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p13{text-align: center;padding-right: 10px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p14{text-align: center;padding-right: 6px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p15{text-align: center;padding-right: 15px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p16{text-align: left;padding-left: 14px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p17{text-align: center;padding-right: 18px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}
.p18{text-align: center;padding-right: 9px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;}

.td0{padding: 0px;margin: 0px;vertical-align: bottom;}
.td1{padding: 0px;margin: 0px;vertical-align: bottom;}
.td2{padding: 0px;margin: 0px;vertical-align: bottom;}
.td3{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td4{border-bottom: #000000 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td5{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td6{border-bottom: #a6a6a6 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td7{padding: 0px;margin: 0px;vertical-align: bottom;}
.td8{padding: 0px;margin: 0px;vertical-align: bottom;}
.td9{padding: 0px;margin: 0px;vertical-align: bottom;}
.td10{padding: 0px;margin: 0px;vertical-align: bottom;}
.td11{padding: 0px;margin: 0px;vertical-align: bottom;}
.td12{padding: 0px;margin: 0px;vertical-align: bottom;}
.td13{padding: 0px;margin: 0px;vertical-align: bottom;}
.td14{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td15{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td16{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td17{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td18{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td19{border-bottom: #808080 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td20{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td21{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td22{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td23{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td24{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td25{border-bottom: #d9d9d9 1px solid;padding: 0px;margin: 0px;vertical-align: bottom;}
.td26{padding: 0px;margin: 0px;vertical-align: bottom;}
.td27{padding: 0px;margin: 0px;vertical-align: bottom;}

.tr0{height: 30px;}
.tr1{height: 36px;}
.tr2{height: 6px;}
.tr3{height: 19px;}
.tr4{height: 25px;}
.tr5{height: 23px;}
.tr6{height: 17px;}
.tr7{height: 21px;}
.tr8{height: 39px;}
.tr9{height: 34px;}
.tr10{height: 20px;}
.tr11{height: 18px;}
.tr12{height: 8px;}
.tr13{height: 31px;}
.tr14{height: 16px;}
.tr15{height: 9px;}
.tr16{height: 14px;}

.t0{margin-top: 13px;font: 16px 'Calibri';border-spacing: 0;background-color: white;}
.t1{margin-top: 15px;font: 12px 'Calibri';}
.t2{font: 11px 'Calibri';}

    

    
<div class='description'>
        <div class="municipality">{{ municipality }}</div>
</div>
<div class="summary">
        <div class="content summary__info">
            <TABLE border="0" class="table0 info__table">
                <TR>
                    <TD><P class="td3 p9 ft9">Resumo semana de {{ start_date }} até {{ end_date }}</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Participantes</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_participantes }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. Avaliaram</P></TD>
                    <TD><P class="td6 p6 ft0">{{ professores_q_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Avaliações Realizadas</P></TD>
                    <TD><P class="td6 p6 ft0">{{ avaliacoes_realizadas }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. que não avaliaram</P></TD>
                    <TD><P class="td4 p6 ft11">{{ professores_q_nao_avaliaram }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="tr8 td0 p2 ft13">&nbsp;</P></TD>
                    <TD><P class="tr8 td1 p2 ft13">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p9 ft9">Uso Semanal</P></TD>
                    <TD><P class="td3 p9 ft9">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD><P class="td5 p5 ft0">Prof. dentro do esperado</P></TD>
                    <TD><P class="td6 p6 ft0">{{ prof_ok }}</P></TD>
                </TR>
                <TR>
                    <TD><P class="td3 p5 ft11">Prof. fora do esperado</P></TD>
                    <TD><P class="td4 p6 ft11">{{ prof_n_ok }}</P></TD>
                </TR>
            </TABLE>  
        </div>

        <div class="content presentation">
            <div class="content presentation week">
                {{ pie_week_chart }}
            </div>
            <div class="content presentation project">
                {{ pie_project_chart }}
            </div>
        </div>
</div>

Portuguese article about writing css methodology that will help you: https://tableless.com.br/bem-um-novo-metodo-para-seu-css/

Interesting article in English: https://www.toptal.com/css/introduction-to-bem-methodology

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.