Home > Enterprise >  HTML CSS borders and alignment doest work well
HTML CSS borders and alignment doest work well

Time：11-06

I'm doing my very first HTML with a little CSS and I have got a sample that I need to recreate but I don't know exatly what I have to do from here.

.chessboard {
    width: 800px;
    height: 800px;
    margin: 60px;
    text-align:justify;
    
}
.chessboardbelso{
    width: 640px;
    height: 640px;
    margin: 60px;
    border: 1pc solid #b38365 ;
    
}
.black {
    float: left;
    width: 80px;
    height: 80px;
    background-color:#180f0a;
    color: #ede4e0;
    font-size:60px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    
}
.white {
    float: left;
    width: 80px;
    height: 80px;
    background-color:#ede4e0;
    color: black;
    font-size:60px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    
}

.outsidelefttop{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-left: #b38365 solid 10px;
    border-top: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
    
}
.outsiderighttop{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-right: #b38365 solid 10px;
    border-top: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}


.outsideleftbottom{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-left: #b38365 solid 10px;
    border-bottom: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}
.outsiderightbottom{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-right: #b38365 solid 10px;
    border-bottom: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}











.outsideleft{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 60px;
    height: 80px;
    border-left: #b38365 solid 10px;
    border-right: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}
.outsidetop{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 80px;
    height: 60px;
    border-top: #b38365 solid 10px;
    border-bottom: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
    
}
.outsidereversed{
    float:left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 80px;
    height: 60px;
    border-bottom: #b38365 solid 10px;
    border-top: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align: center; 
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
    
}
.outsidereversedright{
    float:left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 60px;
    height: 80px;
    border-left: #b38365 solid 10px;
    border-right: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align: middle; 
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
    
}
<!DOCTYPE html>
<html lang="hu">

<head>
<meta charset="UTF-8"> 
<title>Chessboard</title>
<link rel="stylesheet" href="./Chess.css">
</head>

<body>

<div class="chessboard">
<!--outsidetop-->
<div class="outsidelefttop"></div>
<div class="outsidereversed">H</div>
<div class="outsidereversed">G</div>
<div class="outsidereversed">F</div>
<div class="outsidereversed">E</div>
<div class="outsidereversed">D</div>
<div class="outsidereversed">C</div>
<div class="outsidereversed">B</div>
<div class="outsidereversed">A</div>
<div class="outsiderighttop"></div>


<!--1-->
<div class="outsideleft">8</div>
<div class="black">&#9814;</div>
<div class="white">&#9816;</div>
<div class="black">&#9815;</div>
<div class="white">&#9812;</div>
<div class="black">&#9813;</div>
<div class="white">&#9815;</div>
<div class="black">&#9816;</div>
<div class="white">&#9814;</div>
<div class="outsidereversedright">1</div>
<!--2-->
<div class="outsideleft">7</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="outsidereversedright">2</div>
<!--3-->
<div class="outsideleft">6</div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="outsidereversedright">3</div>
<!--4-->
<div class="outsideleft">5</div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="outsidereversedright">4</div>
<!--5-->
<div class="outsideleft">4</div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="outsidereversedright">5</div>
<!--6-->
<div class="outsideleft">3</div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="outsidereversedright">6</div>
<!--7-->
<div class="outsideleft">2</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="outsidereversedright">7</div>
<!--8-->
<div class="outsideleft">1</div>
<div class="white">&#9814;</div>
<div class="black">&#9816;</div>
<div class="white">&#9815;</div>
<div class="black">&#9813;</div>
<div class="white">&#9812;</div>
<div class="black">&#9815;</div>
<div class="white">&#9816;</div>
<div class="black">&#9814;</div>
<div class="outsidereversedright">8</div>
<!--outsidelent-->
<div class="outsideleftbottom"></div>
<div class="outsidetop">H</div>
<div class="outsidetop">G</div>
<div class="outsidetop">F</div>
<div class="outsidetop">E</div>
<div class="outsidetop">D</div>
<div class="outsidetop">C</div>
<div class="outsidetop">B</div>
<div class="outsidetop">A</div>
<div class="outsiderightbottom"></div>

</div>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have to recreate this image and I cant get the number and words in the middle and I don't know how can I make the little missing pieces from the inner-border.

Any recommendation what I have to do to finish it?

Here is the image enter image description here

CodePudding user response：

For centering numbers and letters you can add this code to each container, this will center it's content vertically and horizontally.

/* change container to "outsidetop" etc. or add new class in html to each element */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

If you're interested how this works I would recommend reading more about flexbox here.

As for the borders I would abandon you solution with adding border to every outside container and just wrap the chessboard fields in a container with border.

Next time try to be more specific and concise in formulating questions. If you're not sure how to correctly ask questions read this guide.

CodePudding user response：

I just added the display:flex; property to make all the numbers align center, and i added sudo after class for all four outside corner elements to merge the borders. check the css at the end ,and i had d-flex class to the all number elments, p-rel to all outside corner elements.

here is the output imagelink

.chessboard {
    width: 800px;
    height: 800px;
    margin: 60px;
    text-align:justify;
    
}
.chessboardbelso{
    width: 640px;
    height: 640px;
    margin: 60px;
    border: 1pc solid #b38365 ;
    
}
.black {
    float: left;
    width: 80px;
    height: 80px;
    background-color:#180f0a;
    color: #ede4e0;
    font-size:60px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    
}
.white {
    float: left;
    width: 80px;
    height: 80px;
    background-color:#ede4e0;
    color: black;
    font-size:60px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    
}

