Q&A

css 충돌하는 문제

2016.02.23 09:54
792
0

안녕하세요, 

제가 레이아웃 하단에 뉴스레터 폼을 삽입했는데 이게 헤더의 검색창이랑 css가 충돌하는 문제가 생겼어요.. 이거 어떻게 해결해야하는지 아시는 분 있으시면 도와주시면 정말 감사하겠습니다 ㅠㅠ

 

소스는 다음과 같아요.. 

 

1. 레이아웃 검색창 html

<form action="{getUrl()}" method="post" no-error-return-url="true" id="topSearch" class="newclearfix">
                        <input type="hidden" name="vid" value="{$vid}" />
                        <input type="hidden" name="mid" value="{$mid}" />
                        <input type="hidden" name="act" value="IS" />
                        <input type="hidden" name="where" value="{$where}" />
                        <input type="hidden" name="search_target" value="title_content" />
                        <input type="text" name="is_keyword" id="search_input" class="inputText" title="{$lang->cmd_search}" value="{$is_keyword}" />
                        <input type="submit" class="submit search_submit" value="{$lang->cmd_search}" />
                    </form>

2. 검색창 css

.search_header{width:400px; vertical-align:middle; display:inline-block; zoom:1; *display:inline; padding-right:20px; padding-left:20px}
#topSearch{margin:0; padding:0}
#topSearch .searchOrder{display:none}
#topSearch .inputText{float:left; width:266px; height:14px; margin:0 5px 0 0; padding:11px 0 11px 10px; border:3px solid #ea5859; background:#fff; line-height:1.3; font-size:13px; color:#959393; outline:none}
#topSearch .submit{float:left; width:59px; height:42px; margin:0; padding:0; background:#ea5859; border:0; border-radius:0; font-family:'Nanum Gothic','Malgun Gothic',돋움,sans-serif; line-height:1.3; font-size:13px; color:#fff; outline:none; cursor:pointer; -webkit-appearance:none; -moz-transition:opacity .1s ease-in-out; -ms-transition:opacity .1s ease-in-out; -o-transition:opacity .1s ease-in-out}
#topSearch .submit:hover,
#topSearch .submit:focus{filter:alpha(opacity=90); opacity:.9}
 

 

 

 

3. 뉴스레터html

<div id="mc_embed_signup">
<form action="//caninsider.us12.list-manage.com/subscribe/post?u=a0e583eb0a877e329caf4eb2d&amp;id=4b1fba1400" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <label for="mce-EMAIL">뉴스레터 구독하기</label><span style="line-height:15px"><p><font size=2px>매주 새로운 Caninsider의 소식을 만나세요.</font></p><span>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="이메일주소를 입력하세요." required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a0e583eb0a877e329caf4eb2d_4b1fba1400" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="구독하기" name="구독하기" id="mc-embedded-subscribe" style="background color:red" class="button"></div>
    </div>
</form>
</div>
 

 

 

 

4. 뉴스레터 css

#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 10 10px 30%}
#mc_embed_signup h2 {font-weight:bold; color:#888888; padding:30px; margin:20px 10; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none; }
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #EA5859; border: 0 none; border-radius:0x; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:13px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline;}

#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:85%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
 

댓글 4

  • 어떻게 충돌하시는데요? 올리신 코드에서는 딱히 겹치는 부분이 없어보이는데.. html,css 문제는 문제가 되는 페이지를 링크하시면 정확하고 빠른 답변 받을 수 있습니다..
  • Untitled-1.jpg

    이게 지금 위에 원래 검색창처럼 나와야되는 거고요.. 

    http://caninsider.com/xe/index 주소예요. 푸터에 우측 하단에 뉴스레터 폼을 넣기만 하면 이렇게 레이아웃전체가 깨지고 버튼이 쪼매난 회색으로 바뀌어요. 

     

  • @ginak
    뉴스래터를 감싸고 있는 div의 id값이 이미 상위섹션에서 쓰이고 있네요.

    위에 올리신 뉴스레터 html과 css에서 mc_embed_signup 를 다른 이름으로 바꿔보세요.
  • 말씀하신대로 했더니 잘 작동하네요~ 정말 감사합니다! ^_^