css 오류 확인좀 부탁드리겠습니다. 채택완료
뒷집돌쇠
11년 전
조회 3,475
메인페이지를 준비하는 중인데요.
링크의 페이지를 보시면 크롬이나 쿨노보등에서는 정상적으로 슬라이드배너 좌우 화살표가
로드되는데 익스플로러에서는 좌측 화살표가 오른쪽으로 많이 밀려있습니다.
jquery 메뉴를 적용하고 나서부터 이러는데 제 지식으로는 도저히 해결책을 찾기 힘드네요. ㅠㅠ
우선 index.html 내용입니다.
</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank" rel="noopener noreferrer">http://www.w3.org/TR/html4/strict.dtd</a>"><a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank" rel="noopener noreferrer">http://www.w3.org/TR/html4/strict.dtd</a></a>"></p><p><html></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/></p><p><title>Beautiful advanced jQuery background image slideshow</title></p><p><link rel="stylesheet" type="text/css" href="css/style.css"/></p><p><script type="text/javascript" src="<a href="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js</a>"><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js</a></a>"></script></p><p><script type="text/javascript" src="js/script.js"></script></p><p></head></p><p><body></p><p><div id="header"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><!-- jQuery handles to place the header background images --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="headerimgs"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="headerimg1" class="headerimg"></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="headerimg2" class="headerimg"></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><!-- Top navigation on top of the images --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="nav-outer"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="navigation"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li id="logo"><a href="<a href="<a href="http://ami1388.83rpm.com" target="_blank" rel="noopener noreferrer">http://ami1388.83rpm.com</a>"><a href="http://ami1388.83rpm.com" target="_blank" rel="noopener noreferrer">http://ami1388.83rpm.com</a></a>"><img src="images/logo.png" border="0"></a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="menu"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul class="menu"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">My dashboard</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">Likes</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">Views</a></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#" class="documents">Documents</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#" class="messages">Messages</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#" class="signout">Sign Out</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">Uploads</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">Videos</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">Documents</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><!-- Slideshow controls --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="headernav-left"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="lheadernav"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul id="back" class="btn"></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="headernav-right"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="rheadernav"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul id="next" class="btn"></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p></div></p><p><div id="content"></p><p> </p><p></div></p><p></body></p><p></html> </p><p>
그리고 css 화일의 내용입니다. (좀 깁니다. ^^ ㅈㅅ)
</p><p>/*</p><p> __ _ _ _ </p><p> / _| | (_) | | </p><p> _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_ </p><p>| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|</p><p>| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_ </p><p>|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|</p><p> </p><p>*/</p><p> </p><p>/* BASIC RESET */</p><p>ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}</p><p> </p><p>/* HTML ELEMENTS */</p><p>body { background-color:white; font:62.5% Georgia,'Times New Roman',serif; letter-spacing:1; }</p><p>/* 가로스크롤 제거 */</p><p>html { overflow:scroll; overflow-x:hidden; }</p><p> </p><p>/* COMMON CLASSES */</p><p>.break { clear:both; }</p><p> </p><p>/* HEADER */</p><p>#header { height:600px; }</p><p>.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }</p><p> </p><p>/* NAVIGATION */</p><p>#nav-outer { height:120px; padding-top:11px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }</p><p>#navigation { height:100px; width:960px; margin:0 auto; }</p><p> </p><p>/* CONTROLS */</p><p>.btn { height:90px; width:25px; float:left; cursor:pointer; }</p><p>#back { background-image:url("../images/btn_back.png"); }</p><p>#back:hover { background-image:url("../images/btn_backo.png"); }</p><p>#next { background-image:url("../images/btn_next.png"); }</p><p>#next:hover { background-image:url("../images/btn_nexto.png"); }</p><p> </p><p>/* HEADER HAVIGATION left*/</p><p>#headernav-left { position:relative; top:185px; margin:0 auto; width:960px; }</p><p>#lheadernav { padding-left:0px; }</p><p> </p><p>/* HEADER HAVIGATION right*/</p><p>#headernav-right { position:relative; top:185px; margin:0 auto; width:960px; }</p><p>#rheadernav { padding-left:900px; }</p><p> </p><p>/* CONTENT */</p><p>#content { color:#575757; background-color:white; }</p><p>#content p { padding:10px 20px; font-size:16px; width:960px; margin:0 auto; }</p><p>#content p a { text-decoration:none; color:#CD2B3A; }</p><p>#content p a:hover { text-decoration:underline; color:#7F000C; }</p><p> </p><p>/* MENU */</p><p>#menu { position:relative; top:0px; left:420px; }</p><p>#menu ul { list-style:none; }</p><p>#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }</p><p>#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }</p><p>#menu ul li a:hover { text-decoration:underline; }</p><p>/* ----------------------------- menu --------------------------- */</p><p> </p><p>/* Reset */</p><p>.menu,</p><p>.menu ul,</p><p>.menu li,</p><p>.menu a {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>margin: 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border: none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>outline: none;</p><p>}</p><p> </p><p>/* Menu */</p><p>.menu {<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 40px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>width: 960px;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>/*background: #4c4e5a;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);*/</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-border-radius: 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-border-radius: 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border-radius: 5px;</p><p>}</p><p> </p><p>.menu li {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: relative;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>list-style: none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>float: left;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>display: block;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 40px;</p><p>}</p><p> </p><p>/* Links */</p><p> </p><p>.menu li a {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>display: block;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 0 14px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>margin: 6px 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>line-height: 18px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>text-decoration: none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border-left: 1px solid #999999;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>font-family: Helvetica, Arial, sans-serif;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>font-weight: bold;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>font-size: 13px;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>color: #f3f3f3;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>text-shadow: 1px 1px 1px rgba(0,0,0,.6);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-transition: color .2s ease-in-out;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-transition: color .2s ease-in-out;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-o-transition: color .2s ease-in-out;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-ms-transition: color .2s ease-in-out;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>transition: color .2s ease-in-out;</p><p>}</p><p> </p><p>.menu li:first-child a { border-left: none; }</p><p>.menu li:last-child a{ border-right: none; }</p><p> </p><p>.menu li:hover > a { color: #8fde62; }</p><p> </p><p>/* Sub Menu */</p><p> </p><p>.menu ul {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: absolute;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>top: 37px;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: white;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>opacity: 0;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-border-radius: 0 0 5px 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-border-radius: 0 0 5px 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border-radius: 0 0 5px 5px;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-transition: opacity .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-transition: opacity .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-o-transition: opacity .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-ms-transition: opacity .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>transition: opacity .25s ease .1s;</p><p>}</p><p> </p><p>.menu li:hover > ul { opacity: 1; }</p><p> </p><p>.menu ul li {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>overflow: hidden;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 0;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-transition: height .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-transition: height .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-o-transition: height .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-ms-transition: height .25s ease .1s;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>transition: height .25s ease .1s;</p><p>}</p><p> </p><p>.menu li:hover > ul li {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 36px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>overflow: visible;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 0;</p><p>}</p><p> </p><p>.menu ul li a {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>width: 100px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 4px 0 4px 40px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>margin: 0;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border: none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border-bottom: 1px solid #353539;</p><p>}</p><p> </p><p>.menu ul li:last-child a { border: none; }</p><p> </p><p>/* Icons */</p><p> </p><p>.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }</p><p>.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }</p><p>.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; } </p><p>
어디를 수정해야 할지 모르겠네요. css 초보라서 죄송합니다. ^^;
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
11년 전
를
로 바꾸시고
스타일을
#headernav{position:relative;margin:0 auto;width:960px}
.btn {position:absolute; top:185px; height:90px; width:25px;cursor:pointer; }
#back {left:-25px;background-image:url("../images/btn_back.png"); }
#back:hover { background-image:url("../images/btn_backo.png"); }
#next {right:-25px;background-image:url("../images/btn_next.png"); }
#next:hover { background-image:url("../images/btn_nexto.png"); }
로 바꿔보세요.
컨텐츠의 넓이를 960px로 잡은것 같아서 좌우 화살표도 960px를 기준으로 잡았구요, 화면 좌우 끝 기준으로 잡으실거면 #headernavd의 width:960px를 min-width:960px로 바꾸시고 #back, #next의 left, right값을 10~20px로 정도로 해두시면 보기 좋을것 같네요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
뒷집돌쇠
11년 전
댓글을 작성하려면 로그인이 필요합니다.
11년 전
다음처럼 수정해 시도해 보세요.
스타일시트 부분은 아래처럼 수정하시고요.
/* CONTROLS */
.btn { height:90px; width:25px; float:left; cursor:pointer; }
#back { background-image:url("http://ssr.woobi.co.kr//images/btn_back.png">http://ssr.woobi.co.kr//images/btn_back.png"); }
#back:hover { background-image:url("http://ssr.woobi.co.kr//images/btn_backo.png">http://ssr.woobi.co.kr//images/btn_backo.png"); }
#next { background-image:url("http://ssr.woobi.co.kr//images/btn_next.png">http://ssr.woobi.co.kr//images/btn_next.png"); }
#next:hover { background-image:url("http://ssr.woobi.co.kr//images/btn_nexto.png">http://ssr.woobi.co.kr//images/btn_nexto.png"); }
/* HEADER HAVIGATION left*/
#headernav-left { position:relative; display:inline; float:left; top:185px; margin:0 auto; }
/* HEADER HAVIGATION right*/
#headernav-right { position:relative; display:inline; float:right; top:185px; margin:0 auto; }
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
뒷집돌쇠
11년 전
답변 감사합니다. ^^
말씀하신것처럼 해보았는데 중앙기준 좌우 끝으로 화살표가 이동하였으나
익스플로러에서는 마찬가지로 끝의 기준이 다르네요.
현재 확인중인 익스플로러는 9버젼입니다.
이것때문에 다른 작업에 손을 못대고 있네요. ㅎ
말씀하신것처럼 해보았는데 중앙기준 좌우 끝으로 화살표가 이동하였으나
익스플로러에서는 마찬가지로 끝의 기준이 다르네요.
현재 확인중인 익스플로러는 9버젼입니다.
이것때문에 다른 작업에 손을 못대고 있네요. ㅎ
�
네이비칼라
11년 전
익스10에서 아무것도 없이 그 부분만 테스트 해 봤는데 괜찮게 정렬이 되었구요,
크롬에서도 잘 되어 올렸는데 안타깝습니다 ^^
크롬에서도 잘 되어 올렸는데 안타깝습니다 ^^
�
뒷집돌쇠
11년 전
신경써주신것만으로도 감사합니다. ^^
다른 익스버젼 테스트해보구 7버젼아래로는 버리고 여차하면 9버젼도 버려야할듯 싶습니다. ㅎㅎ
다시한번 감사드립니다. ^^;
다른 익스버젼 테스트해보구 7버젼아래로는 버리고 여차하면 9버젼도 버려야할듯 싶습니다. ㅎㅎ
다시한번 감사드립니다. ^^;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
구세주이십니다. 정상 작동합니다.엉엉~
새벽비님덕분에 메인을 바로 작업할 수 있을것 같네요.
알려주신 소스분석하면서 공부를 더 해봐야겠습니다.
진심으로 감사드립니다. ^^;