펀냥
20
2020-09-21 16:21:20
4
131

css button 태그 위치 질문



안녕하세요ㅠㅠ 코딩 초보 개발자인데 로그인 화면 구현시에 위 사진 처럼 로그인 버튼 위치가 브라우저 폭에 따라 자꾸 움직이는데 그걸 고정하는 방법 없을까요? 아무리 position의 속성값을 이리저리 해봐도 안됩니다ㅠ 상위 div에 position : relative, 버튼에 position : absolute도 줘봤고 위치 속성값을 px로도 %로도 줘보면서 이것저것 아무리 해도 안되네요ㅠㅠ 도와주세요...

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap" rel="stylesheet">
<script>
  function memberLogin(){
	  loginform.submit();
  }
</script>
<style>
  body{
    margin : 0px;
  }
  *{
    font-family: 'Gothic A1', sans-serif;
    font-size : 20px;
  }
  .header{
    background-color : rgb(255, 244, 97);
    text-align : right;
  }
  .logo{
    background-color : rgb(255, 244, 97);
    text-align : center;
    margin-top : -10px;
  }
  #join,#login{
    font-family: 'Julius Sans One', sans-serif;
    font-size : 17px;
    text-decoration: none;
    color : black;
    margin : 0px 3px 0px 3px; 
  }
  #join:hover, #login:hover{
    color : white;
  }
  #logo{
    text-decoration : none;
    font-size : 50px; 
    color : green;
    font-family: 'Julius Sans One', sans-serif;
  }
  table{
    margin-left: auto;
    margin-right: auto;
    padding : 50px;
  }
  td{
    padding : 10px;
  }
  .loginTable{
    border : 5px rgb(255, 244, 97) solid;
    margin : 50px;
    background-color : rgb(245, 245, 245);
    background-image : url('Images/노란물감.jpg');
    background-repeat: no-repeat;
    background-position : center;
    background-size : 30cm;
  }
  .button{
     
  }
  .form{
    margin-right : -50px;
    margin-left : auto;
  }
  .login {
    margin : 50px auto 0px auto;
  }
  .footer{
    text-align : center;
  }
  span{
    font-size : 15px;
    color : gray;
  }
  #button{
    border : 1px black solid;
    background-color : white;
    border-radius: 8px;
    position: relative;
    top : 50%;
    left : 70%;
  }
  #button:hover{
    background-color : rgb(245, 245, 245);
  }
  
</style>
</head>
<body>
  <div class = "header">
    <strong><a href = "MemberLogin.jsp" id = "login">LOGIN</a></strong>
    <strong><a href = "MemberJoin.jsp" id = "join" >JOIN</a></strong>
  </div>
  
  <div class = "logo">
    <a href = "MainPage.jsp" id ="logo">EUNBI BLOG</a>
  </div>
  
  <div class = "loginTable">
        <form action = "memberlogin" method = "post" name = "loginform">
          <table>
             <tr>
               <td>
                 <input type = "text" name = "mid" id = "mid" style = "width : 250px; height : 35px;">                         
               </td>
             </tr>
             <tr>
               <td>
                 <input type = "password" name = "mpw" id = "mpw" style = "width : 250px; height : 35px;">
               </td>
             </tr>
          </table>
        </form>
        <button id = "button" style = "width : 80px; height : 80px;" onclick = "memberLogin()">로그인</button>
  </div>
  
  
  <div class = "footer">
    <span>이용약관|개인정보처리방침 |책임의 한계와 법적고지|고객센터</span><br>
    <span>© EUNBI BLOG Corp</span>
  </div>

</body>
</html>


0
  • 답변 4

  • 라모네기사
    150
    2020-09-21 16:46:17
    #button{
        border : 1px black solid;
        background-color : white;
        border-radius: 8px;
        position: relative;
        top : 50%;
        left : 70%;
      }

    에 있는 left: 70% 값 때문인거 같은데, 이걸 빼거나, 다르게 구성하셔야 할듯합니다.

  • 펀냥
    20
    2020-09-21 16:49:13

    어떤식으로 다르게 구성해야할지 감이 안옵니다ㅠㅠㅠ

  • 비당
    17
    2020-09-21 18:04:28 작성 2020-09-21 18:11:09 수정됨

    은비님이 원하시는 고정된 구조의 예제 입니다, 추후에
    반응형을 원하시면 다시 질문해주시면 감사하겠습니다.



    index.html 의 내용

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="index.css" rel="stylesheet" type="Text/css">
        </head>
        <body>
            <div id="header">레몬 블로그</div>
            <div id="login">
               <form>
                    <div>
                        <input type="Text">
                        <input type="Text">
                    </div>
                    <input type="submit" value="로그인">
               </form>
            </div>
            <div id="footer">
                <span>이용약관|개인정보처리방침 |책임의 한계와 법적고지|고객센터</span><br>
                <span>© LEMON BLOG Corp</span>
            </div>
        </body>
    </html>


    index.css 의 내용

    body{
        margin: 0;
    }
    
    #header{
        font-size: 45px;
        font-weight: 100;
        
        text-align: center;
        
        padding: 5px;
        color:#319070;
        background-color: #fff96a;
    }
    
    #login{
        height: 200px;
        margin: 25px;
        
        text-align: center;
        line-height: 200px;
        
        border: 4px solid #ffe200;
        background-image: url(lemon.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    #login form{
        min-width: 363px;
        text-align: left;
        line-height: 16px;
        display: inline-block;
    }
    
    #login form div{
        width: 250px;
        display: inline-block;
        vertical-align: middle;
    }
    
    #login form div input{
        width: 100%;
        height: 31px;
        display: inline-block;
    }
    
    #login form div input:first-child{
        margin-bottom: 3px;
    }
    
    #login form > input{
        width: 100px;
        height: 77px;
        
        background-color: white;
        
        font-size: 20px;
        
        outline: 0;
        border: 1px solid black;
        border-radius: 4px;
        
        margin-left: 7px;
        vertical-align: middle;
    }
    
    #footer{
        text-align: center;
    }


  • 펀냥
    20
    2020-09-22 10:24:06 작성 2020-09-22 10:24:26 수정됨

    비당

    감사합니다!!ㅜㅜ

  • 로그인을 하시면 답변 을 등록할 수 있습니다.