css элементов перекрываются, когда я делаю экран меньше - PullRequest
Новая
       0

css элементов перекрываются, когда я делаю экран меньше

0 голосов
/ 30 марта 2020

enter image description here При изменении размера экрана размеры элементов меняются. Я попытался с позиции: относительной, все еще это перекрывается. Также, если я изменю его размер, фоновое изображение будет разделено на две части. Может ли кто-нибудь, пожалуйста, помочь в этом, не уверен, какую ошибку я сделал здесь. Размещение кода html и css ниже: 

<body style="background-image: url(./img/bkgrnd.png);background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>
    <div class="box" id="sys">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
    </div>
    <div class="box1" id="sub">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
    </div>
    <div class="box2" id="sub1">
        <select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
        </select>
</div>
<input type="submit" value="Submit" id="button">
</body>

CSS: 

body {
    margin: 0;
    padding: 0;
    background: #262626;
}

h3
{
    text-align: right;
    color: #C0C0C0;
    padding-top: 10px;
}
.box {
    position: absolute;
    top:40%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.box1 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.box2 {
    position: absolute;
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.box select {
    background: #a9a9a9; 
    color: #fff;
    padding: 10px;
    width: 250px;
    height: 35px;
    border: none;
    font-size: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,.5);
    -webkit-appearance: border;
    outline: none;
}

.box1 select {
    background: #a9a9a9; 
    color: #fff;
    padding: 10px;
    width: 250px;
    height: 35px;
    border: none;
    font-size: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,.5);
    -webkit-appearance: border;
    outline: none;
}

.box2 select {
    background: #a9a9a9; 
    color: #fff;
    padding: 10px;
    width: 250px;
    height: 35px;
    border: none;
    font-size: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,.5);
    -webkit-appearance: border;
    outline: none;
}

.ssystem
{
    position: absolute;
    top:40%;
    left: 41%;
    transform: translate(-50%, -50%);
    background: #a9a9a9; 
    color: #fff;
    padding: 10px;
    width: 250px;
    height: 35px;
    border: none;
    font-size: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,.5);
    -webkit-appearance: border;
    outline: none;
}

.sub
{
    position: absolute;
    top:50%;
    left: 41%;
    transform: translate(-50%, -50%);
    background: #a9a9a9; 
    color: #fff;
    padding: 10px;
    width: 250px;
    height: 35px;
    border: none;
    font-size: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,.5);
    -webkit-appearance: border;
    outline: none;
}

.subsub
{
    position: absolute;
    top:60%;
    left: 41%;
    transform: translate(-50%, -50%);
    background: #a9a9a9; 
    color: #fff;
    padding: 10px;
    width: 250px;
    height: 35px;
    border: none;
    font-size: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,.5);
    -webkit-appearance: border;
    outline: none;
}


#button
{
    background: #a9a9a9;
    color: #fff;
    position: absolute;
    height:30px;
    width:84px;
    left:63%;
    top:70%;
    border: none;
    color: arial;
    font-size: 16px;

}
#button:hover
{
    background: red;
    cursor: pointer;
}

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Я добавил некоторые из ваших элементов во flexbox, но я не уверен, каков ваш требуемый результат, вы можете изменить: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {

margin: 0;
padding: 0;
background: #262626;
position:relative;
max-width: 100vw;
}

h3
{
text-align: right;
color: #C0C0C0;
padding-top: 10px;
}
.box {
position:relative;
/* top: 40%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box1 {
position:relative;
/* top: 50%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box2 {
position:relative;
/* top: 60%;
left: 60%; */
/* transform: translate(-50%, -50%); */
}

.box select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.box1 select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.box2 select {
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.ssystem
{
position:relative;
/* top:40%; */
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.sub
{
position:relative;
top:50%;
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.subsub
{
position:relative;
top:60%;
/* left: 41%; */
/* transform: translate(-50%, -50%); */
background: #a9a9a9; 
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}

.selections_holder {
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: row;
}

.system-buttons-holder {
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.box-holder {
 display:flex;
 align-items: center;
 justify-content: flex-start;
 flex-direction: column;
}

.submit_button_holder {
 padding-top: 30px;
 display:flex;
 align-items: center;
 justify-content: center;
 flex-direction: row;
}

#button
{
background: #a9a9a9;
color: #fff;
position: absolute;
height:30px;
width:84px;
/* left:63%;
top:70%; */
border: none;
color: arial;
font-size: 16px;

}
#button:hover
{
background: red;
cursor: pointer;
}
    </style>
</head>

    <body style="background-image: url(./img/bkgrnd.png);background-size: cover;background-repeat: no-repeat;">
        <h3>welcome user!!</h3>

       <div class="selections_holder">
        <div class="system-buttons-holder">
            <button class="ssystem">System</button>
            <button class="sub">Sub-System</button>
            <button class="subsub">Sub-Sub-System</button>
        </div>

        <div class="box-holder">

        <div class="box" id="sys">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
        </div>
        <div class="box1" id="sub">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
        </div>
        <div class="box2" id="sub1">
            <select>
                <option>AAA</option>
                <option>BBB</option>
                <option>CCC</option>
            </select>
    </div>
    </div>
</div>
<div class="submit_button_holder">
    <input type="submit" value="Submit" id="button">
</div>
</body>
</html>
0 голосов
/ 30 марта 2020

Вы можете изменить фоновое изображение своего тела, чтобы оно не повторялось, как показано ниже: 

<body style="background-image: url(./img/bkgrnd.png);background-size: cover;background-repeat: no-repeat;">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...