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