답변 5개
채택된 답변
+20 포인트
5년 전
쪽지 주신 url로 들어가보니 제가 말한 부분이 맞아요
#business_wrap ul li 부분이 width 값이 32%라 그런 겁니다
#business_wrap에 있는 ul의 li는 모두 저 값이 들어가니까요
말씀하신 가로로 나열되는 내용도 li라 영향을 받는 겁니다.
배너를 3구역으로 나누는 부모 ul li를 클래스를 지정해서 따로 width 값을 주시던
(이 때는 새 클래스는 32% 주시고, 기존의 #business_wrap ul li 부분은 width 지워주시구요)
아니면 지금 문제가 되는 자식 ul li를 클래스를 지정해서 따로 width 값을 주시면 됩니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 5개
�
김쌤2
5년 전
�
김쌤2
5년 전
쪽지로 감사인사를 다시 드릴려고 하니, 포인트가 없네요.
�
블랑숑
5년 전
괜찮습니다 채택이나 해주세요 ㅎㅎ
좋은 주말되세요
좋은 주말되세요
�
김쌤2
5년 전
오늘이 sir이용이 처음이라, 중요한걸 놓쳤었네요.
당연히 '채택'해야 마땅하지요^^
포인트가 많으시면 제 이메일을 아실수 있나요?
쌩뚱맞기는 하지만, 혹시 디자인 관련해서 부탁하실거 있으시면,
연락주세요. 제가 할수 있는거면 도와드릴게요.^^
다시한번 감사합니다.
당연히 '채택'해야 마땅하지요^^
포인트가 많으시면 제 이메일을 아실수 있나요?
쌩뚱맞기는 하지만, 혹시 디자인 관련해서 부탁하실거 있으시면,
연락주세요. 제가 할수 있는거면 도와드릴게요.^^
다시한번 감사합니다.
�
블랑숑
5년 전
이메일은 알 수가 없습니다
혹시 부탁드릴거 있으면 쪽지로 드릴게요 ㅎㅎ
혹시 부탁드릴거 있으면 쪽지로 드릴게요 ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
5년 전
말씀하신부분 살펴봤는데, 한열에 공지사항과 더불어 배너2개가 들어가는 구도인데요,
그 총 가로 길이에서 32%씩 총 3구역으로 나눈 것으로 보이는데요...한번만 더 봐주시면 안될까요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
블랑숑
5년 전
쪽지로 주소 알려줘보세요
댓글을 작성하려면 로그인이 필요합니다.
5년 전
</p>
<p><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>business_wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>business_area<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>board_box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>notice_area<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#noticeList1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Notice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>noticeList1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token variable">$daon_category</span> <span class="token operator">=</span> <span class="token double-quoted-string string">""</span><span class="token punctuation">;</span> </span></p>
<p><span class="token php language-php"><span class="token keyword keyword-echo">echo</span> <span class="token function">theme_lastest</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'theme/simple'</span><span class="token punctuation">,</span> <span class="token double-quoted-string string">"notice"</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></p>
<p>
아래는 css 부분입니다.
</p>
<p>#business_wrap {width:100%; padding-top:100px; margin:0 auto; background:url('../image/business_back.jpg')no-repeat; background-position:top center; }
#business_wrap:after{ content:""; display:block; clear:both;}
#business_wrap .business_tit{ width:100%; max-width:1200px; margin:0px auto; padding-bottom:50px;}
#business_wrap .business_tit span { display:block; text-align:center; font-size:1.15em; color:#e3a661; letter-spacing:2px; padding:0 10px; margin:10px 0 10px 0;}
#business_wrap .business_tit p { text-align:center; font-size:1.7em; line-height:40px; color:#444; font-weight:500; padding:0 10px; margin:0px auto; }</p>
<p>#business_wrap .business_area {width:100%; max-width:1200px; margin:0 auto;}
#business_wrap .business_area:after {display:block; clear:both; content:'';}</p>
<p>#business_wrap .notice_box { position: relative;width:100%; padding:0 20px 0 20px; }
#business_wrap .contact_box { position: relative; width:100%; padding:0 20px 0 20px; }
#business_wrap .location_box { position: relative; width:100%; padding:0 20px 0 20px; }</p>
<p>#business_wrap .business_area ul li {float:left; width:32%; height:100%; margin:0; padding:0; text-align:center; background:none; }
#business_wrap .business_area ul li:nth-child(2) {margin:0 2%; }
#business_wrap .business_area ul li img {width:100%; }</p>
<p>#business_wrap .business_area ul li .summary {position:relative; z-index:10; left:0; top:-80px; width:90%; margin:0 auto; padding:20px 20px 0 20px; background:#fff; border-radius:10px; transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -webkit-transition:all .5s ease; -o-transition:all .5s ease; }
#business_wrap .business_area ul li:hover .summary { top:-90px; cursor:pointer; }
#business_wrap .business_area ul li .summary .name {height:50px; line-height:50px; color:#000; font-size:1.5em; }
#business_wrap .business_area ul li .summary .sname {padding-bottom:20px; color:#777; font-size:1em;}
#business_wrap .business_area ul li .summary .btn_view {display:inline-block; width:40px; height:40px; cursor:pointer; background: url('../image/btn_plus_off.png')no-repeat; }
#business_wrap .business_area ul li:hover .summary .btn_view {display:inline-block; width:40px; height:40px; cursor:pointer; background: url('../image/btn_plus_on.png')no-repeat; }</p>
<p>#business_wrap .business_area ul li .notice_area { position: relative; width:95%; padding:0;}
#business_wrap .business_area ul li .notice_area .tab { height:50px; line-height:50px; border-bottom: 1px solid #eee; box-sizing:border-box; }
#business_wrap .business_area ul li .notice_area .tab li{float:left; width:30%; color:#777; }
#business_wrap .business_area ul li .notice_area .tab a{display:block; height:50px; line-height:50px; text-align: center; border:0px solid #333; border-bottom: 1px solid #333; color:#777; box-sizing:border-box; }
#business_wrap .business_area ul li .notice_area .tab a:hover, #business_wrap .business_area ul li .con_box6 .notice_area .tab a:focus {color:#000; }
#business_wrap .business_area ul li .notice_area .tab li:first-child a{border-right:0;}
#business_wrap .business_area ul li .notice_area .tab li:last-child a{border-left:0;}
#business_wrap .business_area ul li .notice_area .tab li.on a{border:0px solid #333; border-bottom:0; color:#fff; background:#333;}
#business_wrap .business_area ul li .notice_area .active{display: block; margin-top:20px; padding:0px; }
#business_wrap .business_area ul li .notice_area li{position: relative; top:0; line-height:30px; float:left;}</p>
<p>#business_wrap .business_area ul li .notice_area li span.date{position: absolute; right:0; text-align:right; line-height:30px; font-size:0.9em; color:#777; }
#business_wrap .business_area ul li .notice_area div li a{display: inline-block; margin-right:0px; font-size:1em; color:#333; }</p>
<p>#business_wrap .business_area ul li .notice_area > div{display: none; padding:0; }
#business_wrap .business_area ul li .notice_area .more{position:absolute; top:10px; right:0px; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease; }
#business_wrap .business_area ul li .notice_area .more:hover{-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg); transform: rotate(90deg);}</p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
5년 전
https://sir.kr/data/editor/2009/2049289819_1599921909.1568.jpg" />
pc화면에서는 위와 같이 가로로 리스팅되구요.
https://sir.kr/data/editor/2009/2049289819_1599921923.6583.jpg" />
작은 화면으로 가면 이렇게 아래로 정상적으로 리스팅이 되고 있어요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
블랑숑
5년 전
ul li 가 width 32프로로 돼 있네요 float left 구요
그 부분 때문에 그런것 같고
작은 화면일 때는 화면 크기별 css 내용이 다르지 싶네요
나열되는 내용들도 li인데 영향을 받지 않나 생각됩니다
그 부분 때문에 그런것 같고
작은 화면일 때는 화면 크기별 css 내용이 다르지 싶네요
나열되는 내용들도 li인데 영향을 받지 않나 생각됩니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
늦은 시간까지 답변주셔서 너무 너무 감사드리구요.
블랑숑님 하시는 작업, 일... 모든것 잘 되시길~ 바랍니다.
다시 한번 감사드려요!!!