Çağatay K. Çağatay K. - 22 days ago 11
CSS Question

When I put my buttons on div CSS doesn't work

I want to buttons auto middle on page, but I can't bec of when I put buttons on div, they doesnt work. thanks for helping



*:focus{
outline:0px;
}
body{
width:100%;
}
.buttons{
width:200px;
margin: 0 auto;
}

.tr,.eu{
width:65px;height:30px;
border-radius: 5px;
border-color:transparent;
background-color:#00405d;
color:white;
font-weight:500;
}
.tr:active,.eu:active{
padding:3px;
}

.EU {display: none;}

.eu:focus ~ .TR {display: none;}
.tr:focus ~ .TR {display: block;}
.tr:focus ~ .EU {display: none;}
.eu:focus ~ .EU {display: block;}

first 2 buttons
<button type="button" class="eu" name="button">EU</button> Working
<button type="button" class="tr" name="button">TR</button> Working
first 2 buttons
<br>
<br>

other 2 buttons in div
<!--but doesnt work bec of in div -->
<div>
<button type="button" class="eu" name="button">EU</button>doesnt work on div
<button type="button" class="tr" name="button">TR</button>doesnt work on div
</div>
<!--but doesnt work bec of in div -->
other 2 buttons in div

<br>
<br>
<br>

RESULT:
<div class="TR">
tr
</div>
<div class="EU">
eu
</div>




Answer

Add the following css rule to your codes

button.eu,
button.tr {
  border: solid red;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  position: relative;
  left: 50%;
}
#btn_container {
  position: relative;
}

Snippet below

var eu_btns = document.getElementsByClassName("eu");
var tr_btns = document.getElementsByClassName("tr");
var div1 = document.getElementsByClassName("TR")[0];
var div2 = document.getElementsByClassName("EU")[0];
for (var x = 0; x < eu_btns.length; ++x) {
  eu_btns[x].addEventListener("click", eu_click)
}
for (var x = 0; x < tr_btns.length; ++x) {
  tr_btns[x].addEventListener("click", tr_click)
}

function eu_click() {
  div2.style.display = "inline-block";
  div1.style.display = "none";

}

function tr_click() {
  div1.style.display = "inline-block";
  div2.style.display = "none";

}
*:focus {
  outline: 0px;
}
body {
  width: 100%;
}
.buttons {
  width: 200px;
  margin: 0 auto;
}
.tr,
.eu {
  width: 65px;
  height: 30px;
  border-radius: 5px;
  border-color: transparent;
  background-color: #00405d;
  color: white;
  font-weight: 500;
}
.EU {
  display: none;
}
.eu:focus ~ .TR {
  display: none;
}
.tr:focus ~ .TR {
  display: block;
}
.tr:focus ~ .EU {
  display: none;
}
.eu:focus ~ .EU {
  display: block;
}
button.eu,
button.tr {
  border: solid red;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  position: relative;
  left: 50%;
}
#btn_container {
  position: relative;
}
.TR,
.EU {
  display: inline-block;
}
<button type="button" class="tr" name="button">TR</button>
<!--working -->

<!--but doesnt work  bec of in div -->
<div id="btn_container">
  <button type="button" class="eu" name="button">EU</button>
  <button type="button" class="tr" name="button">TR</button>
</div>
<!--but doesnt work bec of in div -->

<br>
<br>
<br>

<div class="TR">
  tr
</div>
<div class="EU">
  eu
</div>

Comments