css관련 도움 부탁 드립니다. 정보
css관련 도움 부탁 드립니다.
관련링크
http://ksmshop1213.cafe24.com/
179회 연결
본문
메뉴 가운데 정렬이 안되네요.
---------------------------------------------
<div module="Layout_category">
<!--@css(/css/module/layout/category.css)-->
<!--@js(/js/module/layout/category.js)-->
<h2>상품분류메뉴</h2>
<div class="postion" >
<ul>
<li class="pst10"><a href="/front/php/newpage.php?code=2" onMouseOver="img16.src='/SkinImg/me01_over.jpg'" onMouseOut="img16.src='/SkinImg/me01.jpg'" onfocus='this.blur()'>
<img id='img16' src='/SkinImg/me01.jpg' border=0; alt="All"></a></li>
<li class="pst1"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst2"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst3"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst4"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst5"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst6"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst7"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst8"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst9"><a href="/product/list.html{$param}">{$img_tag}</a></li>
</ul>
</div>
</div>
------------------------------------------------------------------------------
관련 css
.xans-layout-category { height:30px; margin:0 auto; }
.xans-layout-category h2 { display:none; }
.xans-layout-category .postion {z-index:1; text-align:center; margin:0 auto; }
.xans-layout-category ul {*zoom:1; border-top:1px #575757 solid; border-bottom:1px #575757 solid; height:40px; }
.xans-layout-category ul:after {content:""; display:block; clear:both; }
.xans-layout-category li { position:relative; float:left; padding:0 0px; text-align:center; }
.xans-layout-category li a { display:block; text-align:center; color:#839ca0; font-weight:bold; font-family:Lucida Sans; }
.xans-layout-category li a:hover { }
.xans-layout-category li img { position:relative; float:left; padding:8px 0px 0px; text-align:center; }
.xans-layout-category li.on > a { }
.xans-layout-category li.on { }
.xans-layout-category .sub-category { position:absolute; left:0; top:42px; display:block; width:500px; }
.xans-layout-category .sub-category ul { margin:0 0 10px; }
.xans-layout-category .sub-category a { float:left; padding:0 0 0 13px; color:#828b90; font-style:normal; }
.xans-layout-category .sub-category a:hover { color:#828b900; }
.xans-layout-category .sub-category li { display:inline; float:none; width:auto; line-height:32px !important; padding:0px 5px 0; }
.xans-layout-category .pst1 .sub-category { left:40px; }
-----------------------------------------------------------------------------------
http://ksmshop1213.cafe24.com/
부탁 드립니다.
---------------------------------------------
<div module="Layout_category">
<!--@css(/css/module/layout/category.css)-->
<!--@js(/js/module/layout/category.js)-->
<h2>상품분류메뉴</h2>
<div class="postion" >
<ul>
<li class="pst10"><a href="/front/php/newpage.php?code=2" onMouseOver="img16.src='/SkinImg/me01_over.jpg'" onMouseOut="img16.src='/SkinImg/me01.jpg'" onfocus='this.blur()'>
<img id='img16' src='/SkinImg/me01.jpg' border=0; alt="All"></a></li>
<li class="pst1"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst2"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst3"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst4"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst5"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst6"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst7"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst8"><a href="/product/list.html{$param}">{$img_tag}</a></li>
<li class="pst9"><a href="/product/list.html{$param}">{$img_tag}</a></li>
</ul>
</div>
</div>
------------------------------------------------------------------------------
관련 css
.xans-layout-category { height:30px; margin:0 auto; }
.xans-layout-category h2 { display:none; }
.xans-layout-category .postion {z-index:1; text-align:center; margin:0 auto; }
.xans-layout-category ul {*zoom:1; border-top:1px #575757 solid; border-bottom:1px #575757 solid; height:40px; }
.xans-layout-category ul:after {content:""; display:block; clear:both; }
.xans-layout-category li { position:relative; float:left; padding:0 0px; text-align:center; }
.xans-layout-category li a { display:block; text-align:center; color:#839ca0; font-weight:bold; font-family:Lucida Sans; }
.xans-layout-category li a:hover { }
.xans-layout-category li img { position:relative; float:left; padding:8px 0px 0px; text-align:center; }
.xans-layout-category li.on > a { }
.xans-layout-category li.on { }
.xans-layout-category .sub-category { position:absolute; left:0; top:42px; display:block; width:500px; }
.xans-layout-category .sub-category ul { margin:0 0 10px; }
.xans-layout-category .sub-category a { float:left; padding:0 0 0 13px; color:#828b90; font-style:normal; }
.xans-layout-category .sub-category a:hover { color:#828b900; }
.xans-layout-category .sub-category li { display:inline; float:none; width:auto; line-height:32px !important; padding:0px 5px 0; }
.xans-layout-category .pst1 .sub-category { left:40px; }
-----------------------------------------------------------------------------------
http://ksmshop1213.cafe24.com/
부탁 드립니다.
댓글 전체
메뉴 ul width 값이 없어서 div width를 물려 받아 1000px으로 되어있습니다. 그안에 li들이 float left로 가있구요.
가운데 정렬 처럼 보이고 싶으시면 catogory li {padding: 0 0px}을 0 20px 정도 주면 간격이 벌어져 가운데 처럼 보이긴 하겠네요.
가운데 정렬 처럼 보이고 싶으시면 catogory li {padding: 0 0px}을 0 20px 정도 주면 간격이 벌어져 가운데 처럼 보이긴 하겠네요.
모노폴리님 감사해요 ~
모노폴리님 답변 감사드립니다.
padding 20 없이 가운데 정렬을 원하는 것입니다. 왼쪽,오른쪽 공간이 남게요~
다시 부탁 드립니다. 감사합니다.
padding 20 없이 가운데 정렬을 원하는 것입니다. 왼쪽,오른쪽 공간이 남게요~
다시 부탁 드립니다. 감사합니다.
그러시면 ul을 보니 width:760px을 추가하면 맞겠구요 margin:0 auto;를 추가해주시면 가운데로 오겠네요. 그러면 border-top과 bottom이 ul에 적용되어있어 760px로 줄이 줄어드니 border-top과 bottom을 ul을 감싸고 있는 div (클래스명:postion 포지션의 오타인듯?)로 옮겨주시면 원하시는 결과가 있겠네요.
모노폴리님 정말 감사 드립니다....