.outsidelefttop{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-left: #b38365 solid 10px;
    border-top: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
    
}
.outsiderighttop{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-right: #b38365 solid 10px;
    border-top: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}


.outsideleftbottom{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-left: #b38365 solid 10px;
    border-bottom: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}
.outsiderightbottom{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 70px;
    height: 70px;
    border-right: #b38365 solid 10px;
    border-bottom: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}











.outsideleft{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 60px;
    height: 80px;
    border-left: #b38365 solid 10px;
    border-right: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
}
.outsidetop{
    float: left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 80px;
    height: 60px;
    border-top: #b38365 solid 10px;
    border-bottom: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align:middle;
    
}
.outsidereversed{
    float:left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 80px;
    height: 60px;
    border-bottom: #b38365 solid 10px;
    border-top: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align: center; 
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
    
}
.outsidereversedright{
    float:left;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px;
    width: 60px;
    height: 80px;
    border-left: #b38365 solid 10px;
    border-right: #b38365 solid 10px;
    background-color: #41210a;
    color: #e4e8da;
    justify-content: center;
    text-align: center;
    vertical-align: middle; 
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
    
}

.d-flex{
    display:flex;
    justify-content:center;
    align-items:center;
}

.p-rel{
    position:relative;
}

.outsideleftbottom::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:10px;
    height:10px;
    background:#b38365;
    z-index:9999999999999;
}
.outsiderightbottom::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    width:10px;
    height:10px;
    background:#b38365;
    z-index:9999999999999;
}

.outsidelefttop::after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    width:10px;
    height:10px;
    background:#b38365;
    z-index:9999999999999;
}
.outsiderighttop::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:10px;
    height:10px;
    background:#b38365;
    z-index:9999999999999;
}
<!DOCTYPE html>
<html lang="hu">

<head>
<meta charset="UTF-8"> 
<title>Chessboard</title>
<link rel="stylesheet" href="./Chess.css">
</head>

<body>

<div class="chessboard">
<!--outsidetop-->
<div class="outsidelefttop p-rel"></div>
<div class="outsidereversed">H</div>
<div class="outsidereversed">G</div>
<div class="outsidereversed">F</div>
<div class="outsidereversed">E</div>
<div class="outsidereversed">D</div>
<div class="outsidereversed">C</div>
<div class="outsidereversed">B</div>
<div class="outsidereversed">A</div>
<div class="outsiderighttop p-rel"></div>


<!--1-->
<div class="outsideleft d-flex">8</div>
<div class="black">&#9814;</div>
<div class="white">&#9816;</div>
<div class="black">&#9815;</div>
<div class="white">&#9812;</div>
<div class="black">&#9813;</div>
<div class="white">&#9815;</div>
<div class="black">&#9816;</div>
<div class="white">&#9814;</div>
<div class="outsidereversedright d-flex">1</div>
<!--2-->
<div class="outsideleft d-flex">7</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="white">&#9823;</div>
<div class="black">&#9823;</div>
<div class="outsidereversedright d-flex">2</div>
<!--3-->
<div class="outsideleft d-flex">6</div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="outsidereversedright d-flex">3</div>
<!--4-->
<div class="outsideleft d-flex">5</div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="outsidereversedright d-flex">4</div>
<!--5-->
<div class="outsideleft d-flex">4</div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="outsidereversedright d-flex">5</div>
<!--6-->
<div class="outsideleft d-flex">3</div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="outsidereversedright d-flex">6</div>
<!--7-->
<div class="outsideleft d-flex">2</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="outsidereversedright d-flex">7</div>
<!--8-->
<div class="outsideleft d-flex">1</div>
<div class="white">&#9814;</div>
<div class="black">&#9816;</div>
<div class="white">&#9815;</div>
<div class="black">&#9813;</div>
<div class="white">&#9812;</div>
<div class="black">&#9815;</div>
<div class="white">&#9816;</div>
<div class="black">&#9814;</div>
<div class="outsidereversedright d-flex">8</div>
<!--outsidelent-->

<div class="outsideleftbottom p-rel"></div>
<div class="outsidetop">H</div>
<div class="outsidetop">G</div>
<div class="outsidetop">F</div>
<div class="outsidetop">E</div>
<div class="outsidetop">D</div>
<div class="outsidetop">C</div>
<div class="outsidetop">B</div>
<div class="outsidetop">A</div>
<div class="outsiderightbottom p-rel"></div>

</div>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

For the letters and numbers try flex display (there is a clear explanation of flexbox here):

display: flex, #flex direction is "row" by default
justify-content: center, #horizontally center (distributes along the main-axis, which is row)
align-content: center, #vertically center (distributes along the cross-axis, which is column)

The little missing pieces could be filled in by specifying borders of the inner corners of the chest board. For example border-left and border-top for the top left chest piece.

Your approach does feel quite repetitive and I would assume they want you to apply the border on the entire chest board and the entire inner chest board. Take a look at the "DRY principle".

Page link：https//www.codepudding.com/Enterprise/180795.html

Prev:Hidden on Custom Breakpoint Breaks All Breakpoints' Display Value in Tailwind
Next:100% total width for flex items in flex container, with gap inbetween
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding